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

Question

我在angular上使用fullcalendar 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

制作周一至周五的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

Answer 2

这是因为删除了周末，如果将duration: { days: 5 }更改为duration: { days: 7 }，它会起作用。如果你想把日历改为周一，只需更改initialView: 'timeGridWeek'