FullCalendar垂直资源周视图如何实现日期边框突出显示

CSS方案（无需脚本，兼容性要求较高） #

利用相邻兄弟属性选择器直接匹配日期切换位置的单元格，不需要额外JS逻辑：

/* 为新日期的第一个单元格设置左侧粗边框（实现日期分隔效果） */
.fc-day[data-date] + .fc-day:not([data-date=""]) {
  border-left: 2px solid #333 !important;
}

/* 若需单独为每日最后一个单元格设置样式，可使用:has选择器（Chrome 105+、Safari 15.4+支持） */
.fc-day[data-date]:has(+ .fc-day:not([data-date=""])) {
  border-right: 2px solid #333 !important;
}

注：:has 选择器在低版本浏览器不生效，如果需要兼容旧版本浏览器建议使用JS方案。

JS方案（全版本兼容，灵活度更高） #

利用FullCalendar的渲染完成钩子，遍历单元格为同日期的首尾单元格添加自定义类，再通过CSS设置样式：

1. FullCalendar配置中添加渲染钩子 #

const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  // 你的原有配置
  datesSet: handleCalendarRender, // v5/v6版本使用datesSet钩子，v4及更早用eventAfterAllRender
  viewSkeletonRender: handleCalendarRender // 兼容视图切换场景
})

function handleCalendarRender() {
  // 先清除之前添加的自定义类，避免重复添加
  document.querySelectorAll('.fc-date-first-cell, .fc-date-last-cell').forEach(el => {
    el.classList.remove('fc-date-first-cell', 'fc-date-last-cell')
  })

  // 遍历日历所有行
  document.querySelectorAll('.fc-resource-timeline tr, .fc-timegrid tr').forEach(row => {
    const dateCells = row.querySelectorAll('.fc-day[data-date]')
    if(dateCells.length < 1) return

    let lastDate = dateCells[0].dataset.date
    dateCells[0].classList.add('fc-date-first-cell')

    for(let i = 1; i < dateCells.length; i++) {
      const currentDate = dateCells[i].dataset.date
      if(currentDate !== lastDate) {
        dateCells[i-1].classList.add('fc-date-last-cell')
        dateCells[i].classList.add('fc-date-first-cell')
        lastDate = currentDate
      }
    }
    // 标记每行最后一个日期的末尾单元格
    dateCells[dateCells.length - 1].classList.add('fc-date-last-cell')
  })
}

2. 配套自定义样式 #

.fc-date-first-cell {
  border-left: 2px solid #2c3e50 !important;
}
.fc-date-last-cell {
  border-right: 2px solid #2c3e50 !important;
}

注：可根据需求调整边框颜色、粗细，!important用于覆盖FullCalendar的默认边框样式。

内容的提问来源于stack exchange，提问作者Chris C.