コンポーネント
Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>
内に、コンポーネントとして以下の様に読み込む。
<template>
<div>
<FullCalendar :options="config" >
</div>
</template>
Vuexとの連携
Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。
例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。
computed: {
config() {
return {
...this.configOptions,
};
},
configOptions() {
return {
firstDay: 1,
editable: false,
navLinks: false,
selectable: false,
events: this.events,
weekends: this.weekendsVisible,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
}
}
//...
...mapGetters("events", ["events"]),
}
詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects