FullCalendar」タグアーカイブ

FullCalendar v5.xで曜日表記を変える方法

FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。

曜日表記の指定方法

曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。

dayHeaderFormat: function (date) {
    const days = ["日", "月", "火", "水", "木", "金", "土"];
    return days[date.date.marker.getDay()];
},

daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。

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