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

在开发人员控制台中与FullCalendar互动

3 个答案: