全日历自定义视图 "vertical resource view" 无法正常工作
Fullcalendar custom view "vertical resource view" not working correctly
我在 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 天(周一至周五)?
那是因为您删除了周末,如果您将 duration: { days: 5 }
更改为 duration: { days: 7 }
它将起作用。
如果您想将日历开始设置为星期一,只需更改 initialView: 'timeGridWeek'
制作周一至周五的 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
我在 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 天(周一至周五)?
那是因为您删除了周末,如果您将 duration: { days: 5 }
更改为 duration: { days: 7 }
它将起作用。
如果您想将日历开始设置为星期一,只需更改 initialView: 'timeGridWeek'
制作周一至周五的 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