具有自定义视图的 FullCalendar 不起作用答案

【问题标题】：FullCalendar with custom view not working具有自定义视图的 FullCalendar 不起作用
【发布时间】：2020-12-29 08:14:40
【问题描述】：

我正在为客户开发日历应用程序。日历需要显示一周中每一天的资源。我设法在 FullCalendar 中创建了一个自定义视图，可以毫无问题地显示一周中的所有日子。但是一旦我将hiddenDays: [0,6] 添加到自定义视图中，由于我的客户端在那些日子里无法工作，导航按钮就会停止工作。

这是我的自定义视图代码：

resourceTimeGridWeekDay: {
              type: "resourceTimeGrid",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                end.setDate(start.getDate() + 7)

                return {start: start, end: end}
              }
            }

没有hiddenDays 属性，一切正常。

编辑：当我把它改成这样的时候，我至少可以向后导航，但永远不能向前：

resourceTimeGridWeekDay: {
              type: "resourceTimeGrid",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                if (currentDate.getDay() === 5) {
                  end.setDate(start.getDate() + 9)
                } else {
                  end.setDate(start.getDate() + 7)
                }

                return {start: start, end: end}
              }
            }

编辑 2：我正在运行 FullCalendar 5.5.0 版。

【问题讨论】：

这是哪个版本的 fullCalendar？ 4个还是5个？以及哪一点发布？例如5.3.1 还是什么？如果 fullCalendar 中存在错误，这有助于了解。
哎呀。应该提到这一点。我使用的是 5.1.0。我已经升级到 5.5.0，但我仍然遇到同样的问题。
谢谢。只是要清楚...您是否要创建“周”视图？因为默认情况下已经有其中之一 - resourceTimeGridWeek 。您的版本是否意味着有所不同？

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

感谢@ADyson！没有意识到有一个“resourceTimeGridWeek”视图。当我检查文档时，我可能不小心跳过了它而没有意识到。我已经把它替换了，它现在就像一个魅力！

我需要一个可以显示一周中所有日子及其资源的视图，周六和周日除外。

resourceTimeGridWeekDay: {
              type: "resourceTimeGridWeek",
              buttonText: "weekdays",
              hiddenDays: [0,6],
              visibleRange: function(currentDate) {
                let start = new Date(currentDate.valueOf())
                let end = new Date(currentDate.valueOf())

                start.setDate(start.getDate() - start.getDay())
                if (currentDate.getDay() === 5) {
                  end.setDate(start.getDate())
                } else {
                  end.setDate(start.getDate() + 6)
                }
                // document.getElementById("test").innerHTML = JSON.stringify(end)

                return {start: start, end: end}
              }
            }

我必须保留 'visibleRange' 位，否则它会在随机日期开始一周。

【讨论】：