カレンダー機能をReactで実装する場合、FullCalendarは非常に強力なライブラリです。シンプルな月間カレンダーから複雑なスケジュール管理システムまで、幅広い機能を提供します。本記事では、FullCalendarを使用してカレンダー画面を作成する方法と、そのカスタマイズ方法を解説します。
[目次を開く]
1. カレンダー画面の基本的な構成
カレンダー画面は以下の要素で構成されます：
- ヘッダー部分
月や年の表示、ナビゲーション（前月・次月への移動）を提供します。
- ビュー切り替え
月、週、日単位でカレンダー表示を切り替える機能。
- 日付部分
各月の日付を表示し、イベントやスケジュールを視覚的に表示。
- イベント表示
カレンダー上にイベントを表示し、クリックやドラッグ＆ドロップで操作できる機能。
2. 必要なツールとセットアップ
必要なライブラリ
FullCalendarをReactで使用するために、以下のパッケージをインストールします：
-
@fullcalendar/reactReact専用のFullCalendarコンポーネント。
-
@fullcalendar/daygrid月間カレンダー表示用のプラグイン。
-
@fullcalendar/timegrid週間・日間カレンダー表示用のプラグイン。
-
@fullcalendar/interactionユーザー操作（ドラッグ＆ドロップ、クリック）をサポートするプラグイン。
プロジェクトのセットアップ
以下のコマンドを実行してセットアップします：
npx create-react-app fullcalendar-app
cd fullcalendar-app
npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction3. FullCalendarの基本的な実装
以下は、FullCalendarをReactで使うための基本的なコード例です。
src/App.tsx
import React from "react";
import FullCalendar from "@fullcalendar/react"; // FullCalendarコンポーネント
import dayGridPlugin from "@fullcalendar/daygrid"; // 月間カレンダー
import timeGridPlugin from "@fullcalendar/timegrid"; // 週間・日間カレンダー
import interactionPlugin from "@fullcalendar/interaction"; // ユーザー操作対応
const App: React.FC = () => {
const events = [
{ id: "1", title: "会議", start: "2025-01-10T10:00:00", end: "2025-01-10T11:00:00" },
{ id: "2", title: "ランチ", start: "2025-01-11T12:00:00", end: "2025-01-11T13:00:00" },
];
return (
<div style={{ width: "80%", margin: "50px auto", textAlign: "center" }}>
<h1>React FullCalendar</h1>
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",
}}
events={events}
editable={true}
selectable={true}
dateClick={(info) => alert(`日付がクリックされました: ${info.dateStr}`)}
eventClick={(info) => alert(`イベント: ${info.event.title}`)}
/>
</div>
);
};
export default App;4. コードの解説
プラグイン設定
pluginsプロパティを使って必要なプラグインを設定します：
-
dayGridPlugin：月単位のカレンダー表示を提供します。 -
timeGridPlugin：週・日単位のカレンダー表示を提供します。 -
interactionPlugin：クリックやドラッグなどのユーザー操作を有効化します。
初期表示
initialView="dayGridMonth"を設定することで、初期ビューを月間カレンダーに指定しています。
ヘッダーツールバー
headerToolbarプロパティを使用して、カレンダー上部のツールバーをカスタマイズできます：
-
left：左側に「前」「次」「今日」ボタンを配置。 -
center：中央に現在のタイトル（月と年）を表示。 -
right：右側にビュー切り替えボタン（dayGridMonth,timeGridWeek,timeGridDay）を配置。
イベント設定
eventsプロパティにイベントデータを渡すことで、カレンダー上にイベントを表示します。
例：
[
{ id: "1", title: "会議", start: "2025-01-10T10:00:00", end: "2025-01-10T11:00:00" },
{ id: "2", title: "ランチ", start: "2025-01-11T12:00:00", end: "2025-01-11T13:00:00" },
]実際はAPI連携可能な他のカレンダーアプリなどからデータをフェッチし表示させたりすることが多いと思います。
もちろん、DBと連携しeventを登録/更新、登録したeventを表示することも可能です。
5. 高機能カレンダーのカスタマイズ
FullCalendarは、基本機能以外にも豊富なカスタマイズが可能です。
ドラッグ＆ドロップ対応
editableをtrueに設定すると、イベントのドラッグ＆ドロップが有効になります。イベントの位置が変更された際に、以下のように処理を追加できます：
<FullCalendar
editable={true}
eventDrop={(info) => {
console.log(`イベントが移動されました: ${info.event.start}`);
}}
/>日付クリックイベント
dateClickプロパティを使うことで、日付をクリックした際の処理を追加できます：
<FullCalendar
dateClick={(info) => {
alert(`選択された日付: ${info.dateStr}`);
}}
/>カレンダーの日本語対応
以下をインポートして、localeプロパティで日本語を指定します：
import jaLocale from "@fullcalendar/core/locales/ja";
<FullCalendar
locale={jaLocale}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
/>6. FullCalendarの実践例
以下の例は、複数のイベントをカレンダー上で管理し、イベントの追加・編集・削除を行うものです。
イベント追加
日付クリック時にイベントを追加します：
const handleDateClick = (info) => {
const newEvent = { id: String(events.length + 1), title: "新しいイベント", start: info.dateStr };
setEvents([...events, newEvent]);
};イベント削除
イベントをクリックした際に削除します：
const handleEventClick = (info) => {
setEvents(events.filter((event) => event.id !== info.event.id));
};7. まとめ
ReactでFullCalendarを使用すると、カレンダー画面を効率的かつ柔軟に作成できます。今回の記事では、基本的なカレンダーの作成方法から高機能なカスタマイズまでを解説しました。スケジュール管理やイベント表示が必要なアプリケーションの開発にぜひ活用してください！
