RemixでFullCalendarを使う

RemixでFullCalendarを導入する際にスタイルが適用されずに崩れて表示されていたので、その対処メモです。

モチベーション

Remix（React）でカレンダーを使いたかったのです。

環境

• Remix 1.8.2

• FullCalendar 5.11.3

結論

CSSをCDN（などから）読み込む。

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import allLocales from "@fullcalendar/core/locales-all";
import { useEffect, useState } from "react";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css",
    },
  ];
};

export default function Calendar() {
  const [calendar, setCalendar] = useState<any>(null);

  useEffect(() => {
    const cal = (
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        locales={allLocales}
        locale="ja"
      />
    );
    setCalendar(cal);
  }, []);

  return <>{calendar}</>;
}

表示結果

ポイントはroot以外でも各ページで LinksFunction を使って挿入出来るようなのでそれを使いました。

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css",
    },
  ];
};

CSSはこちらからCDNなどのURLを確認できます。

あと、調査まではしていないですが、クライアント側での画面読み込み時に FullCalendar の描画を行わないとコンソールに警告が表示されるようです。
（Remixの場合はサーバー側もうまく使ってレンダリングが行われるからとかなのかな）
ひとまず useEffect で逃げてます。先に進めたいので、また後から気になってきたら調査しようと思います。

Warning: Prop `id` did not match. Server: "fc-dom-851" Client: "fc-dom-1"

対処しなかった場合

CSSの読み込みをしなかった場合は以下のようにスタイルが崩れて表示されます。

スタイルが崩れた表示