FullCalendar横向显示时间、纵向显示日期的实现咨询

问题描述 #

我在项目中使用FullCalendar，想要实现横轴为时间、纵轴为日期的特定显示格式，但未找到内置配置选项。已查阅官方文档并尝试多种配置，还试过ChatGPT提供的代码，但该方案无法使用FullCalendar的默认功能。我需要一种能结合时间与日期轴的视图来可视化事件，请问是否有办法实现？若没有，能否提供自定义或扩展该库的指导建议？

预期效果参考：

附尝试过的代码：

document.addEventListener('DOMContentLoaded', function () {
    const currentDate = new Date();
    const currentMonth = ('0' + (currentDate.getMonth() + 1)).slice(-2);
    const currentYear = currentDate.getFullYear();
    const daysInMonth = new Date(currentDate.getFullYear(), currentMonth + 1, 0).getDate(); 
    const allDays = [];
    for (let day = 1; day <= daysInMonth; day++) {
      const daydata = {
        sortId: day,
        id: currentYear + '-' + currentMonth + '-' + day,
        title: currentMonth + '月' + day + '日',
      };
      allDays.push(daydata);
    }

    const events = [
      {
        title: 'Event 1',
        start: '2023-06-26T10:00:00',
        end: '2023-06-26T12:00:00',
        resourceId: '2023-06-24',
      },
      {
        title: 'Event 2',
        start: '2023-06-26T12:00:00',
        end: '2023-06-26T14:00:00',
        resourceId: '2023-06-26',
      },
      {
        title: 'Event 3',
        start: '2023-06-26T09:00:00',
        end: '2023-06-26T20:00:00',
        resourceId: '2023-06-1',
      },
    ];

    const calendarEl = document.getElementById('calendar');
    const calendar = new Calendar(calendarEl, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      plugins: [resourceTimeline, timeGrid, dayGrid, list],
      initialView: 'resourceTimelineFourDays',
      slotDuration: '01:00:00',
      slotLabelInterval: '01:00',
      slotMinTime: '00:00:00',
      slotMaxTime: '24:00:00',
      locale: 'ja',
      resourceOrder: 'sortId',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceTimelineFourDays,resourceTimegridFourDays,dayGridMonth,listMonth',
      },
      themeSystem: 'bootstrap5',
      resources: allDays,
      views: {
        resourceTimelineFourDays: {
          type: 'resourceTimeline',
          duration: { days: 4 },
          buttonText: '4 day',
        },
        resourceTimegridFourDays: {
          type: 'timeGrid',
          duration: { months: 1 },
          buttonText: '1month Grid',
        },
      },
      events: events,
    });
    calendar.render();
  });

解决方案 #

一、利用现有Resource Timeline视图快速实现 #

你尝试的resourceTimeline方向有误，默认是纵轴资源、横轴时间，但通过配置orientation: 'vertical'可直接反转轴方向，无需手动生成日期资源，完美匹配需求：

修改后的核心配置代码：

document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');
    const calendar = new Calendar(calendarEl, {
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        plugins: [resourceTimeline, timeGrid, dayGrid, list],
        initialView: 'resourceTimelineMonth',
        slotDuration: '01:00:00',
        slotLabelInterval: '01:00',
        slotMinTime: '00:00:00',
        slotMaxTime: '24:00:00',
        locale: 'zh-cn', // 需引入对应中文语言包
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'resourceTimelineMonth,dayGridMonth,listMonth'
        },
        themeSystem: 'bootstrap5',
        views: {
            resourceTimelineMonth: {
                type: 'resourceTimeline',
                duration: { months: 1 },
                orientation: 'vertical', // 关键配置：反转轴方向，纵轴自动显示日期
                buttonText: '月时间线'
            }
        },
        events: [
            {
                title: '事件1',
                start: '2023-06-26T10:00:00',
                end: '2023-06-26T12:00:00'
            },
            {
                title: '事件2',
                start: '2023-06-26T12:00:00',
                end: '2023-06-26T14:00:00'
            },
            {
                title: '事件3',
                start: '2023-06-01T09:00:00',
                end: '2023-06-01T20:00:00'
            }
        ]
    });
    calendar.render();
});

二、深度自定义视图的指导建议 #

如果默认垂直资源时间线不满足需求，可通过以下方式扩展：

• 自定义视图类：继承FullCalendar的View基类，重写render、renderDates等核心方法，自定义轴的生成逻辑和事件定位规则
• DOM钩子与样式覆盖：利用datesRender、eventRender等钩子事件，修改生成的DOM结构，通过CSS调整轴的布局和样式
• 交互逻辑适配：确保自定义视图兼容FullCalendar的默认交互（拖拽调整事件、点击创建事件等），需重写或扩展对应的交互处理函数

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