如何在Javascript事件日历（FullCalendar）中选中当前日期？

嘿，我来帮你搞定这个问题！在FullCalendar里选中当前日期其实挺简单的，主要用到它的内置API和配置项，下面分几种场景给你详细说明：

基础前提：开启日期选中功能 #

首先你得确保日历配置里打开了selectable: true，这是允许选中日期的基础开关，不然后续操作都无效：

const calendar = new FullCalendar.Calendar(document.getElementById('your-calendar-id'), {
  selectable: true, // 必须开启这个
  // 其他配置：比如initialView、headerToolbar等
});
calendar.render();

场景1：通过按钮触发选中当前日期 #

如果你想做一个自定义的「选中今天」按钮，或者给默认的「今天」按钮增加选中功能，可以这么写：

方式A：自定义按钮 #

直接在日历的工具栏里加一个自定义按钮，点击时同时切换到今天视图并选中日期：

const calendar = new FullCalendar.Calendar(document.getElementById('your-calendar-id'), {
  selectable: true,
  headerToolbar: {
    left: 'prev,next customToday', // 替换默认的today为自定义按钮
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  customButtons: {
    customToday: {
      text: '选中今天',
      click: function() {
        const today = new Date();
        calendar.today(); // 先切换到今天的视图位置
        calendar.select(today, today); // 再选中今天的日期
      }
    }
  },
  // 可选：监听选中事件，做后续处理（比如打印日志、加样式）
  select: function(info) {
    console.log('已选中日期:', info.startStr);
    // 给选中的日期单元格加自定义样式
    const dateCell = document.querySelector(`[data-date="${info.startStr}"]`);
    if (dateCell) {
      dateCell.classList.add('selected-date');
    }
  }
});
calendar.render();

方式B：修改默认「今天」按钮的行为 #

如果你不想新增按钮，只想让默认的「今天」按钮点击后自动选中日期，可以重写它的点击逻辑：

// 初始化日历后，找到默认的today按钮并绑定点击事件
document.querySelector('.fc-today-button').addEventListener('click', function() {
  setTimeout(() => { // 加个延迟，确保视图切换完成
    const today = new Date();
    calendar.select(today, today);
  }, 100);
});

场景2：初始化日历时自动选中当前日期 #

如果希望页面加载完成后，日历自动选中今天的日期，可以利用datesRender事件（视图渲染完成时触发）：

const calendar = new FullCalendar.Calendar(document.getElementById('your-calendar-id'), {
  selectable: true,
  datesRender: function(info) {
    const today = new Date();
    calendar.select(today, today);
  },
  select: function(info) {
    // 这里可以处理选中后的逻辑
  }
});
calendar.render();

可选：自定义选中日期的样式 #

FullCalendar默认的选中样式可能不够显眼，你可以自己写CSS来美化：

/* 自定义选中日期的样式 */
.selected-date {
  background-color: #2196F3 !important;
  color: white !important;
  border-radius: 50%;
  font-weight: bold;
}

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