为FullCalendar的agendaDay视图全天行添加选中高亮类

要实现这个需求，我们可以结合FullCalendar的事件钩子和DOM操作来完成，下面是具体的实现步骤：

1. 定义高亮样式 #

首先在CSS中添加自定义的高亮类，你可以根据自己的设计需求调整样式：

.highlight-allday-row {
  background-color: #e3f2fd; /* 柔和的浅蓝色高亮，可替换成你需要的颜色 */
  transition: background-color 0.2s ease; /* 可选：添加过渡动画让高亮更平滑 */
}

2. 修改FullCalendar初始化代码 #

我们需要利用dayClick事件来处理点击操作，同时加上视图切换时的清除逻辑，避免高亮残留：

$('#calendar').fullCalendar({
  header: {
    left: 'prevYear,prev,today,next,nextYear',
    center: 'title',
    right: 'agendaDay,agendaWeek,month,listMonth'
  },
  defaultView: defaultView,
  navLinks: true,
  eventColor: 'blue',
  allDaySlot: true,
  height: "auto",
  events: [{
    title: 'All Day Event',
    start: '2018-03-01',
    id: 999
  }],
  // 处理日期点击事件
  dayClick: function(date, jsEvent, view) {
    // 先清除所有已有的高亮
    $('.highlight-allday-row').removeClass('highlight-allday-row');
    
    // 仅在agendaDay视图且点击的是全天区域时执行高亮
    if (view.name === 'agendaDay' && date.allDay) {
      // 找到点击位置对应的全天行元素
      const targetRow = $(jsEvent.target).closest('.fc-agenda-allday .fc-row');
      targetRow.addClass('highlight-allday-row');
    }
  },
  // 切换视图时清除高亮，避免状态残留
  viewRender: function(view, element) {
    $('.highlight-allday-row').removeClass('highlight-allday-row');
  },
  // 可选：点击全天事件时也高亮对应行
  eventClick: function(event, jsEvent, view) {
    if (view.name === 'agendaDay' && event.allDay) {
      $('.highlight-allday-row').removeClass('highlight-allday-row');
      const targetRow = $(jsEvent.target).closest('.fc-agenda-allday .fc-row');
      targetRow.addClass('highlight-allday-row');
    }
  }
});

代码说明 #

• dayClick事件中，我们通过view.name判断当前是否在日视图，date.allDay确认点击的是全天区域，然后用closest()定位到对应的行元素添加高亮类。
• viewRender事件用于切换视图时清除所有高亮，保证视图切换后状态干净。
• 可选的eventClick处理，是为了让用户点击全天事件时也能触发行高亮，提升交互一致性。

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