【Mantine】カレンダーの土曜日を青文字にする（v5対応版）

Mantineの[DatePicker](https://mantine.dev/dates/date-picker/)を使用したときに、標準では土曜日の表記が赤文字表記で違和感があったので、青文字で表示されるようにしてみました。
※今回のサンプルは[Calendar](https://mantine.dev/dates/calendar/)を使用してますが、DatePickerでも同じ方法で実装可能です。

※Mantine v5系での記事となります。v6系ではpropsの変更があります。

## 結論
最終的なコードとしては下記のようになりました。いくつか試行錯誤があったので、過程が気になる方は続きをどうぞ。
```tsx
<Calendar
  dayStyle={(date, modifiers) => {
    if (date.getDay() !== 6 || modifiers.outside === true) {
      return {}
    }

    const color = modifiers.selected ? 'white' : 'blue'
    return { color }
  }}
  firstDayOfWeek="sunday"
  weekendDays={[0]}
  labelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>
```

## 過程
### デフォルトの表示
デフォルトといいながらも、日本語表記にしたりはしてます。
```tsx
<Calendar
  firstDayOfWeek="sunday"
  weekendDays={[0]}
  labelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>
```
![default-calendar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/7a246707-8cee-b561-e974-cb5baffaa0a3.png)

### 土曜日を青文字にしていく
ドキュメントを見てると`dayStyle`か`dayClassName`を使うことで実装できそうでしたが、`dayStyle`を使ったほうが記述量少なく実装できそうだったため、`dayStyle`を使うことにします。
```tsx
<Calendar
  dayStyle={(date) => {
    // 土曜日以外であれば早期リターン
    // 戻り値の型がReact.CSSPropertiesなので{}で返す
    if (date.getDay() !== 6) {
      return {}
    }

    return { color: 'blue' }
  }}
  firstDayOfWeek="sunday"
  weekendDays={[0]}
  labelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>
```
![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/6c3591a0-2e52-e6e9-310e-76aab2b9ee41.png)
これだと月内以外の土曜日も青文字になってしまったので、月内の土曜日だけ青文字になるように修正します。
```tsx
<Calendar
  dayStyle={(date, modifiers) => {
    // 土曜日以外、outside（表示月以外の日付）であれば早期リターン
    // 戻り値の型がReact.CSSPropertiesなので{}で返す
    if (date.getDay() !== 6 || modifiers.outside === true) {
      return {}
    }

    return { color: 'blue' }
  }}
  firstDayOfWeek="sunday"
  weekendDays={[0]}
  labelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>
```
![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/42e9dfff-d666-f51b-57c4-9db08d73b706.png) ![step3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/7f4cba16-f1c8-a052-d99a-f4ef22c16112.png)

なんとなく出来たように見えますが、日付を選択したときに文字が青文字のままになってしまうため、土曜日の日付が選択されている場合は白文字になるようにします。
```tsx
<Calendar
  dayStyle={(date, modifiers) => {
    // 土曜日以外、outside（表示月以外の日付）であれば早期リターン
    // 戻り値の型がReact.CSSPropertiesなので{}で返す
    if (date.getDay() !== 6 || modifiers.outside === true) {
      return {}
    }

    // 単純に青(blue)で返すと選択時も青になるため、選択時は白で返す
    const color = modifiers.selected ? 'white' : 'blue'
    return { color }
  }}
  firstDayOfWeek="sunday"
  weekendDays={[0]}
  labelFormat="YYYY年MMM"
  locale="ja"
  value={value}
  onChange={setValue}
/>
```
![step4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/b32f6acb-519e-deee-eb0b-a480f3eb06c7.png)
無事、土曜日が青文字で表示されるようになりました👏
今回はググらず実装してみましたが、もっといい実装方法があれば教えてください🦻

## 参考リンク
- [Calendar | Mantine](https://mantine.dev/dates/calendar/)
- [上記、Modifiers](https://mantine.dev/dates/calendar/#modifiers)

## 最後に
### GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site/?qiita=8afe0f0f476d031f02a6