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

はじめに

私はオリアプ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歳)の宿題を私が課しました。すみません。

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

型はこちら

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}
 />

スクショ

react-calendarは割とデータをわたしたら終わりではなく表示するだけでも処理を伴います。showContents関数で表示するDOMを生成していますが、関数ごとtitleContentに渡して表示する流れです。

fullcalendarはオブジェクトにコンテンツを含む仕様だったので全然このあたりは違いますね。
後で気が向いたらやろうと思っていたのですが、onChangeで現在選択されている日付を受け取れるのでステート管理が出来て、クリック時に日付の情報を持って操作することができるようです。

fullCalendarでは実装しなかったのですが、dateClickというのが用意されているのでこちらで実装出来そうです。

ちょっとまとめ

シンプルな機能ならreact-calendarがいいんだと思います。

fullcalendarは機能が充実している分、pluginが必要だったり、データを決まった型で用意しないといけないのでバックエンドがちょっと大変になるのかなと思いました。

おわりに

個人的にはfullcalendarが好きですが、react-calendarの方がメジャーなんですかね。
師匠のオススメもreact-calendarっぽいのでおとなしくreact-calendar使うが吉かなと思いました。

でも、カレンダーアプリを作りたい！ ！などのカレンダーの機能性を重視している場合はfullcalendarも候補に挙がってくるかなと思います！

参考になれば嬉しいです！！