[Next.js+FullCalendar v5] イベントがある日付にGitHubの草のように背景色をつける方法

この記事で行いたいこと

FullCalendarを使ってイベントがある日付にGitHubのように背景色をつけることができるようになります。

前提

Next.jsを使用してnpmのライブラリFullCalendarを使ってカレンダーを表示していること。

インストール方法は以下の公式や記事を参考にしてください。

実装

イベントを表示する

関数を設定して、FullCalendarタグにイベントを設定する。しかし、背景色はありません。

※dataはFetchなどして取得したものと仮定してます。

// イベントを設定
const eventExample = data.map((data: any) => ({
  title: "イベント",
  start: deta.date,
  backgroundColor: "green",
  borderColor: "green",
}))
~~省略~~
return(
 <>
	 <FullCalendar
	  plugins={[dayGridPlugin, interactionPlugin]}
	  locale={jaLocale}
	  initialView="dayGridMonth"
	  events={[...eventExample]}
	  headerToolbar={{
	    start: "prevYear,nextYear",
	    center: "title",
	    end: "today prev,next",
	  }}
	  contentHeight={"700px"}
	/> 
	
~~省略~~

【主題】イベントがある日付に背景色をつける

新たに関数を設定して、FullCalendarタグのイベントに関数を追加する。

これでイベントに加えて背景色が表示されます。

const eventExample = data.map((data: any) => ({
    title: "イベント",
    start: deta.date,
    backgroundColor: "green",
    borderColor: "green",
  }))

// 以下を追加
// 同じイベントに対して背景色をつける関数を設定
const backgroundEvents = data.map((data: any) => ({
  start: data.date,
  backgroundColor: "green",
  display: "background",
}))

~~省略~~
return(
<>
	<FullCalendar
	  plugins={[dayGridPlugin, interactionPlugin]}
	  locale={jaLocale}
	  initialView="dayGridMonth"
	  events={[...eventExample, ...backgroundEvents]} //関数を追加
	  headerToolbar={{
	    start: "prevYear,nextYear",
	    center: "title",
	    end: "today prev,next",
	  }}
	  contentHeight={"700px"}
	/>
~~省略~~

最後に

Next.jsでの実務経験がない私が投稿しているため、もっと効率のいいやり方があるかもしれません。その際はコメントをいただけると幸いです。