JavaFx DatePicker Farbe einzelne Zelle

Question

Guten Abend alle, Ich möchte die Farbe einer speziellen Zelle im DatePicker von JavaFX ändern. Mein Ziel ist es, die Farbe der Zelle zu ändern: 30. Jan. 2017.

Ich lerne immer noch, wie man JavaFX verwendet, also seien Sie bitte nachsichtig.

Mit freundlichen Grüßen Christian Taeumel

Answer 1

Verwenden Sie ein DateCellFactory:

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.stage.Stage; 
import javafx.util.Callback; 

import java.time.LocalDate; 
import java.time.MonthDay; 

public class ColoredPick extends Application { 
    @Override 
    public void start(Stage stage) throws Exception { 
     final Callback<DatePicker, DateCell> dayCellFactory = new Callback<DatePicker, DateCell>() { 
      public DateCell call(final DatePicker datePicker) { 
       return new DateCell() { 
        @Override public void updateItem(LocalDate item, boolean empty) { 
         super.updateItem(item, empty); 

         if (MonthDay.from(item).equals(MonthDay.of(3, 15)) && 
          !(getStyleClass().contains("next-month") || getStyleClass().contains("previous-month")) 
          ) { 
          setTooltip(new Tooltip("Beware the Ides of March!")); 
          setStyle("-fx-background-color: #ff4444;"); 
         } else { 
          setTooltip(null); 
          setStyle(null); 
         } 
        } 
       }; 
      } 
     }; 

     DatePicker picker = new DatePicker(); 
     picker.setDayCellFactory(dayCellFactory); 

     stage.setScene(new Scene(picker)); 
     stage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

---

Während die einfache Einstellung Hintergrund-Stil in Code über fein in den meisten Fällen funktioniert demonstriert, wäre es Wahrscheinlich am besten zum Hinzufügen und Entfernen von Stilklassen, wie in der Update-Methode geeignet, und nicht direkt einfach Stile setzen (damit die Stile in CSS angepasst werden können). Dies würde es einfacher machen, den Stil verschiedener möglicher Zustände der Zelle (z. B. ausgewählt oder fokussiert usw.) anzupassen.

Voll CSS-Regeln für die Anpassung der verschiedenen Zell pseudo-Zustände (zB: ausgewählt,: schweben: konzentriert, etc.) kann in modena.css gefunden werden, die in Ihrer JavaFX Verteilung aufgenommen werden (für JavaFX 8 ist innerhalb jfxrt.jar). Eine Auswahl aus einer Java 9-Distribution wird unten gezeigt. Wie Sie ganz da ist ein bisschen individuell gestaltet werden sehen können, können Sie in CSS tun und die mögliche Kombination von verschiedenen Zuständen kann es richtig ein wenig schwierig machen, alle von ihnen anpassen:

.date-picker-popup > * > .date-cell { 
    -fx-background-color: transparent; 
    -fx-background-insets: 1, 2; 
    -fx-padding: 0; 
    -fx-alignment: BASELINE_CENTER; 
    -fx-opacity: 1.0; 
} 
.date-picker-popup > * > .day-name-cell, 
.date-picker-popup > * > .week-number-cell { 
    -fx-font-size: 0.916667em; 
} 
.date-picker-popup > * > .week-number-cell { 
    -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */ 
    -fx-border-color: -fx-control-inner-background; 
    -fx-border-width: 1px; 
    -fx-background: -fx-control-inner-background; 
    -fx-background-color: -fx-background; 
    -fx-text-fill: -fx-accent; 
} 
.date-picker-popup > * > .day-cell { 
    -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */ 
    -fx-border-color: derive(-fx-selection-bar-non-focused, 60%); 
    -fx-border-width: 1px; 
    -fx-font-size: 1em; 
    -fx-background: -fx-control-inner-background; 
    -fx-background-color: -fx-background; 
    -fx-text-fill: -fx-text-background-color; 
} 
.date-picker-popup > * > .hijrah-day-cell { 
    -fx-alignment: TOP_LEFT; 
    -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */ 
    -fx-cell-size: 2.75em; 
} 
.date-picker-popup > * > .day-cell > .secondary-text { 
    -fx-fill: #f3622d; 
} 
.date-picker-popup > * > .today { 
    -fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background; 
    -fx-background-insets: 1, 2, 3; 
} 
.date-picker-popup > * > .day-cell:hover, 
.date-picker-popup > * > .selected, 
.date-picker-popup > * > .previous-month.selected, 
.date-picker-popup > * > .next-month.selected { 
    -fx-background: -fx-selection-bar; 
} 
.date-picker-popup > * > .previous-month:hover, 
.date-picker-popup > * > .next-month:hover { 
    -fx-background: -fx-selection-bar-non-focused; 
} 
.date-picker-popup > * > .today:hover, 
.date-picker-popup > * > .today.selected { 
    -fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar; 
} 
.date-picker-popup > * > .day-cell:focused, 
.date-picker-popup > * > .today:focused { 
    -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background; 
    -fx-background-insets: 1, 2, 3; 
} 
.date-picker-popup > * > .day-cell:focused:hover, 
.date-picker-popup > * > .today:focused:hover, 
.date-picker-popup > * > .selected:focused, 
.date-picker-popup > * > .today.selected:focused { 
    -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar; 
} 
.date-picker-popup > * > .previous-month, 
.date-picker-popup > * > .next-month { 
    -fx-background: derive(-fx-control-inner-background, -4%); 
} 
.date-picker-popup > * > .day-cell:hover > .secondary-text, 
.date-picker-popup > * > .previous-month > .secondary-text, 
.date-picker-popup > * > .next-month > .secondary-text, 
.date-picker-popup > * > .selected > .secondary-text { 
    -fx-fill: -fx-text-background-color; 
} 
.date-picker-popup > * > .previous-month.today, 
.date-picker-popup > * > .next-month.today { 
    -fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%); 
} 

.date-picker-popup > * > .previous-month.today:hover, 
.date-picker-popup > * > .next-month.today:hover { 
    -fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused; 
}