如何解决Fullcalendar 自定义视图“垂直资源视图”无法正常工作
我在 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 天(周一至周五)?
解决方法
制作周一至周五的 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
,那是因为如果您将 duration: { days: 5 }
更改为 duration: { days: 7 }
,您删除了周末,它会起作用。
如果您想将日历开始到星期一,只需更改 initialView: 'timeGridWeek'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。