javascriptscopefullcalendarfullcalendar-5

Fullcalendar v5 - how to call already initialised and rendered calendar


I have an initialised calendar:

 $(document).ready(function(){
            
   var calendarEl = document.getElementById("calendar");
   var calendar = new FullCalendar.Calendar(calendarEl, {
       //options
   });
   calendar.render();
});

And a datepicker that when clicked on redirects to a different part of the code:

$(function(){
    $("#datepicker").datepicker({
         //options
         onSelect: function(dateText) {
              resultado('mensaje', 'procesos.php?ac=10&v=D&fecha=' + dateText)
              },           
         });
     });

In that part of the code I used to be able to get the date picked and call the already rendered calendar to change its displayed date and view like this:

var ndate = new Date(//date conversion);
    
    $('#calendar').fullCalendar('gotoDate', ndate);
    $('#calendar').fullCalendar('changeView', 'agendaDay');

After upgrading to v5 I can't seem to replicate this. I have read every page of docs in FullCalendar and I have tried different versions of this with no luck:

$('#calendar').calendar(function(){
     calendar.gotoDate(ndate);
     calendar.changeView(timeGridDay);
});

Does anyone know how to replace .fullCalendar or have any suggestions on what else to try? Thanks a lot!


Solution

  • https://fullcalendar.io/docs/methods shows how you can do this. You get the instance of the calendar you initialised using var calendar = new FullCalendar.Calendar... and can call functions on it, like any JS class instance:

    calendar.next();
    

    Of course, if you need to use it elsewhere in your script then you need to ensure that calendar is in scope in the place you need it. If you don't have a more sophisticated class structure or anything else which would give you scope considerations, then in the simplest case you could just make it global, e.g.

    var calendar; //global variable
    
    $(function() {
      calendar = new FullCalendar.Calendar(calendarEl, {
        //options
      });
    
      calendar.render();
    });