在我的开发者控制台中与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

运行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

Answer 3

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

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