torutkのブログ

ソフトウェア・エンジニアのブログ

JavaFXでカレンダー表示プログラムを作る(DatePickerのポップアップ利用)(続々々々)

JavaFXでカレンダー表示プログラムを作る(DatePickerのポップアップ利用)(続々々) - torutkのブログ の続きです。

積み残した色設定である、曜日によって色を変えるに取り組みました。

CSSの定義には、曜日ごとのセレクターはないので、CSSだけでは曜日ごとに色を変えることができません。
そこで、Javaプログラム側で、日付のセルに曜日に応じたCSSスタイルクラスを設定します。そして、CSS定義で曜日に対応したCSSセレクターで色を付けるようにしました。

Javaプログラム側で日付セルにCSSスタイルクラスを設定

Nodeクラスには、setStyleClassメソッドでスタイルクラスを設定することができます。
DatePickerのsetDayCellFactoryメソッドに日付セルを生成するファクトリを登録することができるので、ファクトリに曜日に応じたスタイルクラスを追加することでCSS定義で曜日ごとに色を付けることができるようになります。

        DatePicker datePicker = new DatePicker(LocalDate.now());   // (1)
        datePicker.setDayCellFactory(picker -> new DateCell() {    // (2)
            @Override
            public void updateItem(LocalDate item, boolean empty) {  // (3)
                super.updateItem(item, empty);
                getStyleClass().add(DayOfWeek.from(item).getDisplayName(TextStyle.FULL, Locale.US).toLowerCase());
            }
        });
  • (1) まず、DatePickerインスタンスを生成します。
  • (2) DatePickerのsetDayCellFactoryメソッドにファクトリのインスタンスを設定します。型は、javafx.util.Callback です。これは@FunctionalInterfaceなので、ラムダ式で定義することができます。ラムダ式は引数にDatePicker型を取り、戻り値にDateCell型を返します。
  • (3) DateCell型のupdateItemをオーバーライドし、引数に渡される日付から曜日を取得し、曜日に対応したCSSのスタイルクラスを追加します。

CSS側で曜日による色の設定

CSSの定義に追加します。

/* 土曜日の文字色の設定 */
.date-picker-popup > * > .day-cell.saturday {
    -fx-text-fill: dodgerblue;
}
/* 日曜日の文字色の設定 */
.date-picker-popup > * > .day-cell.sunday {
    -fx-text-fill: mediumvioletred;
}

実行すると次の画面のように曜日で色を変えることができました。


ここまでのプログラム

ここまでのプログラムは次にあります。

https://github.com/torutk/calendar/tree/v0.1.4