【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. 概要 にあったカレンダーが表示されます。

4. まとめ

これでFullCalendarを使用してカレンダーを表示することができました。
次回の記事では見た目のカスタマイズをやっていこうと思います。

5. 参考情報

https://fullcalendar.io/docs/react

https://fullcalendar.io/docs/locale

関連記事

  1. 【React】FullCalendarのヘッダーツールバーを整えるため…

  2. 【React】FullCalendarのカレンダーを整えるためのTip…

  3. Firebase

    【Firebase】Firestore Security Rulesを…

  4. TypeScript

    【TypeScript】触ってみる

  5. 【React】FullCalendarのカレンダーにイベントを表示する…

  6. TypeScript

    【TypeScript】TypeScriptで変数の型を宣言する

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys