javascript - 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.

Answer 1

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",
    },
  ]}
/>