# 予定をカレンダーに反映させる1 次に、カレンダーに予定を反映させます。 `feature/insert-schedule`にて作業します。 ```bash git switch -c feature/insert-schedule ``` 実際はAPIを叩いて予定を取得し、表示させるかと思いますが、今回は予定を取得するAPIを模した関数を作成します。その前に`Schedule`というオブジェクトの型を宣言しておきましょう。 `types`配下に`calendar.ts`を作成しましょう。その中に`Schedule`という型を宣言します。

export type Schedule = {
  id: number;
  date: Date;
  title: string;
  description: string;
};

そして、予定を取得する関数を作成します。 `api`配下に`calendar.ts`を作成します。

import { addDays } from "date-fns";
import { Schedule } from "../types/calendar";

export const getScheduleList = (): Schedule[] => {
  const today = new Date();
  return [
    {
      id: 1,
      title: "予定1",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos itaque pariatur maxime explicabo necessitatibus consequuntur dolorum eligendi vitae corporis culpa quis corrupti aliquid, quisquam sunt iste aliquam suscipit obcaecati quam assumenda nemo error esse molestiae cupiditate repellendus. Recusandae maxime neque id! Eius harum, eum aut necessitatibus architecto quia obcaecati fugiat possimus repellat molestiae nobis facilis ad quasi, maiores velit asperiores culpa voluptatibus rem praesentium a. Quia ullam consequatur repellat quidem natus facilis illo, dolorem voluptate dicta. Id voluptatibus quidem officia cupiditate voluptatem, iste a animi aut nostrum maiores, tenetur mollitia sit sed. Nostrum ad impedit rem, saepe deleniti voluptate error!",
      date: today,
    },
    {
      id: 2,
      title: "予定2",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos itaque pariatur maxime explicabo necessitatibus consequuntur dolorum eligendi vitae corporis culpa quis corrupti aliquid, quisquam sunt iste aliquam suscipit obcaecati quam assumenda nemo error esse molestiae cupiditate repellendus. Recusandae maxime neque id! Eius harum, eum aut necessitatibus architecto quia obcaecati fugiat possimus repellat molestiae nobis facilis ad quasi, maiores velit asperiores culpa voluptatibus rem praesentium a. Quia ullam consequatur repellat quidem natus facilis illo, dolorem voluptate dicta. Id voluptatibus quidem officia cupiditate voluptatem, iste a animi aut nostrum maiores, tenetur mollitia sit sed. Nostrum ad impedit rem, saepe deleniti voluptate error!",
      date: today,
    },
    {
      id: 3,
      title: "予定3",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos itaque pariatur maxime explicabo necessitatibus consequuntur dolorum eligendi vitae corporis culpa quis corrupti aliquid, quisquam sunt iste aliquam suscipit obcaecati quam assumenda nemo error esse molestiae cupiditate repellendus. Recusandae maxime neque id! Eius harum, eum aut necessitatibus architecto quia obcaecati fugiat possimus repellat molestiae nobis facilis ad quasi, maiores velit asperiores culpa voluptatibus rem praesentium a. Quia ullam consequatur repellat quidem natus facilis illo, dolorem voluptate dicta. Id voluptatibus quidem officia cupiditate voluptatem, iste a animi aut nostrum maiores, tenetur mollitia sit sed. Nostrum ad impedit rem, saepe deleniti voluptate error!",
      date: addDays(today, 1),
    },
    {
      id: 4,
      title: "予定4",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos itaque pariatur maxime explicabo necessitatibus consequuntur dolorum eligendi vitae corporis culpa quis corrupti aliquid, quisquam sunt iste aliquam suscipit obcaecati quam assumenda nemo error esse molestiae cupiditate repellendus. Recusandae maxime neque id! Eius harum, eum aut necessitatibus architecto quia obcaecati fugiat possimus repellat molestiae nobis facilis ad quasi, maiores velit asperiores culpa voluptatibus rem praesentium a. Quia ullam consequatur repellat quidem natus facilis illo, dolorem voluptate dicta. Id voluptatibus quidem officia cupiditate voluptatem, iste a animi aut nostrum maiores, tenetur mollitia sit sed. Nostrum ad impedit rem, saepe deleniti voluptate error!",
      date: addDays(today, 7),
    },
    {
      id: 5,
      title: "予定5",
      description:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos itaque pariatur maxime explicabo necessitatibus consequuntur dolorum eligendi vitae corporis culpa quis corrupti aliquid, quisquam sunt iste aliquam suscipit obcaecati quam assumenda nemo error esse molestiae cupiditate repellendus. Recusandae maxime neque id! Eius harum, eum aut necessitatibus architecto quia obcaecati fugiat possimus repellat molestiae nobis facilis ad quasi, maiores velit asperiores culpa voluptatibus rem praesentium a. Quia ullam consequatur repellat quidem natus facilis illo, dolorem voluptate dicta. Id voluptatibus quidem officia cupiditate voluptatem, iste a animi aut nostrum maiores, tenetur mollitia sit sed. Nostrum ad impedit rem, saepe deleniti voluptate error!",
      date: addDays(today, -9),
    },
  ]
}

そして、カレンダーにて予定を表示するため、CalendarPageで取り扱っているstateのdateListの型を変更します。元々は ``` [ [Date(), Date(), Date(), Date()], [Date(), Date(), Date(), Date()], ... ] ``` というDateオブジェクトの二次元配列でしたが、 ``` [ [{ date: Date(), schedules: [] }, { date: Date(), schedules: [] }.... ] ] ``` のような`date`, `schedules`をプロパティとして持ったオブジェクトの二次元配列を格納するようにします。まずはその型を`types/calendar.ts`にDateListという型を宣言しましょう。

export type Schedule = {
  id: number;
  date: Date;
  title: string;
  description: string;
}

export type DateList = {
  date: Date;
  schedules: Schedule[]
}[][]

そして、`CalendarPage`の`dateList`の型を`DateList`に修正します。次にuseEffectの処理を修正していきます。まず、`newDateList`の型をDateListに修正し、eachDayOfIntervalで`[Date(), Date(), Date()....]`のようなDateオブジェクトの配列が作られますが、その配列をさらにmapにて、`{ date: Date(), schedules: [] }`という形式の配列に作り直します。

import { eachDayOfInterval, eachWeekOfInterval, endOfMonth, endOfWeek, getMonth, startOfMonth } from "date-fns";
import { useEffect, useState } from "react";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
import { DateList, Schedule } from "../../types/calendar";

export const CalendarPage = () => {
  const today = new Date()
  const [dateList, setDateList] = useState<DateList>([]);

  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(today),
      end: endOfMonth(today),
    })
    const newDateList: DateList = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      }).map((date) => ({ date, schedules: [] as Schedule[] }));
    });

    setDateList(newDateList)
  }, [])
...

次に、先ほど定義して`getScheduleList`にてスケジュール一覧を取得し、`scheduleList`に格納します。そして、`scheduleList`を`each`で回し、日付が一致するオブジェクトの`schedules`に格納するような処理を実装します。今回dateListは二次元配列なので、`firstindex`と`secondIndex`を取得して格納するので、少々ロジックが複雑になります。

...
  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(today),
      end: endOfMonth(today),
    })
    const newDateList: DateList = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      }).map((date) => ({ date, schedules: [] as Schedule[] }))
    });

    const scheduleList = getScheduleList()
    scheduleList.forEach((schedule) => {
      const firstIndex = newDateList.findIndex((oneWeek) =>
        oneWeek.some((item) => isSameDay(item.date, schedule.date))
      )
      if (firstIndex === -1) return;
      const secondIndex = newDateList[firstIndex].findIndex((item) =>
        isSameDay(item.date, schedule.date)
      )

      newDateList[firstIndex][secondIndex].schedules = [
        ...newDateList[firstIndex][secondIndex].schedules,
        schedule,
      ]
    })

    setDateList(newDateList)
  }, [])
...

これで、`dateList`の各日付に予定を格納することができました。`dateList`の型を修正したので、`CalendarBody.tsx`を修正しましょう。propsの`dateList`の型を`DateList`として、`oneWeek[0]`の部分を`oneWeek[0].date`、`item`の部分を`item.date`に修正しましょう。

import { getDate } from "date-fns";
import { dateColor } from "../../libs/date";
import { DateList } from "../../types/calendar";

type PropsType = {
  currentDate: Date;
  dateList: DateList
};

export const CalendarBody = ({ currentDate, dateList }: PropsType) => {
  return (
    <tbody>
      {dateList.map((oneWeek, weekIndex) => (
        <tr key={`week-${weekIndex}`} className="mx-10">
          {oneWeek.map((item, dayIndex) => (
            <td
              key={`day-${weekIndex}-${dayIndex}`} 
              className="bg-white h-[10vh] border-2 border-solid border-lime-800"
            >
              <span
                className={`inline-block w-[20px] leading-[20px] text-center ${dateColor(
                  item.date,
                  currentDate
                )}`}
              >
                {getDate(item.date)}
              </span>
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
}

これでカレンダーは変わりなく表示されているかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: dateListの各日付に予定を格納するようにした ``` としましょう。