CODEWITHSUNDEEP
javascriptcssfullcalendarfullcalendar-4
molinet
molinet

Reputation: 276

FullCalendar v4 change color of selected date

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
    }

Upvotes: 0

Views: 1237

Answers (1)

ADyson
ADyson

Reputation: 61849

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

Upvotes: 3

Related Questions