Change background color FullCalender react

user_14072378 0
Viewed 795

I am using FullCalender in react to show a calendar that displays events. At the moment I am using a day grid and I was wondering how I could change the background colour of the grid.

today's date background color is always yellow

This is how it looks on other days

What I want to do is change the background color so that the current day grid has a white background like the rest of the days

    <div>
    <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="timeGridDay"
        nowIndicator={true}
        selectable
        selectOverlap={() => {
          return false;
        }}
        eventResizableFromStart
        droppable
        allDayMaintainDuration
      />
    </div>
fullcalendar-5 reactjs fullcalendar css html
1 Answers

There's no option for this in the API but if you explore the rendered calendar with your browser's element inspector you can see that the colour is set using a simple CSS class - the current day has the class fc-day-today set on it.

Therefore if we just set a rule to override the fullCalendar one, we can change the background colour to whatever we want:

.fc-day-today {
  background-color: #ffffff !important;
}

Demo: https://codepen.io/ADyson82/pen/jOBXmqy

user_59470430
Related