FullCalendar 按钮点击触发gotoDate跳转指定日期的正确调用方法

核心问题根因 #

当前代码混用了两代完全不兼容的FullCalendar调用方式，是功能失效的直接原因：

• 日历初始化使用的是FullCalendar v4+ 推出的原生对象式API，通过new FullCalendar.Calendar()创建日历实例，gotoDate这类实例方法必须直接调用在生成的实例对象上。
• 按钮点击事件中写的$("#calendar").fullCalendar("gotoDate","2018-01-01")是FullCalendar v3及更早版本才支持的jQuery插件调用语法，这套接口在v4及以上版本已被完全移除，无法触发任何跳转逻辑。
• 当前创建的日历实例定义在DOMContentLoaded回调的局部作用域中，按钮的点击事件回调根本无法访问到这个实例，就算用对API也没有可操作的对象。

修正实现方案 #

1. 调整日历实例的作用域，把实例声明在可以被按钮点击事件访问到的位置，不要让它被限制在初始化回调的闭包内。
2. 按钮点击回调中，直接调用日历实例自带的gotoDate方法传入目标日期，替换掉旧的jQuery插件式调用。

修正后的代码示例 #

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script>
      // 声明可跨作用域访问的calendar变量
      let calendar;
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
        calendar.gotoDate('2010-01-01');
      });
    </script>
  </head>
  <body>
    <button class="testbut" id="testbut">Skip to 2018</button>
    <div id='calendar'></div>
    <script>
       $(document).ready(function(){
         $('.testbut').click(function(){
           // 直接调用日历实例的gotoDate方法
           calendar.gotoDate('2018-01-01');
         });
       });
    </script> 
  </body>
</html>

常见踩坑提醒 #

• v4及以上版本的FullCalendar已完全移除jQuery依赖，所有方法调用都需要基于初始化时生成的日历实例，不要再沿用旧版的jQuery选择器调用语法。
• 如果担心全局变量污染，可以把日历实例挂载到自定义全局对象上，或者通过模块化导出的方式在事件回调中引入，不要把实例锁死在初始化逻辑的闭包里。

内容的提问来源于stack exchange，提问作者DaveAngel