FullCalendarでカレンダーを簡単に作成（React + vite）

はじめに

React を使ってカレンダー機能を実装したいときに便利なのが FullCalendar
GoogleカレンダーのようなUIを簡単に組み込み可能

今回は設定がシンプルで高速なViteとReactを使って月/週/日ビューに切り替え可能なカレンダーを表示するアプリを最小構成で作成

開発環境

• Windows 11
• Vite 6.2.0
• React 19.0.0
• JavaScript

1. Viteで簡単にプロジェクト作成

npm create vite@latest my-fullcalendar-app --template react
cd my-fullcalendar-app

2. Fullcalendarをインストール

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid

カレンダー表示

src/App.jsx

月/週/日ビューに対応した以下最小コードの構成

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import allLocales from "@fullcalendar/core/locales-all";

function App() {
  return (
    <div>
      <FullCalendar
        locales={allLocales}
        locale="ja"
        plugins={[dayGridPlugin, timeGridPlugin]}
        initialView="dayGridMonth"
        height="auto"
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        views={{
          dayGridMonth: { buttonText: '月' },
          timeGridWeek: { buttonText: '週' },
          timeGridDay: { buttonText: '日' },
        }}
      />
    </div>
  );
}

export default App;

起動

npm run dev

まとめ

FullCalendarで月・週・日ビューの切り替えのカレンダーをシンプルに導入できる初期ビューやボタン表示のカスタマイズも簡単