FullCalendar v4如何实现仅高亮最后点击的日期背景色？

这个需求很常见！你当前的代码会给每一个点击过的日期都加上背景色，要实现「只保留最后一次点击的日期样式」，核心思路就是每次点击新日期时，先清除之前所有被选中日期的样式，再给当前日期设置样式。下面给你两种实用的实现方案，你可以根据自己的开发习惯选择：

方案1：记录上次选中的元素（简洁高效） #

我们可以在组件里维护一个变量，专门存储上一次被点击的日期元素，每次点击时先重置它的样式，再处理当前元素：

// 先在组件的实例/状态里定义一个变量（类组件用this存储，函数组件用useRef）
let lastClickedDayEl = null;

// 修改你的日期点击事件：
calendardateClick = (info) => {
    // 1. 先清除上次点击日期的背景色
    if (lastClickedDayEl) {
        lastClickedDayEl.style.backgroundColor = ''; // 还原为日历默认样式
    }
    // 2. 给当前点击的日期设置新背景色
    info.dayEl.style.backgroundColor = '#CAFFDC';
    // 3. 更新记录的上次点击元素
    lastClickedDayEl = info.dayEl;
}

方案2：使用CSS类名（更规范，便于维护） #

直接操作内联样式虽然简单，但如果后续要修改样式或者扩展功能，用CSS类会更灵活。步骤如下：

1. 先定义一个专门的选中样式类：

.selected-calendar-day {
    background-color: #CAFFDC !important; /* 加!important是为了覆盖FullCalendar的默认样式优先级 */
}

2. 修改点击事件，先移除所有日期元素的选中类，再给当前元素添加：

calendardateClick = (info) => {
    // 1. 移除所有已选中日期的样式类
    document.querySelectorAll('.selected-calendar-day').forEach(el => {
        el.classList.remove('selected-calendar-day');
    });
    // 2. 给当前点击的日期添加选中类
    info.dayEl.classList.add('selected-calendar-day');
}

小提示： #

• 如果你用的是类组件，lastClickedDayEl可以存在this上（比如this.lastClickedDayEl）；如果是函数组件，推荐用useRef来存储这个变量，避免组件渲染时重置。
• 方案2里的选择器可以根据你的日历视图调整得更精准，比如针对月视图的日期可以用.fc-daygrid-day-frame，时间网格视图用.fc-timeGrid-slot，这样元素查找效率会更高。

内容的提问来源于stack exchange，提问作者molinet