FullCalendar资源视图-显示前3天的周视图

我在下面提供了一个TimelineResourceView作为参考,作为当前示例设置。

示例:如果“周视图”为“周六”,则无论何时向前/向后导航,始终显示周视图中前3天的周视图。然后,无论何时向前/向后导航,都始终显示周视图以及周范围内的前3天。

FullCalendar示例时间轴ResourceWeekView https://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'
});
a704271485 回答:FullCalendar资源视图-显示前3天的周视图

持久性得到回报。我使用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 });  
  });

});
本文链接:https://www.f2er.com/3163699.html

大家都在问