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

ホーム
BLOG
【React】, 【TypeScript】
【React】FullCalendarのカレンダーにイベ…

【TypeScript】
2022.11.29

【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

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