切换视图时，全日历崩溃

Question

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

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

完整日历 {版本： "3.8.2"， internalApiVersion： 12， applyAll： ƒ， debounce： ƒ， isInt： ƒ， ...}

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

1-初始视图是周视图（议程周）

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

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

3-将视图更改回日视图（议程日）

$('#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)

这是我正在使用的代码片段：

$('#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');

我实际上在获取所有事件之前切换视图，这似乎是完整日历的已知问题

这是链接：

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

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

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

对我来说效果很好。

谢谢！