Angular+fullcalendar環境で「Unknown option ‘dateClick’」
今回はAngular+fullcalendarを使った環境で下記のwarningが出てdateClickなどが反応しなくなったときの対処法についてご紹介いたします。
|
1 2 3 |
Unknown option 'dateClick' Unknown option 'eventDrop' Unknown option 'eventResize' |
Angularのバージョンは15.2.11で、fullcalendarのバージョンは6.1.14です。
Angular+fullcalendar環境で「Unknown option 'dateClick’」
fullcalendarのバージョンを5.11.3から6.1.14に上げたときにこのwarningが出てfullcalendarが動かなくなりました。
結論を言うと、interactionPluginをインポートして記載していないことが原因でした。
公式の5系から6系へのバージョンアップガイドでバージョンアップに伴うFullCalendarModule.registerPluginsの記載の変更についてのサンプルがあるのですが、元のソースコードでinteractionPluginがなくてもdateClickやeventDrop、eventResizeの関数を使いたい場合はinteractionPluginの記載が必要です。
https://fullcalendar.io/docs/upgrading-from-v5
例えば、元のapp.module.tsに次のようにinteractionPluginの記載がなくても、新しくapp.component.tsにinteractionPluginの記載が必要となります。
|
1 2 3 4 5 6 7 8 |
// app.module.ts import { FullCalendarModule } from '@fullcalendar/angular' - import dayGridPlugin from '@fullcalendar/daygrid' - FullCalendarModule.registerPlugins([ - dayGridPlugin, - ]); |
地味に焦ったので気をつけましょう。
終わりに
今回はAngular+fullcalendarを使った環境で冒頭のwarningが出てdateClickなどが反応しなくなったときの対処法についてご紹介いたしました。