先日、【Mantine】カレンダーの土曜日を青文字にする（v5対応版）という記事を書きましたが、3月にリリースされたv6にアップデートしてみたところ、propsからdayStyleが削除されてgetDayPropsを使えとのことだったので、今回はv6でカレンダーの土曜日を青文字にする方法を紹介します。

DatePicker (previously Calendar) component no longer supports dayClassName and dayStyle props – use getDayProps instead

前提

Mantineのバージョンについて 6系を前提としています。

結論

最終的なコードとしては下記のようになりました。

<DatePicker
  getDayProps={(date) => {
    if (date.getDay() === 6) {
      return {
        sx: (theme) => ({
          color: theme.colors.blue,
        })
      }
    }

    return {}
  }}
  firstDayOfWeek={0}
  weekendDays={[0]}
  monthLabelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>

前回と比較して行数は増えたものの、複雑さがなくなり可読性が高くなったと思います。

簡単に差分を紹介していきます。

週始めの曜日設定

stringだったのが、numberに変わりました。

週始めの曜日設定

- firstDayOfWeek="sunday"
+ firstDayOfWeek={0}

↓ここの設定

カレンダー上部の年月表示Label設定

labelFormatからmonthLabelFormatに変わりました。

Label設定設定

- labelFormat="YYYY年MMM"
+ monthLabelFormat="YYYY年MMM"

↓ここの設定

文字色設定

わざわざ、同月外の文字色(outside)や選択された場合の文字色(selected)を意識する必要がなくなりました。（指定できないから、getDayPropsでは青文字対応できないかと思っていたのでびっくりしました。）

// v6
getDayProps={(date) => {
  if (date.getDay() === 6) {
    return {
      sx: (theme) => ({
        color: theme.colors.blue,
      })
    }
  }

  return {}
}}
// =======================
// v5
dayStyle={(date, modifiers) => {
  if (date.getDay() !== 6 || modifiers.outside === true) {
    return {}
  }

  const color = modifiers.selected ? 'white' : 'blue'
  return { color }
}}

その他

v6へのアップデートにより@mantine/datesのコンポーネントがだいぶ追加されているので、v5で利用されていた方は一度確認してみてはどうでしょう。

参考リンク

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。