Searching for a current solution to this issue has been challenging. Today, I am attempting to modify the highlighted background in my project. My code includes the <FullCalendar> component nested inside <Box>:
<Box flex={"1 1 100%"} ml={"15px"}>
<FullCalendar
height={"75vh"}
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin
]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
}}
initialView={"dayGridMonth"}
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
eventsSet={(events) => setCurrentEvents(events)}
initialEvents={[
{
id: "aapl_q1_2023",
title: "AAPL Q1 2023",
date: "2023-02-02"
},
{
id: "amzn_q4_2023",
title: "AMZN Q4 2023",
date: "2023-02-02"
},
]}
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
/>
</Box>
When it comes to changing the color manually, I can accomplish that by adjusting the specific css line item.
However, utilizing the sx property doesn't seem to be overriding it as expected:
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}