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

【问题标题】：FullCalendar Resource View - Week View w/Previous 3 Days ShownFullCalendar 资源视图 - 显示前 3 天的周视图
【发布时间】：2019-11-04 21:11:55
【问题描述】：

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

示例：如果星期视图 Sun-Sat Then 随时向前/向后导航，始终显示星期范围内前 3 天的星期视图。然后随时向前/向后导航，始终显示周视图与周范围的前 3 天。

FullCalendar 示例时间线 ResourceWeekView https://codepen.io/motogeek/pen/yLLpjLV

我从文档中尝试了许多不同的东西，例如“可见范围”和强制日期，但没有成功。

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'
});

【问题讨论】：

您可以设置自定义视图，持续时间为 3 天。见fullcalendar.io/docs/custom-view-with-settings
我想我需要计算最初计算周日期，然后告诉日历显示前 3 天，以便我可以查看 10 天的周视图。我只是希望通过选项显示选项更容易实现这一点。挑战在于让导航始终在一周视图导航中显示上一个星期四。这就是我希望得到的帮助或建议。
好的，你的意思是你希望日历只显示每周的周四到周六，周日到周三应该总是不可见的。对吗？
@ADyson 我今天想通了。如果你想看看我想要完成什么，下面是答案。用户想要一周视图，但在前一周的前 3 天也达到峰值。感谢您提供上面的链接。

标签： javascript jquery fullcalendar fullcalendar-scheduler fullcalendar-4

【解决方案1】：

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

});

【讨论】：