react-calendar-timelineで祝日をハイライトする方法

環境

react-calendar-timeline

祝日をハイライトする方法

verticalLineClassNamesForTime　プロパティを使う。
if内のreturnで任意のクラス名を返却してください。今回は祝日を想定していたため、['rct-day-0']を返却しました。
rct-day-0はreact-calendar-timelineのcssで日曜日に当てられているクラス名です。
matchingHolidayが見つからなかった時に空の配列を返すことを忘れずに。

  const holidays = [
    moment('2023/1/1', 'YYYY/MM/DD'),
    moment('2023/1/2', 'YYYY/MM/DD'),
    moment('2023/1/9', 'YYYY/MM/DD'),
    moment('2023/2/11', 'YYYY/MM/DD'),
    moment('2023/2/23', 'YYYY/MM/DD'),
    moment('2023/3/21', 'YYYY/MM/DD'),
    moment('2023/4/29', 'YYYY/MM/DD'),
    moment('2023/5/3', 'YYYY/MM/DD'),
    moment('2023/5/4', 'YYYY/MM/DD'),
    moment('2023/5/5', 'YYYY/MM/DD'),
    moment('2023/7/17', 'YYYY/MM/DD'),
    moment('2023/8/11', 'YYYY/MM/DD'),
    moment('2023/9/18', 'YYYY/MM/DD'),
    moment('2023/9/23', 'YYYY/MM/DD'),
    moment('2023/10/9', 'YYYY/MM/DD'),
    moment('2023/11/3', 'YYYY/MM/DD'),
    moment('2023/11/23', 'YYYY/MM/DD'),
  ];

<Timeline
        groups={group}
        items={items}
        //他のプロパティは省略
        verticalLineClassNamesForTime={(timeStart, timeEnd) => {
          const currentTimeStart = moment(timeStart);
          const currentTimeEnd = moment(timeEnd);
        
          const matchingHoliday = holidays.find(
            (holiday) =>
              holiday.isSame(currentTimeStart, 'day') && holiday.isSame(currentTimeEnd, 'day')
          );
        
          if (matchingHoliday) {
            return ['rct-day-0'];
          }
          return [];
        }}
</Timeline>