カレンダーライブラリの比較してみた【react-calendar / fullcalendar】

投稿日: 2025年03月02日

学習振り返り

要約

2つのカレンダーライブラリ、fullcalendarとreact-calendarを比較し、それぞれの特徴や実装方法を紹介した。
fullcalendarは多機能でバックエンドのデータ準備が必要だが、react-calendarはシンプルで表示処理が主な役割を果たす。
個人的にはfullcalendarが好きだが、カレンダー機能を重視するならfullcalendar、シンプルさを求めるならreact-calendarが良い選択かもしれない。

はじめに

私はオリアプ2つ開発した時点でカレンダーを実装したことがなくて、やってみたいってずっと思っていまして、3つ目の時に初めて実装しました。

一応私TAで、オリアプでカレンダーの実装している方結構多いイメージあり、聞かれても「やったことないのでわかりません！！！」ってちょっと言いたくないなぁ(´;ω;｀)

そんな気持ちで無理矢理カレンダー機能つけました。必要ないのにw
私性格ひねくれてるので、みんながやってるreact-calendarは嫌や！違うやつで割とメジャーなんどれや！と調べてfullcalendarを実装しました。
成長願望が強いので充実した見本(公式はいいんだ。)がないのを使いたい、険しい道を選びたい、というのもあります。

その後、無駄に(意外とユーザーの友達に喜ばれたw)2つ目のオリアプにもカレンダー機能搭載してその時はreact-calendarでやってみて、結局2つとも実装したので個人的な感想を書いてみます。

このブログ書くきっかけ

最近オリアプ開発中のスクール生さんのサポートする中でカレンダーライブラリの話題になって、私のリポジトリ共有して出来たカレンダーの写真を送ってどっちがいいでしょうね～みたいな感じで話していました。

これブログにやっぱしとけばよかったかな、判断材料の一つになるよなと思ったので書いてみようと思いました。
私なら2つとも実装していい方を選びたいとか考えますが、オリアプの完成を急いでない暇人にのみ出来ることなのでそういうわけにもいかないじゃないですか。
そんなあなたのために！です。笑

ドキュメント

fullcalendar

react-calendar

ザックリ比較

fullcalendar

多機能で大規模向け
表示の切替が簡単(月・週・日・リスト)

react-calendar

シンプル

さすがにザックリ過ぎるので、実際のコードと出来たカレンダーで比較します。

同じカレンダーを実装しているわけではないです・・！！でも、どちらもかなりシンプルな機能だと思います。

fullcalendar

コード

<FullCalendar
     locale={jaLocale}//日本語
     plugins={[dayGridPlugin, listPlugin]}//pluginで機能を拡張していく
     headerToolbar={{//ヘッダー部分のに表示するボタンと位置を指定
        left: "prev",
        center: "title",
        right: "next dayGridMonth dayGridWeek list",
     }}
     height="auto"
     initialView="dayGridWeek"//初期表示を何にするか指定(ここでは週間)
     buttonText={{//headerToolbarで指定したボタンの表示を指定したい場合使用
        list: "li",
     }}
     events={data.events}//カレンダーに表示するデータを渡す
 />

スクショ

ふざけた内容です。息子(1歳)の宿題を私が課しました。すみません。

カレンダーライブラリの比較【react-calendar / fullcalendar】｜ShiftBブログ

カレンダーに表示するデータ

型はこちら

type Event = {
  id: string;
  name: string;
  title: string;
  start: string;
  end: string;
  submitted: boolean;
  url: string;
  color: string;
};
export interface Response {
  events: Event[];
}

データを取得するAPIのコード

/api/calendar/route.ts

import { buildPrisma } from "@/app/_utils/prisma";
import { NextRequest, NextResponse } from "next/server";
import { getCurrentUser } from "../_utils/getCurrentUser";
import { Response } from "@/app/_types/calendar/Response";
import { buildError } from "../_utils/buildError";
import { dayjs } from "@/app/_utils/dayjs";
import { getColorCode } from "../_utils/getColorCode";
export const GET = async (request: NextRequest) => {
  const prisma = await buildPrisma();
  try {
    const user = await getCurrentUser({ request });

    const homeworks = await prisma.homework.findMany({
      where: {
        userId: user.id,
        longVacation: {
          isActive: true,
        },
      },
      include: {
        child: true,
        longVacation: true,
      },
    });

    const events = homeworks.map(homework => ({
      id: homework.childId,
      title: homework.title,
      name: homework.child.name,
      start: dayjs(homework.longVacation?.startDate).tz().format("YYYY-MM-DD"),
      end: dayjs(homework.longVacation?.endDate).tz().format("YYYY-MM-DD"),
      submitted: homework.submitted,
      url: `${process.env.NEXT_PUBLIC_APP_BASE_URL}/homework`,
      color: homework.submitted
        ? "#4A5E65"　　　//宿題済んでたらグレーにする
        : getColorCode(homework.child.color),//未済なら子供毎に設定した色
    }));

    return NextResponse.json<Response>(
      {
        events,
      },
      { status: 200 }
    );
  } catch (e) {
    return buildError(e);
  }
};

ちょっとこれ参考になるんかなと疑問ではありますがw

イベントオブジェクトに何があればいいかは公式を見て確認しました。

fullcalendarはデータはバックエンドで作って、それをPropsに渡したら終わりです！

ヘッダーの内容などもPropsで渡してカスタマイズします。
私は触ってみたかっただけなのでシンプルな内容でしたが、pluginで色んな機能が拡張できると思います。

Googleカレンダーみたいなの作りたい！とかだといいのかもです(そこまでいくなら手作りがいい説も・・)

続きまして、react-calendarです。

react-calendar

コード

//選択されている日付を管理するステート(初期値は今日)
const [value, setValue] = useState<Value>(new Date());

//日付がクリックされた時に発火
const onChange = (nextValue: Value) => {
    setValue(nextValue);
  };

//カレンダーに表示されるコンテンツを作成する関数
  const showContents = ({ date }: { date: Date }) => {
    const targetTasks = data.tasks.filter(task =>
      dayjs(task.date).isSame(dayjs(date), "day")
    );
    return (
      <div className="pt-1 flex flex-col gap-[2px]">
        {targetTasks.map(task => (
          <TaskItem task={task} key={task.taskId} />
        ))}
      </div>
    );
  };
<Calendar
     onChange={onChange}
     value={value}
     tileContent={showContents}
 />