FullCalendar v4 更改所选日期的颜色答案

【问题标题】：FullCalendar v4 change color of selected dateFullCalendar v4 更改所选日期的颜色
【发布时间】：2019-12-19 14:13:29
【问题描述】：

我正在尝试更改点击日期的背景颜色并且它正在工作，但现在我需要管理唯一具有新背景颜色的背景颜色是我最后一次点击的日期。

有办法控制吗？

日期点击事件

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

日历映射器

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
    }

【问题讨论】：

你能过日子吗"selectable"？您还可以自定义选择背景颜色。

标签： javascript css fullcalendar fullcalendar-4

【解决方案1】：

不要直接设置样式，而是给每个点击日期一个类（其规则是设置背景颜色）。然后，当点击另一个元素时，您可以简单地使用document.querySelectorAll 查找具有该类的所有元素，并从所有元素中删除该类，然后再将其添加到新元素中。

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");

演示：

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

【讨论】：