fullcalendarの日本語化

Question

Laravel 5.5 を使用して、fullcalendarを使用しています。

https://github.com/maddhatter/laravel-fullcalendar
を使用しています。

カレンダーの日本語化は可能でしょうか？

また、最新のfullcalendar 3.8.0は使用可能でしょうか？

Answer 1

fullcalendarというJavaScriptの設定で変更可能です。下記のようにすれば日本語にできます。

• 公式ローケル設定デモ
• ローケルドキュメント

$(要素).fullCalendar({
    //...
    'locale' : 'ja',
    //...
});

JavaScriptを書きたくない場合は、fullcalendarを設定するときに下記のようにローケルを設定すればよろしいかと思います。

//Calendarファサードで設定を追加（上書きされるので、複数ある場合はすべて記載する）
\Calendar::setOptions(['locale' => 'ja',,,]);

= 追記 =

解決済みですが、追記しておきます。
必要なJavaScriptライブラリは、jquery.js, moment.js, fullcalendar.js, locale-all.js（ja.js）です。ひとつでも抜けると実行できません。ドキュメントにはmoment.jsで日付処理をやってるという記述があります。そして、moment.js は fullcalendar.js の前に呼び出さなくてはなりません。

fullcalendar.jsが最新バージョンでない場合は、本回答のコメントにあるように、ファイル名が変わっている（v2.2.7はlang-all.js）ので、下記からCDNリンクを使うようにします。
https://cdnjs.com/libraries/fullcalendar

<div id="calendar"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/locale-all.js"></script>
<!-- OR
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/locale/ja.js"></script>
-->

<script>
$('#calendar').fullCalendar({
  'locale' : 'ja',
});
</script>
</body>
</html>

Comments

[hrsi_teratail]

Calendar::setOptions(['locale' => 'ja']);
を設定しましたが、英語のままですね。

以下のようなスクリプトが出力されています。

$('#calendar-q46iyAQS').fullCalendar({"header":{"left":"prev,next today","center":"title","right":"month,agendaWeek,agendaDay"},"eventLimit":true,"locale":"ja","events":[{"id":null,"title":"TITLE\n","allDay":true,"start":"2018-01-31T09:00:00+09:00","end":"2018-01-31T18:00:00+09:00","color":"#0F0","url":"http://google.com"}]});

[hrsi_teratail]

以下でも英語になってしまいます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/locale-all.js"></script>

<script>
$(function () {
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: 'month,basicWeek,basicDay'
},
'locale' : 'ja',
});
});
</script>

[aro10]

ちょっと気になって確認してみましたが、
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/locale-all.js
は存在せず
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js
が正しいみたいですね
https://cdnjs.com/libraries/fullcalendar/2.2.7

[hrsi_teratail]

たしかにそうですね。確認不足でした。

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang/ja.js"></script>

のみで日本語になりました。