Fullcalendar resourceTimeGrid 月视图渲染

Posted 2023-05-08

【中文标题】Fullcalendar resourceTimeGrid 月视图渲染

【英文标题】：Fullcalendar resourceTimeGrid month view render

【发布时间】：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(),
 
  

【参考方案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

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

文档：

slotLabelFormat Date Formatting