# 1ヶ月カレンダーの作成2 １ヶ月カレンダーの日付に関して、レイアウトを調整します。日付のレイアウトは、以下の3パターンを考慮します。 * 今日の場合はlimeで丸く背景色をつける * 今月でない日付（先月の月終わりの日付、来月の月初の日付）は灰色 * 上記以外は黒こちらの3パターンにスタイリングを分けるために、`対象の日付`と`現在の日付`を引数に受け取り、 tailwindcssのclass名を返却する関数を作成しましょう。まず、`対象の日付`が今日であるかどうかをチェックし、今日の場合は、`bg-lime-800 text-white rounded-full`という文字列を返却します。その際には、`isToday`という関数を使用することで、引数の日付が今日の場合は`true`を返却します。次に、`対象の日付`と`現在の日付`が同じ月かどうかをチェックし、同じ月の場合は、`text-black`を、違う場合は、`text-gray-300`を返却するようにします。その際には、`isSameMonth`という関数に引数を二つ与えることで、同じ月の場合はtrueを返却します。最終的には以下のような関数となります。

import { eachDayOfInterval, eachWeekOfInterval, endOfMonth, endOfWeek, getDate, getMonth, isSameMonth, isToday, startOfMonth } from "date-fns";
import { DAYS_LIST } from "../../constants/calendar";
import { useEffect, useState } from "react";

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

  const dateColor = (targetDate: Date, currentDate: Date): string => {
    if (isToday(targetDate)) return "bg-lime-800 text-white rounded-full";
    return isSameMonth(targetDate, currentDate)
      ? "text-black"
      : "text-gray-300";
  };
```

こちらを日付の部分にて呼び出しましょう。classNameにてテンプレートリテラルを使用して、関数を呼び出し、埋め込みます。

...        
        <tbody>
          {dateList.map((oneWeek) => (
            <tr key={`week-${getDate(oneWeek[0])}`} className="mx-10">
              {oneWeek.map((item) => (
                <td
                  key={`day-${getDate(oneWeek[0])}`}
                  className="bg-white h-[10vh] border-2 border-solid border-lime-800"
                >
                  <span
                    className={`inline-block w-[20px] leading-[20px] text-center ${dateColor(
                      item,
                      today
                    )}`}
                  >
                    {getDate(item)}
                  </span>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
...

上記にて、以下のように12/31と2/1,2,3が灰色の文字色となり、今日の日付はlimeの背景色がついたかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: 1ヶ月カレンダーの日付ごとのレイアウトを調整 ``` としましょう。