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
Leave feedback about this