独学者Fossa

独学していることなど

Fossa Advent Calendar 23日目

アドベントカレンダー
アドベントカレンダー

FullCalendar 6 + Laravel 9

Laravel 9API Resourceを使って、FullCalendar 6を表示します。

Resource::collectionを使うと、dataキーでラップしますが、FullCalendar側も対応させる必要があります。

使用環境

Name Version
PHP 8.1.13
Laravel v9.45.0
FullCalendar v6.0.1
Vue v3.2.45

以前は、サービスプロバイダにJsonResource::withoutWrapping()を記述していました。

ラップしない場合

dataキーでラップしない場合だと、下記の通りです。

<template>
  <FullCalendar defaultView="dayGridMonth" :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import jaLocale from "@fullcalendar/core/locales/ja";

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        locale: jaLocale,
        plugins: [dayGridPlugin],
        eventSources: [
          {
            url: "/api/holidays",
            color: "#ff7f7f",
            textColor: "white",
           },
        ],
      },
    };
  },
};
</script>

ラップする場合

dataキーでラップする場合だと、下記の通りです。

<template>
  <FullCalendar defaultView="dayGridMonth" :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import jaLocale from "@fullcalendar/core/locales/ja";
import axios from 'axios';

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarOptions: {
        locale: jaLocale,
        plugins: [dayGridPlugin],
        eventSources: [
          {
            color: "#ff7f7f",
            textColor: "white",
            events: function (info, successCallback, failureCallback) {
              axios.get('/api/holidays', {
                params: {
                  start: info.startStr.valueOf(),
                  end: info.endStr.valueOf()
                }
              })
                .then((response) => {
                  successCallback(response.data.data);
                })
                .catch((error) => {
                  failureCallback(error);
                });
            }
          }
        ],
      },
    };
  },
};
</script>

ヒントになる部分は、FullCalendarのドキュメントに書いてあります。*1

他の人が書いた内容を試したのですが、うまく動作しなかったのは、startendaxiosで指定してないから?

イメージ図
イメージ図

FullCalendar Example Projects

github.com