renderEvent after selecting dates not working in Fullcalendar

Question

I would like to add and render event by selection of dates range. select() is correctly fired, but there is error calendar.fullCalendar is not a function on the last line. I googled a lot but did not find any working solution.

I use FullCalendar v4 in timeline-view.

var calendar = null;
document.addEventListener('DOMContentLoaded', function() {
  calendar = new FullCalendar.Calendar(document.getElementById('preview'), {
    editable: true,
    eventResizableFromStart: true,
    eventResourceEditable: true,
    selectable: true,
    ...
    select: function(selectionInfo) {
      var event = new Object();
      event.title = 'title';
      event.start = selectionInfo.start;
      event.end = selectionInfo.end;
      event.resourceId = selectionInfo.resource.id;

      calendar.fullCalendar('renderEvent', event); // console says 'calendar.fullCalendar is not a function'
      //$('#preview').fullCalendar('renderEvent', event); // I also tried this, but the same error as above
    }
  });
});

Answer 1

calendar.fullCalendar('renderEvent', event);

...I guess you copied this from somewhere? Because this is fullCalendar version 3 syntax. for version 4 you would write

calendar.addEvent(event);

See https://fullcalendar.io/docs/Calendar-addEvent for documentation. Always check that the examples you find apply to the correct version of the software.