React Full Calendar selected date colour isn't changing

enter image description here

I am using react-full-calendar in my project where the selected date color isn’t changing though current date color css is working. I want the bg colour blue when I am selecting a new date.

const handleDateClick = (info: any) => {
    const nowDate = new Date();
    const combinedDate = setMilliseconds(
      setSeconds(
        setMinutes(
          setHours(info.date, nowDate.getHours()),
          nowDate.getMinutes()
        ),
        nowDate.getSeconds()
      ),
      nowDate.getMilliseconds()
    );
    const formattedDate = format(combinedDate, "yyyy-MM-dd HH:mm:ss.SSS");
    setSelectedDate(formattedDate);
  };

<div className=" monthView">
    <FullCalendar
      plugins={[monthGridPlugin, interactionPlugin]}
      initialView='dayGridMonth'
      weekends={true}
      headerToolbar={{
        left: "",
        center: "prev,title,next",
        right: "",
      }}
      selectable={true}
      dateClick={handleDateClick}
    />
</div>

CSS for today date. I added CSS for selected date also using fc.highlight but isn’t working.

.monthView .fc .fc-daygrid-day.fc-day-today a {
  background: rgba(99, 102, 241, 1) !important;
  color: white !important;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

I am expecting colour change to my selected date.

You need to sign in to view this answers

Related Post