Full Calendar能否实现周视图日期在左侧、时间横向排布在顶部的效果？

可以实现你需要的「一周日期排布在左侧、时间刻度沿顶部横向排列」的周视图效果，通过Full Calendar的资源时间线视图组合自定义配置即可完成，具体实现方案如下：

• 依赖准备
  需要先安装Full Calendar核心库以及resource-timeline插件，该插件原生支持左侧垂直罗列资源、顶部横向展示时间轴的布局，刚好匹配你的需求。
• 核心配置示例

import { Calendar } from '@fullcalendar/core'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

const calendarDom = document.getElementById('calendar')
const calendar = new Calendar(calendarDom, {
  plugins: [resourceTimelinePlugin],
  // 初始加载自定义周视图
  initialView: 'customWeekVerticalDay',
  views: {
    customWeekVerticalDay: {
      type: 'resourceTimeline',
      // 视图周期为1周
      duration: { weeks: 1 },
      // 顶部时间刻度精度，可按需调整为30分钟、1小时等
      slotDuration: '01:00',
      // 隐藏默认的顶部日期分组，避免和左侧日期重复
      groupByDateAndResource: false
    }
  },
  // 将当前周的日期生成左侧资源列表
  resources: (info, callback) => {
    const weekStart = info.start
    const weekEnd = info.end
    const dayList = []
    let currentDate = new Date(weekStart)
    // 遍历整周日期生成左侧展示项
    while (currentDate < weekEnd) {
      dayList.push({
        id: currentDate.toISOString().slice(0, 10),
        title: new Intl.DateTimeFormat('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          weekday: 'long'
        }).format(currentDate)
      })
      currentDate.setDate(currentDate.getDate() + 1)
    }
    callback(dayList)
  },
  // 事件数据绑定，给事件设置resourceId为对应日期的id即可渲染到对应行
  events: [
    {
      title: '示例日程',
      start: '2024-05-20T10:00:00',
      end: '2024-05-20T12:00:00',
      resourceId: '2024-05-20'
    }
  ]
})

calendar.render()

• 样式调整
  如果默认样式和预期效果有出入，可以直接覆盖Full Calendar的内置CSS类，调整左侧日期列宽度、时间刻度样式、日程卡片样式，完全可以还原你提供的参考效果。

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