Full calendar V4 - on click of an event, how to change the color of the date(s)

Question

I am using monthly view. I show all dates and I want to tag each day as 'working day', 'overtime day', 'holiday' etc.

I made each of the tags above as events and it is showing up fine. My next goal is to select a date and apply leave. When I click on a day, it triggers dateClick and I change the background color to be green. If I select the same date again, I change the background color back to white. This gives a feel that user selects/unselects a date. Multiple dates can be selected like this, colors will turn green and I maintain a list of selected dates.

if (info.dayEl.style.backgroundColor == 'green') {
    info.dayEl.style.backgroundColor = 'white';
  } else {
    info.dayEl.style.backgroundColor = 'green';
  }

Problem: When I click on events in a day (like overtime etc), I am unable to change the background color of the whole cell for that day.

When a event is clicked, eventClick gets triggered and from within that function I tried triggering the 'select' by doing

this.fullCalendarMonthly.getCalendar().select(info.event.start);

but it does not come with any html elements and styles.

Any other way to achieve this?

Answer 1

On event click, I looped through using css classes to get it done.

var week = info.el.closest(".fc-content-skeleton").closest(".fc-week");
var days = week.querySelectorAll(".fc-day");
days.forEach(day => {
  if (day.attributes["data-date"].value == currentDate) {
      day.style.backgroundColor = '#123';
  }
});