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

但是returns同样的错误。

Answer 1

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

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

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

使您的 calendar 变量成为全局变量

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

然后在控制台输入calendar.next();

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

Interacting with FullCalendar in my developer console

javascript

fullcalendar

fullcalendar-4