ReactでFullcalenderのv5のカレンダーを表示してみました

こんにちわ。nap5です。

ReactでFullcalenderのv5のカレンダーを表示してみましたので、紹介したいと思います。

Fullcalenderのドキュメントはこちらです。

React Component - Docs | FullCalendar

公式からサンプルプロジェクトも提供されています。

デモサイトです。

Have a nice day

デモコードです。

cranky-fog-999o0l - CodeSandbox

viteなどのビルドツールを使うと以下のエラーを確認できます。

vdom.js:3 Uncaught Error: Please import the top-level fullcalendar lib before attempting to import a plugin.
    at vdom.js:3:11

これを解決するために、以下のISSUEのコメントが参考になりました。

1行目から以下のようにインポートすると動くようになります。

import '@fullcalendar/react/dist/vdom';
import FullCalendar, { formatDate } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import React, { useCallback, useState, useEffect } from 'react';

この行が必要です。

import '@fullcalendar/react/dist/vdom';

簡単ですが、以上です。