全日历自定义视图 "vertical resource view" 无法正常工作

Question

我在 angular 上使用全日历 4，我需要使用基于此演示的自定义视图：
https://fullcalendar.io/docs/v4/vertical-resource-custom-demo

我的观点需要在 5 天（周一至周五）内进行，并且只针对 1 个资源。我编辑了演示来做我想做的事，但日历并不是每次都显示 5 天。例如本周，它只显示前一周的今天到星期五和星期五到星期二。

我已经完成了我的问题和我创建的视图的代码笔：

  resourceTimeGridFiveDay: {
    type: "resourceTimeGrid",
    duration: { days: 5 },
    buttonText: "5 days"
  }

https://codepen.io/Archelite/pen/QWKQyZR

如何强制日历始终显示 5 天（周一至周五）？

Answer 1

那是因为您删除了周末，如果您将 duration: { days: 5 } 更改为 duration: { days: 7 } 它将起作用。如果您想将日历开始设置为星期一，只需更改 initialView: 'timeGridWeek'

Answer 2

制作周一至周五的 5 天视图很容易 - 只需使用垂直资源视图的正常“周”设置，并设置隐藏周末的选项：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridWeek', //USE NORMAL VERTICAL RESOURCE WEEK VIEW
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimeGridWeek'
    },
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
    weekends: false //HIDE WEEKENDS
  });

  calendar.render();
});

工作演示：https://codepen.io/ADyson82/pen/JjRppYy?editors=001

“周末”设置的文档：https://fullcalendar.io/docs/v4/weekends

全日历自定义视图 "vertical resource view" 无法正常工作

Fullcalendar custom view "vertical resource view" not working correctly

angular

typescript

fullcalendar

fullcalendar-4