【React】FullCalendarを使用してカレンダーを表示するためのTips

ホーム
BLOG
【React】, 【TypeScript】
【React】FullCalendarを使用してカレンダ…

【TypeScript】
2022.11.28

【React】FullCalendarを使用してカレンダーを表示するためのTips

1. 概要

React + TypeScriptでカレンダーを作りたいときに参考になればと思います。
作成するカレンダーはこんな感じ。

2. 環境

CodeSandbox（React, TypeScriptテンプレート使用）

React v18.0.0
FullCalendar v5.11.3

3. 実装

3-1. 必要なライブラリのインストール

npm i @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

簡易的な説明
@fullcalendar/react：FullCalendarのReact向けライブラリ
@fullcalendar/core：FullCalendarのコアライブラリ、カレンダーの日本語化などで必要
@fullcalendar/daygrid：カレンダーを表示するためのプラグイン

3-2. カレンダーを表示

3-2-1. カレンダーコンポーネントを作成

mkdir src/components
touch calendar.tsx

3-2-2. コンポーネントの内容を記述

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import jaLocale from '@fullcalendar/core/locales/ja'

export const Calendar = (): JSX.Element => {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      locales={[jaLocale]}
      locale="ja"
    />
  )
}

3-2-3. コンポーネントの読み込み

import { Calendar } from './components/calendar'

export default function App() {
  return (
    <div className="App">
      <Calendar />
    </div>
  )
}

以上の実装で1. 概要にあったカレンダーが表示されます。