Changing background colour of clicked date (Fullcalendar) React + Typescript

Question

I am using Fullcalendar and trying to change colour of selected date.

How I intend to do it:

setState selected date.
pass it as props to events object of fullcalendar.
Change color of selected date cell by setting Event Object’s display background property.

I am able to get the required result except for the background color part.

Here is the link to calendar

As you can see, there is a little check on date you have clicked.

What I want to do is to change the background colour of that cell.

Pretty much shown here on the right side demo

Here is the code for fullcalendar:-

<FullCalendar
  timeZone="Asia/Tokyo"
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: "prev",
    center: "title",
    right: "next",
  }}
  height="100%"
  locale="ja"
  aspectRatio={0.7}
  dateClick={(dateArg: DateClickArg) => {
    this.props.dateSelect(dateArg.date);
  }}
  longPressDelay={1}
  dayCellContent={function (arg: DayCellContentArg) {
    return arg.date.getDate().toString();
  }}
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      borderColor: "white",
      backgroundColor: "pink",
      display: "background",
    },
  ]}
  editable={false} 
  selectable={true} 
/>

Any help will be appreciated.

In your event you can give color option also you can use eventClick to detect event on events it returns current event and its element you can make changes on it accordingly — Vikas Kandari
If you use the "select" feature instead of dateClick then it automatically puts a background on the selected area. See fullcalendar.io/docs/date-clicking-selecting — ADyson
@ADyson, thankyou for reply. I had working version of what you said and selected date's background color would be set by setting css for --fc-highlight-color. But for some reason, background property stopped working.(most probably after i set height to 100%) Also, selected date needs to be highlighted on page render which does not happen by select feature. — Talib Khurshid
"selected date needs to be highlighted on page render"...surely at the point the page is rendered, no-one has selected a date yet? Have I misunderstood? And I'm not sure how setting the height could affect the background colour of a selection...are you certain that's the issue? Did you remove the height again to test it? — ADyson
@ADyson, Yes i tried to remove height but no luck. The problem started when i tried to change the layout of the page. Thankyou again for your reply. — Talib Khurshid

Vikas Kandari Vikas Kandari · Accepted Answer · 2021-01-13T18:10:20

To change Event Color just simply supply color option in event object

<FullCalendar
  timeZone="Asia/Tokyo"
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: "prev",
    center: "title",
    right: "next",
  }}
  height="100%"
  locale="ja"
  aspectRatio={0.7}
  dateClick={(dateArg: DateClickArg) => {
    this.props.dateSelect(dateArg.date);
  }}
  longPressDelay={1}
  dayCellContent={function (arg: DayCellContentArg) {
    return arg.date.getDate().toString();
  }}
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",
    },
  ]}
  editable={false} 
  selectable={true} 
/>

example event object below

events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",//This will set the color
    }
]}

this will change background color of event you don't ned special CSS or anything

Still if you programmatically want to change the background color of event then bind a event handler on each event by using eventDidMount callback, this function will be fired after appending each event element so you can simply change event css or element programmatically.

<FullCalendar
  eventDidMount={(dateArg: DateClickArg) => {
     console.log(dateArg.el); //this will return event element
  }},
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",
    },
  ]}
/>

Changing background colour of clicked date (Fullcalendar) React + Typescript

2 Answers