Nuxt.jsでFullCalendarを使う方法

コンポーネント

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

Please follow and like us: