Fullcalendar v5 - how to call already initialised and rendered calendar

Question

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!

https://fullcalendar.io/docs/methods - example right there, part of the Introduction section of the docs. You just need to make sure the instance of the calendar (which you created with `var calendar = new FullCalendar.Calendar...` is in scope when you need it. — ADyson, Jan 12 '22 at 10:17
Thanks for your reply. The thing is the calendar is not in scope in the part of the code where I want to call the method gotoDate. With v3 you used to be able to call (#calendar).fullCalendar anywhere in the code, that's how it worked until I upgraded to v5. — mire, Jan 12 '22 at 15:51
Well like I already mentioned, you simply need to ensure the `calendar` variable is in scope. In the simplest case, you can just make it global. (the v3 version worked because it was a jQuery function, and the jQuery $ object was always in scope). — ADyson, Jan 12 '22 at 16:03
Excellent, thanks for confirming that, I know what to work with now! — mire, Jan 12 '22 at 16:06

score 2 · Accepted Answer · answered Jan 12 '22 at 16:07

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

making it global worked, thanks a lot! – mire Jan 12 '22 at 16:58 — mire, Jan 12 '22 at 16:58

Fullcalendar v5 - how to call already initialised and rendered calendar

1 Answers1