K1ファクトリー
FullCalendarを使ってnext.jsでカレンダー表示

FullCalendarを使ってnext.jsでカレンダー表示

参照サイト「Next.js + Fullcalendar v5 を攻略する」

イベント告知ページを作りたいので、
ヘッドレスCMSであるMicroCMSにて、イベント情報・画像を投稿し、
APIにて情報を取得し、一覧表示、詳細表示をさせ、
カレンダーにもそのイベント情報を表示させたいとおもっています。

イベント情報の表示は、このブログ同様にすればいけそうなので、
今回はカレンダーにイベント情報（タイトル）を表示させるために、
まずはNext.jsで表示できるカレンダーライブラリを探し、
FullCalendarってのがよさげなので試してみました。

参照サイトにそって、
FullCalendarをインストールします。

$ npm install --save @fullcalendar/react @fullcalendar/daygrid

カレンダーのビューに使うプラグインのdaygridもインストールしています。

カレンダー表示ページの作成（cal.js）

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export default function Callendar() {
 return (
  <div className="px-6 pt-20 text-center bg-white">
  <section>
   <FullCalendar
   plugins={[dayGridPlugin]}
   initialEvents={[{ title: "イベント", start: new Date() }]}
   />
  </section>
  </div>
 </Layout >
 )
}


<FullCalendar ... />このタグでカレンダーを表示してるんですね。

でも、これだけでは表示できないんです。参照サイトでも書かれてますが、
npm run dev すると、
Global CSS cannot be imported from within node_modules. というエラーが出てしまいます。
Next.jsではnode_modules内のファイルからCSSのインポート禁止なんだそうです。
FullCalendarでnode_modules内のファイルからCSSをインポートしてました！
だめじゃん！！



ということで、参照サイトの解決策を実行！

解決のためのステップ１「next-transpile-modules」をインストール

ESMで書かれているFullCalendarをトランスパイルできるようにします。
※ESM：ESモジュールの略　トランスパイル：ある言語で書かれたコードを元に別の言語のコードを生成すること。

ES6で書かれたコードを元にES5のシンタックスにしたコードを生成すること。
要は、最新のコードで書かれたプログラムを古いブラウザでも実行できるコードにするってことのようです。
そのための「next-transpile-modules」です。

ということで、インストール！

$ npm install next-transpile-modules@^4.1.0

実は最新版はver 8だったりするんですけど、うまくいかないので古いバージョンを使います。

インストールしたら、次に next.config.js を変更します。
もともとは、以下のような内容だったのですが、

module.exports = {
 reactStrictMode: true,
 images: {
 	domains: ['images.microcms-assets.io'],
 },
}


以下のようにします！

const withTM = require("next-transpile-modules")(["@fullcalendar"]);
module.exports = withTM({
 webpack5: false, // <---これ重要！
 reactStrictMode: true,
 images: {
 	domains: ['images.microcms-assets.io'],
 },
});


参照サイトにはなかったんですが、
webpack5: false, を追記してます！！

これは、webpack5は使わないで、webpack4を使います。ということです。
というのも、webpack5だとどうしてもエラーが出て表示できなかったからです。
本当は webpack5でもできるのかもしれないのですが、
現在、対策がわかりません。ご存知の方は教えて下さい。


ステップ２「babel-plugin-transform-require-ignore」をインストール

$ npm i babel-plugin-transform-require-ignore


babel.config.js ファイルを追加します。（私の環境ではなかったので追加しました）

module.exports = {
  presets: ["next/babel"],
  overrides: [
    {
      include: ["./node_modules/@fullcalendar"],
      plugins: [
        [
          "babel-plugin-transform-require-ignore",
            {
              extensions: [".css"],
            },
        ],
      ],
    },
  ],
};

これで、".node_modules/@fullcalendar" 内のファイルから .css をインポートしている部分を削除することができます。
Next.jsでのエラーに対応してるんですね。

以上で、fullcalendarが表示できるようになります。
ですが、babel.config.jsファイルにて、CSSのインポートを削除してるので、
スタイルシートが全く効いてない状況なので、改めてCSSを読み込んであげます。

cal.jsにて、

import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

を追記してあげます。

最終的には以下のようなコードになります。
cal.js

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

export default function Callendar() {
 return (
  <div className="px-6 pt-20 text-center bg-white">
  <section>
   <FullCalendar
   plugins={[dayGridPlugin]}
   initialEvents={[{ title: "イベント", start: new Date() }]}
   />
  </section>
  </div>
 </Layout >
 )
}

これで、どうでしょう！？


当サイトのカレンダーページ になります。
次回は、このカレンダーにイベントを表示できたらいいなぁ。

HTML is loading comments...