はじめまして。GxPのよこがわ（@riki_ykgw）と申します。
この記事は、グロースエクスパートナーズ Advent Calendar 2021 17日目の記事です。
私が所属している部では個人の成長を目的とした「GrowthUs」という活動があります。
そこで私が所属しているチームではReactとカレンダーライブラリであるfullCalendarを使って1週間の予定を確認できるビューアーを作っています。
今回は活動を通じて学んだFullCalendarをReactで使用する場合の各種プロパティの設定方法を紹介していこうと思います。
【追記】FullCalendarに関する新しい記事を公開しました。
こちらも併せて読んでいただけるととてもうれしいです。
環境
- fullCalendar v5.8.0
- React v17.0.1
デフォルトの状態
デフォルトの状態だと以下の状態になります。
英語表記でまっさらな感じですね
コード上ではこんな感じ
<FullCalendar
plugins={[timeGridPlugin]}
/>
プロパティについて
ここから様々なプロパティについてご紹介していこうと思います。プロパティを追加で設定することで表示のカスタマイズを行うことができます。
今回は以下について触れていきます
locale
まずは言語の設定。locale="XX"と指定します。
日本語の場合は以下。もし韓国語にしたい場合はlocale="ko"としてください。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
/>
allDayText
上記では終日予定を表示する「all-day」という項目が英語のままですよね。
ここのテキストを変更したい場合は以下。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDayText="終日" //ここに表示させたいテキストを記載する
/>
「all-day」が「終日」に変わりましたね。
allDaySlot
もし終日予定の表示自体いらない場合は以下
allDaySlot={false} と指定します。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDaySlot={false} // alldayの表示設定。trueとすれば表示される
/>
終日予定の項目がなくなりましたね。
businessHours
次に例えば土日や朝早くの時間はグレーアウトさせたいというときです。
そんな時はbusinessHoursを使います。businessHoursでは指定した日時以外がグレーアウトで表示されます。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDaySlot={false} // alldayの表示設定。trueとすれば表示される
businessHours={{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: "07:00",
endTime: "22:00",
}}
/>
指定した日時以外がグレーアウトされました。
businessHoursの中の設定を簡単に説明します。
まずは日にちの指定をdaysOfWeekで行います。
daysOfWeek: [1, 2, 3, 4, 5]
表示されている左端の日付が0となっているため、平日を指定したい場合は上記のようになります。
時間の指定は以下のようにstartTimeとendTimeで設定します。
startTime: "07:00", endTime: "22:00"
上記で指定した時間以外がグレーアウトされます。
slotMinTimeとslotMaxTime
businessHoursの設定をしたら、もはやグレーアウトにしている時間は表示する必要ないのでは？と思った方へ。
そんな時はslotMinTimeとslotMaxTimeを使います。
slotMinTimeには表示範囲の開始時間を、slotMaxTimeには終了時間を設定します。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDaySlot={false} // alldayの表示設定。trueとすれば表示される
businessHours={{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: "07:00",
endTime: "22:00",
}}
slotMinTime="06:00:00" //時間の表示範囲start
slotMaxTime="23:00:00" //時間の表示範囲end
/>
表示が6時から23時までになりましたね。
しかし画面の大きさによっては私のように表示下部が大きく余ってしまいます。
contentHeight
そんな時はcontentHeight={'auto'}を設定します。こうすることでカレンダーの高さをいい感じで調整してくれます。
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDaySlot={false} // alldayの表示設定。trueとすれば表示される
businessHours={{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: "07:00",
endTime: "22:00",
}}
slotMinTime="06:00:00" //時間の表示範囲start
slotMaxTime="23:00:00" //時間の表示範囲end
contentHeight={'auto'} //カレンダーの高さ指定、下部の余りがなくなる
/>
下部の表示が余っていた部分がなくなりました。
高さを任意の値で指定した場合は以下のように指定します。
800pxの場合
contentHeight={'800px'}
<FullCalendar
plugins={[timeGridPlugin]}
locale="ja" // 日本語
allDaySlot={false} // alldayの表示設定。trueとすれば表示される
businessHours={{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: "07:00",
endTime: "22:00",
}}
slotMinTime="06:00:00" //時間の表示範囲start
slotMaxTime="23:00:00" //時間の表示範囲end
contentHeight={'800px'} //任意の高さに設定
/>
800pxにすると高さが低くなりスクロールバーが表示されるようになりました。
さいごに
今回はカレンダーの土台となる部分の表示についてご紹介しました。今回紹介した設定だけでもだいぶカレンダーらしい感じになったと個人的には感じます。
ほかにも様々なカスタマイズが可能ですので、今後は今回の続き＋イベントの登録やイベントをクリックしたときの処理などに関する記事が書ければと思っております。