【React】FullCalendarのカレンダーにイベントを表示するためのTips

1. 概要

前回の続き。
FullCalendarで作ったカレンダーにイベントを表示していきます。

2. 環境

CodeSandbox(React, TypeScriptテンプレート使用)

React v18.0.0
FullCalendar v5.11.3

3. 実装

3-1. カレンダーにイベントを表示する

npm i date-fns
import FullCalendar, { EventInput } from '@fullcalendar/react'
// ・・・ 省略
import { format } from 'date-fns'

const events: EventInput[] = [
  {
    title: 'event sample',
    start: format(new Date(), 'yyyy-MM-dd')
  }
]

export const Calendar = (): JSX.Element => {
  return (
    <FullCalendar
      // ・・・省略
      initialEvents={events}
    />
  )
}

イベントを表示するためにはinitialEventsにEventInputの配列を与えます。
また、日付のフォーマットを変更する必要があるため、日付関連のライブラリを追加します。
ここは普通に実装しても問題ありませんが、Javascriptの日付周りにはたくさんの罠があるため面倒なことはライブラリに任せてしまいましょう。

使用するプロパティの簡易的な説明
title: 表示するイベントのタイトル
start: イベントを表示する日付、「-」区切りしか受け付けていないようなので変換して渡す

設定できるイベントのプロパティについては以下を参照してください。

Event Object

これで以下のように、カレンダーの今日の日付にイベントを表示することができました。

最後に補足となりますが、initialEventsに与えた値が更新されてもカレンダーは再描画されないことに注意してください。
もしAPIから受け取った値などをカレンダー上に動的に表示したい場合は、initialEventsではなくeventsにEventInputの配列を与えましょう。

Docs Event Sources

4. まとめ

前回に引き続き、簡単な実装でカレンダーの開発を進めることができました。
次回の記事では(今度こそ)見た目のカスタマイズをやっていこうと思います。

5. 参考情報

Event Object

Docs Event Sources

関連記事

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

  2. 【React×TypeScript】環境構築メモ

  3. 【React】FullCalendarを使用してカレンダーを表示するた…

  4. TypeScript

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

  5. Firebase

    【Firebase】Firestore Security Rulesを…

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

最近の記事

  1. AWS
  2. flutter

制作実績一覧

  1. Checkeys