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

Question

我在我的网页中使用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();

但返回相同的错误。

Answer 1

使您的calendar变量全局化

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

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

Answer 2

您可以使用 jQuery next- 请参考此链接 https://codepen.io/pen/?&editable=true&editors=001

$('#next').on('click', function() {
    $('#calendar').fullCalendar('next'); // call method
});

Answer 3

跑步calendar.next()似乎对我有用

const el = document.querySelector("#calendar");

const calendar = new FullCalendar.Calendar(el, {
  plugins: ['dayGrid']
});

calendar.render();

setTimeout(() => {
  calendar.next();
},2000);

笔：https ://codepen.io/anon/pen/MRQpwo