Calendar: disable date selected Highligth

[YoanRoullard]

Hello

I would like to know if there is any option do prevent a cell item in the calendar to be highlighted when selected ?

I am aware of the itemActiveBg design token. As a workaround, I can make the itemActive bg the same color as my general background (white) but the current selected day number (or month name) in the cell header still highlighted in blue.

Is it possible to not have this behavior without overriding fullCellRender or headerRender ?

[petercat-assistant[bot]]

To prevent a cell item in the Ant Design calendar from being highlighted when selected, without overriding fullCellRender or headerRender, you can use CSS to customize the appearance. Here's a possible solution:

1. CSS Customization: You can target the specific CSS classes used by Ant Design for the calendar component and override the styles. For example, you can set the color of the selected day number or month name to match the background color.

Here's a basic example of how you might achieve this with CSS:

/* Override the selected date style */
.ant-picker-cell-selected .ant-picker-cell-inner {
    background-color: transparent !important;
    color: inherit !important;
}

/* Override the selected month name style */
.ant-picker-header-view .ant-picker-cell-selected {
    background-color: transparent !important;
    color: inherit !important;
}

This CSS will make the selected date and month name appear as if they are not highlighted by setting their background and text color to be transparent or inherit from the parent.

Please note that these class names (.ant-picker-cell-selected, .ant-picker-cell-inner, etc.) are based on Ant Design's internal implementation and may change in future updates. It's always a good idea to check the current class names in your specific version of Ant Design.

If this solution doesn't fully meet your needs or if you have further questions, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.