FullCalendar.js get date range as string from select event

Question

I am using FullCalendar.js to enable a user to select a single date or range of dates from a visual calendar like this .

The documentation specifies that I should implement the select function to capture the start date startStr and end date endStr of the user's selection.

Below is the code I thought would do this:

 $('#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);
    }
 });

Output:

undefined
undefined

Clearly my approach is not correct. What am I doing wrong?

Answer 1

This does not answer why the OP code is not working.

However, for anyone else experiencing the same issue, here is a different implementation which serves as a working solution.

  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

I had similar issue, I was checking wrong documentation version (I am using v3) which select function is implemented as follow:

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