📘

Next.jsでFullCalendar使ってみた(基本の導入・表示まで)

に公開

Next.jsでFullCalendar使ってみたので備忘録的にまとめます。
少しでも参考になれば幸いです。

まずはFullCalendarをインポートします。

npm install --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/core @fullcalendar/common @fullcalendar/interaction

index.jsにimportします。

import FullCalendar from "@fullcalendar/react";
import dayGridPluging from '@fullcalendar/daygrid';

表示確認のため不要な行は削除して下記のように記述します。

export default function Home() {
  return (
    <div>
      <FullCalendar
      plugins={[dayGridPluging]}
      />
    </div>
  );
}

最後にサーバを起動します。

yarn dev

月間カレンダーが表示できました。

node -v v18.18.2
Next.js 15.3.1

参考にさせて頂いたサイト
https://qiita.com/dende-h/items/e6c65198e3d7debf0f1e

Discussion