【FullCalendar】日付をクリックせずに年月を取得する方法【Laravel】

初めまして、エンジニアの阿部です。

今回はカレンダーが実装できる、JSライブラリのFullCalenderをLaravelで利用した際に困った出来事の一つを紹介させて頂きたいと思います。

今回私が実装する機能の中に『現在表示しているカレンダーの年月のデータを表示するページへと遷移するボタン』がありました。
FullCalenderを利用することで、カレンダー内の日付をクリックするとその日付を取得できる機能があるのですが、こちらのボタンはカレンダー外に存在させる必要があり、カレンダー内をクリックして日付を取得することで年月を割り出すといった方法では実装ができない状態でした。

クリックした日付を取得できる便利な機能はありますが、日付をクリックせずに現在開いているカレンダーの年月を取得するにはどうすれば良いかを今回は紹介させて頂きます。

開発環境

OS：Windows11
言語：Laravel
使用ライブラリ：FullCalendar

FullCalendarとは

FullCalendarとはカレンダーの機能を実装できるJSライブラリです。
簡単にカレンダーのデザインやレイアウトを変更したり、カレンダーの日付毎のスケジュールを管理する機能などが実装できる便利なライブラリです。
下記のサイトに実装方法が記載されておりますので、利用したい方はこちらも併せてご確認ください。

LaravelでFullcalendarを実装する方法

カレンダーの日付の取得方法

FullCalendarの機能の中にはクリックした日付を取得する機能が存在しています。
bladeファイル内に下記の様に記載することで実装ができます。

document.addEventListener('DOMContentLoaded', function() {
    var select = document.getElementById('home-id');
    var calendarEl = document.getElementById('calendar');
    //dataClickにはカレンダーの日付をクリックした際の処理を書くことができ、
    //info.dateStrにyyyy-mm-ddの形式でクリックした日付が格納されています。
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'ja',
        height: 'auto',
        firstDay: 0,
        dateClick: function(info) {
            selectDate(info.dateStr);
        },
    });
    calendar.render();
});

この機能を利用することでカレンダーの日付をクリックした際に日付の情報を渡しつつ、クリック時の処理が実行できるようになるため、とても便利な機能です。

日付クリックせずにカレンダーの年月を取得する方法

今回の実装ではカレンダー外にボタンを存在させる必要があり、先ほどの日付を取得する方法では取得が行えない状態でした。
そのため、他の機能で日付の取得が行えないかを検証したのですが、結論としては機能としては存在していないため、カレンダー表示時に表示されている年月のテキストを取得し、そこから年月を取得する形で実装を行いました。

  //locale: 'ja'を指定しているため、日本語での年月表示が
  //されている箇所のtext要素を取得し、『年』の前後を取得する

  //カレンダーの年月表示がされている箇所のテキスト要素の文字列『〇〇〇〇年〇月』
  var yearMonth = $("#fc-dom-1").text(); 
  //年の前の文字列を切り取ることで年を取得
  var year = yearMonth.substr(0, yearMonth.indexOf('年'));
  //年以降の文字列を切り取ることで月を取得
  var month = yearMonth.substr(yearMonth.indexOf('年') + 1);
  //月の文字列が残るため削除
  month = month.substr(0,month.indexOf('月'));

まとめ

少々強引な方法ではありますが、FullCalendarでは存在していない機能に対しての実装が難しいためこちらの方法で年月の取得を行いました。
FullCalendarはカレンダーを実装するにあたってとても便利なライブラリではありますが、拡張性には難があるため使用するかどうかの判断は、実装したい機能に沿った機能が存在しているかどうかで判断するのが良いと感じました。
今回の問題に突き当たった際にかなり多くの時間を割いてしまい、大幅なロスとなってしまいました。
ライブラリに頼りっきりの状態だと、今回のようなケースが発生してしまう可能性もあるため、ライブラリの利用はメリットとデメリットを把握した上で利用すべきだと今回の件で学ぶことができました。

次回からは今回の学びを生かした上でエンジニアとしての活動を続けていきたいです。