1. 概要
前回の続き。
FullCalendarで作ったカレンダーにイベントを表示していきます。
2. 環境
CodeSandbox（React, TypeScriptテンプレート使用）
React v18.0.0
FullCalendar v5.11.3
3. 実装
3-1. カレンダーにイベントを表示する
npm i date-fnsimport 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: イベントを表示する日付、「-」区切りしか受け付けていないようなので変換して渡す
設定できるイベントのプロパティについては以下を参照してください。
これで以下のように、カレンダーの今日の日付にイベントを表示することができました。
最後に補足となりますが、initialEventsに与えた値が更新されてもカレンダーは再描画されないことに注意してください。
もしAPIから受け取った値などをカレンダー上に動的に表示したい場合は、initialEventsではなくeventsにEventInputの配列を与えましょう。
4. まとめ
前回に引き続き、簡単な実装でカレンダーの開発を進めることができました。
次回の記事では（今度こそ）見た目のカスタマイズをやっていこうと思います。
5. 参考情報
投稿者プロフィール
