FullCalendar v4 change color of selected date

Question

I'm trying to change the background-color of a clicked date and it's working but now I need to manage that the only one with new background-color is the last I clicked.

Is there a way to control this?

Date click event

calendardateClick = (info) => {
    info.dayEl.style.backgroundColor = '#CAFFDC';
}

Calendar mapper

let calendar_mapper = {
        plugins : ['dayGrid','timeGrid','list','interaction'],
        header : {
            left : 'prev,next today',
            center : 'title',
            right : 'timeGridWeek, dayGridMonth, timeGridDay'
        },
        editable : false,
        allDaySlot : false,
        events : this.eventLIST,
        dateClick : this.calendardateClick
    }

Answer 1

Instead of setting the style directly, give each clicked date a class (whose rule is to set the background colour). Then, when another one is clicked, you can simply use document.querySelectorAll to find all elements with that class, and remove that class from all of them, before adding it to the new one.

CSS:

.selectedDate
{
  background-color: #CAFFDC !important;
}

JavaScript:

  var days = document.querySelectorAll(".selectedDate");
  days.forEach(function(day) {
    day.classList.remove("selectedDate");
  });
  info.dayEl.classList.add("selectedDate");

Demo:

https://codepen.io/ADyson82/pen/MWYpKeE