I'm using react big calendar and need to change the color of the text for dark mode. The background color changes of the calendar changes, however the text color of date doesn't change. How to make it work?
const calendarStyle = () => {
return {
style: {
backgroundColor: 'red', //this works
color: 'green' //but why doesn't this work?
}
}
}
<Calendar
localizer={localizer}
events={eventsData}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
views={{ month: true }}
step={155}
dayPropGetter={calendarStyle}
/>
Moreover how to change the color of the headers like sun, mon etc and back, next button as well.
You can change them via passing components with the components prop of the react-big-calendar. For example:
<Calendar
className={classes.calendar}
localizer={localizer}
events={events}
startAccessor="start"
endAccessor="end"
dayPropGetter={getDayProps}
eventPropGetter={getEventProps}
components={{
event: CalendarEvent,
month: {
header: HeaderCellContent,
dateHeader: DateCellContent,
},
}}
/>
Example of the HeaderCellContent
component:
const HeaderCellContent: React.FC<any> = (props: any) => {
const { date } = props;
const classes = useStyles();
const dayOfWeek = date.getDay();
const className = dayOfWeek === 0 || dayOfWeek === 6 ? classes.day_weekend : classes.day_working;
return (
<Box component="span" className={className}>
{props.label}
</Box>
);
};
With the className
or style
props in the example above you can pass your own styles to the content of each header cells, and dateHeader
is for customizing the content of the calendar days.
I couldn't find much info about components prop but since I'm using typescript I found the details through inspecting the types file, I'm including the link below.
References:
components
propIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With