Missing support for applying specific CSS styles to dates that match a specific given set of dates.
The styling logic is simple but I did not find a workaround for this specific component to apply a certain styling logic like the one present in react-calendar or react-date-picker for the property tileClassName.
Here would be an example: highlighted-date is a simple CSS class
.highlighted-date {
background-color: #38a169 !important;
color: white !important;
border-radius: 20% !important;
opacity: 70% !important;
padding: 6px !important;
}
Here is the matching and styling logic:
const tileClassName = ({ date }: { date: Date }): string => {
if (highlightedDates && Array.isArray(highlightedDates)) {
if (
highlightedDates.some(
(highlighted) =>
highlighted && date.toDateString() === highlighted.toDateString()
)
) {
return "highlighted-date";
}
}
return "";
};
Missing support for applying specific CSS styles to dates that match a specific given set of dates.
The styling logic is simple but I did not find a workaround for this specific component to apply a certain styling logic like the one present in react-calendar or react-date-picker for the property tileClassName.
Here would be an example: highlighted-date is a simple CSS class .highlighted-date { background-color: #38a169 !important; color: white !important; border-radius: 20% !important; opacity: 70% !important; padding: 6px !important; }
Here is the matching and styling logic:
const tileClassName = ({ date }: { date: Date }): string => { if (highlightedDates && Array.isArray(highlightedDates)) { if ( highlightedDates.some( (highlighted) => highlighted && date.toDateString() === highlighted.toDateString() ) ) { return "highlighted-date"; } } return ""; };
Usage within the component:
return ( <DatePicker onChange={handleDateChange} value={value} // closeCalendar={false} // shouldCloseCalendar={false} tileClassName={tileClassName} /> );