FullCalendar.js 从 select 事件中获取日期范围作为字符串

Question

我正在使用 FullCalendar.js to enable a user to select a single date or range of dates from a visual calendar like this。

The documentation specifies 我应该实现 select 函数来捕获用户选择的开始日期 startStr 和结束日期 endStr。

下面是我认为可以执行此操作的代码：

 $('#calendar').fullCalendar({
    selectable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: ''
    },
    defaultDate: today,
    navLinks: true,
    eventLimit: true,
    events: [],
    select: function(selectionInfo) {
       console.log(selectionInfo.startStr);
       console.log(selectionInfo.endStr);
    }
 });

输出：

undefined
undefined

显然我的做法是不正确的。我做错了什么？

Answer 1

这并没有回答为什么 OP 代码不起作用。

但是，对于遇到相同问题的任何其他人，这里有一个不同的实施方案作为有效的解决方案。

  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    selectable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    dateClick: function(info) {
      console.log(info.dateStr);
    },
    select: function(info) {
      console.log(info.startStr);
      console.log(info.endStr);
    }
  });
  calendar.render();

Answer 2

我有类似的问题，我正在检查错误的文档版本（我使用的是 v3），select 功能实现如下：

select: function(startDate, endDate) {
      alert('selected ' + startDate.format() + ' to ' + endDate.format());
    }

FullCalendar.js 从 select 事件中获取日期范围作为字符串

FullCalendar.js get date range as string from select event

javascript

jquery

fullcalendar