切换视图时 Fullcalendar 崩溃

Question

我在我的 rails 应用程序中使用 Fullcalendar.js（通过 fullcalendar gem https://github.com/mkhairi/fullcalendar）。

我拥有的 fullcalendar.js 的版本是 3.8.2（我通过在控制台中输入 Fullcalendar 在 chrome 的检查器中找到了这个，我得到了这个）

全日历 {version: "3.8.2", internalApiVersion: 12, applyAll: ƒ, debounce: ƒ, isInt: ƒ, ...}

当我执行以下步骤时，Fullcalendar 崩溃，并且不呈现视图：

1- 初始视图是周视图（agendaWeek）

2- 更改日视图，例如选择下周的一天（d = 今天 + 1 周）

$('#calendar').fullCalendar('gotoDate',d);

3- 将视图改回日视图（agendaDay）

$('#calendar').fullCalendar('changeView','agendaDay');

4- 将视图更改为周视图

$('#calendar').fullCalendar('changeView','agendaWeek');

它给出以下错误，并且不加载周视图：

fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
 body=1:11974 Uncaught TypeError: Cannot read property 'minTime' of 
null
at ResourceTimeGrid.TimeGrid.computeTimeTop (fullcalendar.self- 

4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:11974)
at ResourceTimeGrid.TimeGrid.computeDateTop (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:11968)
at ResourceTimeGrid.TimeGrid.computeSegVerticals (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:12007)
at ResourceTimeGrid.TimeGrid.updateSegVerticals (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:11995)
at TimeGridFillRenderer.attachSegEls (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:14104)
at TimeGridFillRenderer.FillRenderer.renderSegs (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:6435)
at TimeGridEventRenderer.EventRenderer.renderBgSegs 
(fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:4321)
at TimeGridEventRenderer.EventRenderer.renderBgRanges 
(fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:4297)
at TimeGridEventRenderer.EventRenderer.render (fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:4273)
at ResourceTimeGrid.DateComponent.executeEventRender 
(fullcalendar.self- 
4ac7cb5378baf9f7c517f032032aaab305cd3b2213aacbab690c4efdc0047f46.js? 
body=1:8848)

这是我正在使用的代码的 sn-p：

$('#calendar').each(function(){
var calendar = $(this);
calendar.fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  selectable: true,
  selectHelper: true,
  editable: true,
  eventLimit: true,
  defaultView: 'agendaWeek',
  locale: 'fr',
  slotDuration: '00:15:00',
  nowIndicator:true,
  defaultDate:"2019-01-14",
  displayEventTime: false,
  hiddenDays:[0],
  minTime:'06:00',
  maxTime:'23:00',
  columnHeaderFormat:"ddd D",
  views : 
  {
    month:
    {
      groupByResource:true,
    },
    agenda:
    {
      groupByDateAndResource:true,
    },
    day:
    {
      groupByDateAndResource:true,
    },
  },
  dayClick: function(date, jsEvent, view) {
    alert("dayClick");
  },
  viewRender: function(view, element) {
    console.log(view.options);
  }
  //...other callbacks, not necessary to paste them
});

非常感谢！

Answer 1

找到了！ （至少是一种解决方法）

当我在做的时候：

$('#calendar').fullCalendar('gotoDate',d);
$('#calendar').fullCalendar('changeView','agendaDay');

我实际上是在获取所有事件之前切换视图，这似乎是 fullcalendar 的一个已知问题

这是链接：

在事件获取解决之前切换视图，JS 错误 #3689 https://github.com/fullcalendar/fullcalendar/issues/3689

这意味着解决方法是在更改视图之前等待所有事件被获取，例如：

  $('#calendar').fullCalendar('gotoDate',d);
  $( document ).ajaxComplete(function() {
    $('#calendar').fullCalendar('changeView','agendaDay');
  });

对我来说很好用。

谢谢！