FullCalendar 6 + Laravel 9
Laravel 9
のAPI 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
他の人が書いた内容を試したのですが、うまく動作しなかったのは、start
とend
をaxios
で指定してないから?