先日、【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では一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。