Change fc-today background color-CodePudding

I've only found dated responses for this question. I'm trying to change the highlighted background for today. I have the <FullCalendar> component 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>

I'm able to manually change the color by toggling the css line item

But the sx isn't overriding it:

sx={{
    "& .fc-today": {
        backgroundColor: `${colors.redAccent[500]} !important`
    }
}}

CodePudding user response：

It seems that FullCalendar accepts a CSS variable --fc-today-bg-color for customizing background color of "today", according to their customization guide.

If the preference is to use a custom color defined with MUI, perhaps try set the CSS variable with a sx prop on the MUI Box containing FullCalendar.

Minimized live example: stackblitz

Example:

<Box sx={{ ["--fc-today-bg-color"]: pink[500] }}>
  <FullCalendar />
</Box>

Setting this by sx prop on FullCalendar itself could also work if the component has already been wired up with MUI by its styled() utility.