Fullcalendar 自定义视图“垂直资源视图”无法正常工作答案

【问题标题】：Fullcalendar custom view "vertical resource view" not working correctlyFullcalendar 自定义视图“垂直资源视图”无法正常工作
【发布时间】：2021-04-06 21:40:37
【问题描述】：

我在 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 天（周一至周五）？

【问题讨论】：

只需使用正常的周视图并将“周末”设置设置为 false。查看文档了解详细信息。
好的，但是可以通过添加资源名称来编辑日历的标题吗？在正常的周视图中，我的标题应该是 '' 30 dec -3 jan - Room A"
它已经显示了资源名称 - 演示：fullcalendar.io/docs/v4/vertical-resource-custom-demo。将资源名称添加到 title 是没有意义的，因为可能有多个资源。因此，它们显示在属于该资源的列上方，就像在那个演示中一样。
是的，我同意这一点。但为了显示 5 天（周一至周五），我必须使用不显示资源名称的正常周视图。这就是我想使用自定义垂直资源视图的原因。
5 天视图很简单：codepen.io/ADyson82/pen/JjRppYy?editors=001 使用“周”视图并隐藏周末。并显示资源名称。我不知道你认为问题是什么。我已将其添加为完整答案，如下所示。

标签： angular typescript fullcalendar fullcalendar-4

【解决方案1】：

那是因为如果您将 duration: { days: 5 } 更改为 duration: { days: 7 }，您删除了周末，它将起作用。如果您想将日历开始到星期一，只需更改 initialView: 'timeGridWeek'

【讨论】：

确实，它每次显示 5 天，但现在它显示从星期三（因为今天）到星期二并添加 firstDay: 0 不起作用。缺少什么？
我认为你必须改变你的初始视图
@antoineso initialView 适用于 fullCalendar 5，但这个问题被标记为 fullCalendar 4
@ADyson 你是对的，但在问题的 codepen 链接中设置了初始视图
@antoineso 我认为出于某种原因 OP 给了我们一个演示，它与问题中标记或提到的所有其他内容都不匹配。

【解决方案2】：

制作周一至周五的 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

【讨论】：

谢谢，确实，这正是我所需要的。事实是我不知道“resourceTimeGridWeek”存在，我在文档中搜索但只找到了“resourceTimeGridDay”（现在我认为拥有一周视图也是合乎逻辑的）。写在哪里？
也许它不是直接写的，但由于它已经明确它只是基本 timeGrid 视图的一个资源启用变体，那么你可以假设它有一个“周”视图，正如在标准timeGrid documentation。我想这可能会更清楚一点，但如果这让您感到困扰，您可以向 fullCalendar 开发人员提出问题。