Fullcalendar resourceTimelineDay视图仅显示当日事件问题求助

核心问题分析 #

你遇到的问题是因为resourceTimelineDay视图默认仅显示单日时间范围，导致初始化时仅加载当前日期的事件，而非整周事件。需要调整视图的时间范围覆盖整周，并确保初始日期指向周起始日。

具体修复步骤 #

1. 初始化周起始日期变量：补充currentDateOfWeek的初始定义，避免未定义错误。
2. 添加缺失的辅助函数：实现getFirstDayOfWeek、getLastDayOfWeek和getDates三个工具函数，用于生成周内日期资源。
3. 设置初始视图的时间范围：重写resourceTimelineDay视图的duration为1周，让日历加载整周的事件数据。
4. 指定初始日期为周起始日：确保日历初始化时显示当前周的第一天（周一）。

修正后的完整代码 #

// 辅助函数：获取周起始日（周一）
function getFirstDayOfWeek(date, firstDay) {
  const d = new Date(date);
  const day = d.getDay();
  const diff = d.getDate() - day + (day === 0 ? -6 : 1);
  return new Date(d.setDate(diff));
}

// 辅助函数：获取周结束日（周日）
function getLastDayOfWeek(date, firstDay) {
  const firstDayOfWeek = getFirstDayOfWeek(date, firstDay);
  const lastDay = new Date(firstDayOfWeek);
  lastDay.setDate(lastDay.getDate() + 6);
  return lastDay;
}

// 辅助函数：生成两个日期之间的所有日期
function getDates(startDate, endDate) {
  const dates = [];
  const currentDate = new Date(startDate);
  while (currentDate <= endDate) {
    dates.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return dates;
}

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  // 初始化当前周日期变量
  var currentDateOfWeek = new Date();
  // 设置初始日期为当前周的周一
  var initialWeekStart = getFirstDayOfWeek(currentDateOfWeek, "Monday");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    editable: true,
    initialView: 'resourceTimelineDay',
    initialDate: initialWeekStart.toISOString().substr(0, 10),
    locale: 'fr',
    timeZone: 'UTC',     
    height: 'auto',
    dateIncrement: {weeks: 1},

    // 重写resourceTimelineDay视图，设置时间范围为1周
    views: {
      resourceTimelineDay: {
        duration: { weeks: 1 }
      }
    },

    customButtons: {
      prev: {
        text: 'Prev',
        click: function() {
          var weekday = getFirstDayOfWeek(currentDateOfWeek,"Monday");
          currentDateOfWeek.setUTCDate( weekday.getUTCDate() -7);
          calendar.prev(); 
        }
      },
      next: {
        text: 'Next',
        click: function() {  
          var weekday = getLastDayOfWeek(currentDateOfWeek,"Monday");
          currentDateOfWeek.setUTCDate(weekday.getUTCDate() + 7);
          calendar.next();     
        }
      },
    },

    eventDataTransform: function(data) {
      data.resourceId = data.start.substr(0, 10);
      return data;
    },

    events: [
      {
        title: 'Test1',
        start: '2023-02-27T08:00:00',
        end: '2023-02-27T10:00:00'
      },
      {
        title: 'Test2',
        start: '2023-02-28T08:00:00',
        end: '2023-02-28T15:00:00'
      },
      {
        title: 'Test3',
        start: '2023-03-01T05:00:00',
        end: '2023-03-01T11:00:00',
      },
      {
        title: 'Test4',
        start: '2023-03-02T01:00:00',
        end: '2023-03-02T05:00:00',
      },
      {
        title: 'Test5',
        start: '2023-03-02T12:00:00',
        end: '2023-03-02T16:00:00',
      },
      {
        title: 'Test6',
        start: '2023-03-03T09:00:00',
        end: '2023-03-03T10:00:00',
      },
    ],
    
    refetchResourcesOnNavigate: true,
    resources: function(fetchInfo, successCallback, failureCallback) {
      var curr = new Date(currentDateOfWeek); 
      var firstday = getFirstDayOfWeek(curr, "Monday");
      var lastday = getLastDayOfWeek(curr, "Monday");

      var resources = [];
      getDates(firstday, lastday).forEach(function(date) {
        var options = {weekday: "long",  day: "numeric"};
        resources.push({
          id: date.toISOString().substr(0, 10),
          title: date.toLocaleString("fr-FR", options)
        });
      });
      successCallback(resources);
    }
  });

  calendar.render();
});

说明 #

• 通过修改resourceTimelineDay视图的duration为1周，日历会加载整周的事件数据，而非仅单日。
• 初始日期设置为当前周的周一，确保打开日历时直接显示整周内容。
• 补充缺失的辅助函数，保证日期资源生成逻辑正常运行。

内容的提问来源于stack exchange，提问作者Nicolas B.