我在下面提供了一个TimelineResourceView作为参考,作为当前示例示例。
示例:如果周日为周日,则随时向前/向后导航,请始终显示周视图中前三天的周视图。然后,无论何时向前/向后导航,都始终显示周视图以及周范围内的前3天。
FullCalendar示例时间轴ResourceWeekViewhttps://codepen.io/motogeek/pen/yLLpjLV
我尝试了文档中的许多不同操作,例如“ visiblerange”和强制日期都没有成功。
https://fullcalendar.io/docs/visibleRange
[[[10月27日,星期日-11月2日星期六],但他们想查看[10月24日星期四-11月2日星期六],以显示前3天。
calendar.setOption('visibleRange', {
start: '2019-10-24',
end: '2019-11-02'
});
坚持不懈的回报。我使用VisibleRange和Moment javascript库实现了自定义视图。我本人回答这个问题,因为我知道这可能对其他制定自定义视图的人有所帮助。我的注意力集中在timelineResourceViewm上,但应该能够应用于其他日/周视图等。
请参见CodePen:Working Example Week View with Previewing Last 3 days (10 Day View)
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'UTC',
header: {
left: 'today',
center: 'title',
right: 'resourceTimeline'
},
defaultView: 'resourceTimeline',
views: {
resourceTimeline: {
visibleRange: function (currentDate) {
// Generate a new date for manipulating in the next step
var startDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
var endDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
// Adjust the start & end dates, respectively
//10 Day WeekView PREV Thurs -> Sun-Sat
startDate.setDate(startDate.getDate() - 3); //Set Past (show back Thur)
endDate.setDate(endDate.getDate() + 7); // Set Future (standard week from Sun)
return { start: startDate, end: endDate };
}
}
},
slotLabelFormat: [{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }],
slotLabelInterval: { days: 1 },
editable: true,
resourceLabelText: 'Rooms',
resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
});
calendar.render();
document.getElementById('prev').addEventListener('click', function() {
calendar.incrementDate({ days: -7 });
});
document.getElementById('next').addEventListener('click', function() {
calendar.incrementDate({ days: 7 });
});
});