Fullcalendar resourceTimeGrid 月视图渲染答案

【问题标题】：Fullcalendar resourceTimeGrid month view renderFullcalendar resourceTimeGrid 月视图渲染
【发布时间】：2022-01-08 22:51:21
【问题描述】：

大家好，我想将一个月分成 4-5 周，以便每周有 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: '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(),
 
  }
}

【问题讨论】：

标签： javascript fullcalendar render fullcalendar-scheduler fullcalendar-5

【解决方案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

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

文档：

【讨论】：