Fullcalendar resourceTimeGrid 月视图渲染

Question

大家好，我想将一个月分成 4-5 周，这样每周会有 7 周 days.I 无法找到一种方法在此视图中仅显示当前周显示整个月，如您所见每个星期列包含实际的工作日，但我想用这个方案渲染整个月。

  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: 'resourceTimeGridSevenDay',
  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: {
    resourceTimeGridSevenDay: {
      type: 'resourceTimeGrid',
      duration: {days: 7},
      slotDuration: { weeks: 4 },
    }
  },
  events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
  fixedWeekCount: false,
  rerenderDelay: 2,
  progressiveEventRendering: true,
  
  showNonCurrentDates: false,
  initialDate: new Date().toISOString(),
 
  }
}

Answer 1

我不确定您是否可以使用 fullCalendar 创建您在屏幕截图中显示的内容，但可以非常接近，而且可能已经足够好了。

在 slotLabelFormat 设置的文档中，它提到对于时间轴视图，它可以在标签区域配置多行。

所以您仍然可以使用“月”视图来获取正确的天数，但要像这样设置广告位标签：

views: {
  resourceTimelineMonth: {
    slotLabelFormat: [
      { week: 'long', }, // top level of text
      { weekday: 'short', day: '2-digit' } // lower level of text
    ],
  }
},

它将周数显示为一年中的第几周而不是每月的第几周，并且日期格式相似但不完全相同（无论如何都会根据您的语言环境而有所不同）。

现场演示：https://codepen.io/ADyson82/pen/BawNMEp

如果您想更好地控制确切的日期格式，您需要使用日期格式文档中提到的插件之一。

文档：

Fullcalendar resourceTimeGrid 月视图渲染

Fullcalendar resourceTimeGrid month view render

javascript

fullcalendar

render

fullcalendar-scheduler

fullcalendar-5