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

Thankyou everyone for kind responses.

As @ADyson pointed out it was my css messing with fullcalendar css.

I had following in my css:

html,
body,
div {
  position: relative;
}

It caused fc-bg-event class to inherit height of its parent class whose value was 0px, which made it look like there was no color in the background.

Everything worked out fine after I removed div from above code.