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?

You're reading the wrong version of the documentation. Your code above looks like version 3 of fullCalendar. That documentation is for version 4. In the top right corner of the documentation page you'll see a little drop-down list saying v4. Open it and change to v3. Or click here: fullcalendar.io/docs/v3/select-callback . The two versions are very different in a lot of ways so make sure you always study the correct set of docs. — ADyson
Ah, astute observation! Rather than delete the question, I will leave it open as I have found an alternative solution which will most likely help others. — Oscar Chambers
Start using v4 is your solution I see...good idea overall :-) — ADyson

Oscar Chambers Oscar Chambers · Accepted Answer · 2019-10-11T06:07:45

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();

FullCalendar.js get date range as string from select event

2 Answers