【Next.js】FullCalenderでBootstrap 5 Themingを使用してスタイルを適用する方法

はじめに

アプリ開発で初めてFullCalenderを使用しているのですが、デフォルトデザインだと味気ないので、Bootstrap 5 Themingを使用してスタイルを適用したいと思います。
案外やり方が載っていなかったので備忘録としてまとめました。

【各バージョン】
TypeScript：v5
React：v18
Next.js：v14.2.3
tailwindcss：v3.4.1
fullcalender：v6.1.15

方法

１．@fullcalendar 関連のパッケージと Bootstrap のスタイルを適用するために必要なパッケージをインストールします。

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/bootstrap
npm install bootstrap

２．Bootstrap のスタイルは複数種類あるので、好きなものを選択。
今回はMintyを選択しました。
下記のデモでデザインを確認できます。

bootswatchのHPでもスタイル確認できます。

３．cdnjs から提供されているURLを使って、自分の選択したテーマを Next.js プロジェクトのglobals.cssにインポートします。

※Mintyテーマインポート時

globals.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/minty/bootstrap.min.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

※インポートしたテーマが適用されない場合

global.css に記載されている --backgroundや --foreground の変数に上書きされている可能性があります。
各変数の冒頭に --custom-を付け足すと解消されるかもしれません

globals.css

/* fullcarender-Mintyテーマが持つ変数名と競合しないようにする */
:root {
  --custom-background: #ffffff;
  --custom-foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --custom-background: #0a0a0a;
    --custom-foreground: #ededed;
  }
}

body {
  color: var(--custom-foreground);
  background: var(--custom-background);
}

※おまけ
テーマ設定後、カレンダーの各要素をさらにカスタマイズしたい場合は下記のように明示的に設定ができます。

例えば下記の場合、カレンダー内のボタンにはMintyテーマをそのまま適用し、イベントタグでは自分の好きなカラーを設定しています。

globals.css

/* カレンダー内の各要素設定 */
.fc-button {
  background-color: var(
    --bs-primary
  ) !important; /* Bootswatchテーマ（Minty）のデフォルト設定使用 */
}
.fc-event {
  background-color: #ffffff !important; /* イベントの背景色を白にカスタマイズ */
  color: #000000 !important; /* イベントのテキスト色を黒に */
  border: none !important; /* イベント枠線があれば消す */
}

ちなみにMintyテーマ適用後のカレンダーはこんな感じです。

おわりに

bootswatchやcdnjsの存在を初めて知った＆cssの設定をいじるいい機会になったと思っています。
また、テーマを適用するだけでデザインもいい感じになってくれるのでありがたいです。