Fullcalendar resourceTimeGrid月视图如何按周分割渲染整月内容

核心问题分析 #

你当前自定义视图的参数配置错误导致只能展示单周：

• 配置的duration: { days: 7 }强制限制了视图仅展示7天内容
• slotDuration: { weeks: 4 }参数用法错误，该参数用于定义时间轴最小时间槽的粒度，不应该设置为周级别，会导致时间轴渲染异常

修复方案 #

替换你的配置中views和initialView相关配置即可实现整月按周块堆叠、每周展示7天的效果，修复后的完整配置如下：

this.calendarOptions = {
  headerToolbar: {
    left: '',
    center: 'title',
    right: 'prev next'
  },
  defaultAllDay:false,
  aspectRatio: 2.45,
  editable: false,
  slotMinWidth: 75,
  selectable: false,
  eventClassNames: ['mt-1'],
  eventResourceEditable: false,
  eventOverlap: false,
  initialView: 'resourceTimeGridMonth', // 替换为自定义的月视图
  resourceLabelClassNames: ['p-0'],
  resourceGroupLabelContent: (arg) => {
    return {html: `<strong>${arg.groupValue}</strong> `};
  },
  resourceLabelContent : (arg) => {
    return {html: `<span> ${arg.resource._resource.title}</span> `};
  },
  slotLabelContent: (arg) => {
    return {html: ` `};
  },

  eventClick: (arg) => {
    console.log('event click')
  },
  now: new Date().toISOString(), 
  resourceAreaHeaderContent: 'Sponsor/Protocol',
  resourceAreaWidth: '10%',
  views: {
    resourceTimeGridMonth: {
      type: 'resourceTimeGrid',
      duration: { month: 1 }, // 视图跨度设置为1个月
      slotDuration: { days: 1 }, // 时间槽粒度设为1天，可根据需求调整为小时级
      dateIncrement: { month: 1 }, // 切换上下页时跳转1个月
    }
  },
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
  fixedWeekCount: false, // 按月份实际周数展示，自动适配4/5周的显示需求
  rerenderDelay: 2,
  progressiveEventRendering: true,
  showNonCurrentDates: false, // 隐藏非当前月的日期，避免跨月内容干扰
  initialDate: new Date().toISOString(),
}

可选调整说明 #

如果你需要严格固定为4周/5周的显示长度，可将duration参数修改为{ weeks: 4 }或者{ weeks: 5 }，视图会自动按固定周数展示内容。

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