Angular+fullcalendar環境で「Unknown option ‘dateClick’」

今回はAngular+fullcalendarを使った環境で下記のwarningが出てdateClickなどが反応しなくなったときの対処法についてご紹介いたします。

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の記載が必要となります。

地味に焦ったので気をつけましょう。

終わりに

今回はAngular+fullcalendarを使った環境で冒頭のwarningが出てdateClickなどが反応しなくなったときの対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Angular

Posted by ちこ