Fullcalendar v5 - 如何调用已经初始化和渲染的日历答案

【问题标题】：Fullcalendar v5 - how to call already initialised and rendered calendarFullcalendar v5 - 如何调用已经初始化和渲染的日历
【发布时间】：2022-01-12 01:03:16
【问题描述】：

我有一个初始化的日历：

 $(document).ready(function(){
            
   var calendarEl = document.getElementById("calendar");
   var calendar = new FullCalendar.Calendar(calendarEl, {
       //options
   });
   calendar.render();
});

还有一个日期选择器，点击后会重定向到代码的不同部分：

$(function(){
    $("#datepicker").datepicker({
         //options
         onSelect: function(dateText) {
              resultado('mensaje', 'procesos.php?ac=10&v=D&fecha=' + dateText)
              },           
         });
     });

在这部分代码中，我曾经能够获取选择的日期并调用已渲染的日历来更改其显示的日期和视图，如下所示：

var ndate = new Date(//date conversion);
    
    $('#calendar').fullCalendar('gotoDate', ndate);
    $('#calendar').fullCalendar('changeView', 'agendaDay');

升级到 v5 后，我似乎无法复制它。我已经阅读了 FullCalendar 中的每一页文档，并且我尝试了不同的版本，但没有成功：

$('#calendar').calendar(function(){
     calendar.gotoDate(ndate);
     calendar.changeView(timeGridDay);
});

有谁知道如何替换 .fullCalendar 或对其他尝试有什么建议？非常感谢！

【问题讨论】：

fullcalendar.io/docs/methods - 示例就在此处，是文档介绍部分的一部分。您只需要确保日历的实例（您使用 var calendar = new FullCalendar.Calendar... 创建的实例在您需要时在范围内。
感谢您的回复。问题是日历不在我要调用方法 gotoDate 的代码部分的范围内。使用 v3，您过去可以在代码中的任何位置调用 (#calendar).fullCalendar，直到我升级到 v5。
就像我已经提到的那样，您只需要确保calendar 变量在范围内。在最简单的情况下，您可以将其设为全局。（v3 版本可以工作，因为它是一个 jQuery 函数，并且 jQuery $ 对象始终在作用域内）。
太好了，感谢您的确认，我现在知道该做什么了！

标签： javascript scope fullcalendar fullcalendar-5

【解决方案1】：

https://fullcalendar.io/docs/methods 展示了如何做到这一点。你得到了你使用var calendar = new FullCalendar.Calendar...初始化的日历实例，并且可以调用它上面的函数，就像任何JS类实例一样：

calendar.next();

当然，如果您需要在脚本的其他地方使用它，那么您需要确保在您需要的地方calendar 是in scope。如果您没有更复杂的类结构或其他任何可以考虑范围的东西，那么在最简单的情况下，您可以将其设为全局，例如

var calendar; //global variable

$(function() {
  calendar = new FullCalendar.Calendar(calendarEl, {
    //options
  });

  calendar.render();
});

【讨论】：

让它在全球范围内工作，非常感谢！