# 予定をカレンダーに反映させる2 では、`dateList`に格納した`schedules`を表示していきます。予定はボタン形式で押せるようにしたいので、コンポーネントとして切り出します。 `atoms`配下に`ScheduleBtn.tsx`を作成しましょう。`props`として、`children`を受け取れるようにします。

import { ReactNode } from "react"

type PropsType = {
  children: ReactNode
}

export const ScheduleBtn = ({ children }: PropsType) => {
  return (
    <button className="block bg-lime-800 text-white rounded-sm w-[94%] px-2">
      {children}
    </button>
  )
}

では、ScheduleBtnを使用して、予定を表示します。 `item.schedules`に配列の形で格納されているので、mapで表示します。

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

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

export const CalendarBody = ({ currentDate, dateList }: PropsType) => {
  return (
    <tbody>
      {dateList.map((oneWeek) => (
        <tr key={`week-${getDate(oneWeek[0].date)}`} className="mx-10">
          {oneWeek.map((item) => (
            <td
              key={`day-${getDate(oneWeek[0].date)}`}
              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>
              <div className="flex flex-col items-center gap-1 pb-2">
                {item.schedules.map((schedule) => (
                  <ScheduleBtn
                    key={schedule.id}
                  >
                    {schedule.title}
                  </ScheduleBtn>
                ))}
              </div>
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
}

これでカレンダーに予定が表示されるようになったかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: 予定をカレンダーに表示するようにした ``` としましょう。