时间戳

首页 > 解决方案 > 在我的开发者控制台中与 FullCalendar 交互

javascript - 在我的开发者控制台中与 FullCalendar 交互

问题描述

我在我的网页中使用FullCalendar.io并尝试使用我的浏览器控制台与之交互。

HTML：

  <p>
    <button id='prev'>prev</button>
    <button id='next'>next</button>
  </p>

  <div id='calendar'></div>

JS：

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ],
      header: false // don't display the default header
    });

    calendar.render();

    document.getElementById('prev').addEventListener('click', function() {
      calendar.prev(); // call method
    });

    document.getElementById('next').addEventListener('click', function() {
      calendar.next(); // call method
    });

  });

在我的控制台中，如果我运行calendar.next();，它会说 calendar.next() 不是一个函数。

有人可以解释为什么以及与日历交互的正确方法是什么？

我也尝试过使用

var calendarEl = document.getElementById('calendar');
calendarEl.next();

但返回相同的错误。

标签： javascriptfullcalendarfullcalendar-4

解决方案

使您的calendar变量全局化

var calendar; 
document.addEventListener('DOMContentLoaded', function() { 
  var calendarEl = document.getElementById('calendar'); 
  calendar = new FullCalendar.Calendar(calendarEl, { 
    plugins: [ 'dayGrid' ],
});

然后在控制台类型calendar.next();

推荐阅读