はじめに
DateTimePicker のカレンダー表示はユーザーが日付を選ぶ重要な UI です。
標準でも使いやすいですが、業務アプリなどでは
フォントや色を変更して視認性を上げたい
というニーズがとても多いです。
この記事では、カレンダーの見た目に関係する以下のプロパティをまとめて解説します：
- CalendarFont
- CalendarForeColor
- CalendarMonthBackground
- CalendarTitleBackColor / CalendarTitleForeColor
- CalendarTrailingForeColor
💡 これらのプロパティはすべて
「ドロップダウンで開いたカレンダー部分」の見た目を変更するものです。
「ドロップダウンで開いたカレンダー部分」の見た目を変更するものです。
CalendarFont（カレンダーフォント）
カレンダー内の日付部分のフォントを変更するプロパティです。
| プロパティ | CalendarFont |
|---|---|
| 型 | Font |
| 対象 | カレンダーに表示される文字（数字・曜日など） |
例：フォントとサイズを変更する
dateTimePicker1.CalendarFont = new Font("Yu Gothic UI", 12);
視認性を上げたい、テーマに統一したい場合によく使われます。
✔ CalendarFont は ドロップダウン表示のときにのみ適用されます
（DateTimePicker 本体のフォントは
（DateTimePicker 本体のフォントは
Font プロパティ）
CalendarForeColor（文字色）
カレンダーの通常日付の文字色を変更します。
| 型 | Color |
|---|---|
| 対象 | 日付数字の通常色 |
例：文字色を濃いブルーにする
dateTimePicker1.CalendarForeColor = Color.DarkBlue;
CalendarMonthBackground（月表示の背景色）
カレンダー部分の「日付が並ぶ領域」の背景色を変更します。
| 型 | Color |
|---|---|
| 対象 | カレンダーの主背景（白い部分） |
例：淡いクリーム色に変更
dateTimePicker1.CalendarMonthBackground = Color.LemonChiffon;
CalendarTitleBackColor / CalendarTitleForeColor
カレンダー上部の「月名・年数」が表示されている帯の色を変更できます。
CalendarTitleBackColor
| 型 | Color |
|---|---|
| 対象 | タイトル部分（例えば “2025年 11月”）の背景色 |
CalendarTitleForeColor
| 型 | Color |
|---|---|
| 対象 | タイトル部分の文字色 |
例：タイトル部分を青基調にカスタム
dateTimePicker1.CalendarTitleBackColor = Color.SteelBlue;
dateTimePicker1.CalendarTitleForeColor = Color.White;
CalendarTrailingForeColor（前後月の数字の文字色）
カレンダーの枠には、前月・次月の日付が薄く表示されることがあります。
その文字色を変更できるのがこのプロパティです。
| 型 | Color |
|---|---|
| 対象 | 「前後月の日付（薄い数字）」の文字色 |
例：前後月の数字をグレーに調整
dateTimePicker1.CalendarTrailingForeColor = Color.LightGray;
UI にメリハリをつけたいときに役立ちます。
一括でカレンダーのデザインを整える例
dateTimePicker1.CalendarFont =
new Font("Yu Gothic UI", 11, FontStyle.Regular);
dateTimePicker1.CalendarForeColor = Color.Black;
dateTimePicker1.CalendarMonthBackground = Color.WhiteSmoke;
dateTimePicker1.CalendarTitleBackColor = Color.SteelBlue;
dateTimePicker1.CalendarTitleForeColor = Color.White;
dateTimePicker1.CalendarTrailingForeColor = Color.Gray;
このようにすると、落ち着いた業務システム風のカレンダーになります。
💡 カレンダーのテーマを統一しておくと、
ユーザーが「どこを見ればいいか」が直感的に理解でき、
UI の使いやすさが大きく向上します。
ユーザーが「どこを見ればいいか」が直感的に理解でき、
UI の使いやすさが大きく向上します。
注意点・ハマりやすいポイント
- 変更が反映されるのはカレンダー表示部分のみ
→ DateTimePicker 本体は別のプロパティ（Font / ForeColor / BackColor）で変更 - カレンダーは OS テーマの影響を受けることがある
→ 特に Windows のテーマ設定に左右される場合がある - 高コントラスト環境では期待通りにならない場合がある
→ 色覚サポート環境に応じたデザインも検証が必要 - フォントサイズを大きくしすぎると日付が見切れる
→ 適切なサイズを選ぶのが重要
まとめ
- DateTimePicker のカレンダー部分は細かい色・フォント調整が可能。
- CalendarFont でフォントを変更。
- CalendarForeColor / MonthBackground で基本的な色を調整。
- CalendarTitleBackColor / ForeColor で上部タイトルをカスタム。
- TrailingForeColor で前後月の日付を調整。
- テーマの調整はユーザーの視認性向上に大きく貢献する。
アプリのテーマに合わせた美しいカレンダーに仕上げることで、
ユーザーが迷わず操作できる直感的な UI を作れます。
ぜひこれらのプロパティを活用してみてくださいね。
Please follow and like us:
コメント