JavaFX JFXDatePicker set color for specific dates

Question

I am able to change the color of a JFXDatePicker from the JFoenix library for certain dates via the code below.

        final Callback<DatePicker, DateCell> dayCellFactory = new Callback<DatePicker, DateCell>() {
        @Override
        public DateCell call(final DatePicker datePicker) {
            return new DateCell() {
                @Override
                public void updateItem(LocalDate item, boolean empty) {
                    super.updateItem(item, empty);
                    if(!empty) {
                        if(listRegisteredTOTDays.contains(item)) {
                            setStyle("-fx-background-color: #99e699;");
                        }
                    }                    
                } 
            };
        }   
    };

The problem occurs when I have hovered over the item with a changed background. It changes the background colour to the default one after hovering and not the set one via de code above. I do not want to disable the cell as the user still must be able to click on it! The exercise is to inform the user which dates already has data. So nothing can be disabled. How to overcome this? I just want after hovering it gets back the color set as above.

Before hovering:

and after hovering

score 2 · Accepted Answer · answered Mar 02 '18 at 12:16

While JFXDatePicker looks beautiful, it takes some liberties that make DateCells hard to customize. Instead of using CSS to style the cells it sets the background from code which has a higher precedence than any CSS, even inline CSS styles.

You can see this in the createDayCells() method of com.jfoenix.skins.JFXDatePickerContent.

This means without modifying the skins your only chance of fixing this is to add your own event handler and use Platform.runLater to ensure it runs after the event handler added in createDayCells():

final Background markedBackground = new Background(new BackgroundFill(Color.rgb(0x99, 0xE6, 0x99),
        CornerRadii.EMPTY,
        Insets.EMPTY));

picker.setDayCellFactory(dp -> new DateCell() {

    {
        addEventHandler(MouseEvent.MOUSE_EXITED, evt -> {
            if (listRegisteredTOTDays.contains(getItem())) {
                // override background property of marked cells after
                // JFXDatePicker modifies it
                Platform.runLater(() -> {
                    setBackground(markedBackground);
                });
            }
        });
    }

    @Override
    public void updateItem(LocalDate item, boolean empty) {
        super.updateItem(item, empty);

        if (!empty && listRegisteredTOTDays.contains(item)) {
            setBackground(markedBackground);
        }
    }
});

JavaFX JFXDatePicker set color for specific dates

1 Answers1