Listener for "date change" in FullCalendar?

Question

Is there any way to attach a listener to FullCalendar that will be fired whenever the currently viewed date is changed, i.e. if you are in Month view, going to the next month would fire the event passing the Date for the first day of the month, and the same for changing weeks in Week view, day in Day view etc.

The only exposed listener that would be close to this is the dayClick callback, but that's no good because it only fires when a user clicks in an actual day's cell, not for example when the Next/prev/today controls are pressed in the header bar.

I want this functionality to be able to sync the currently viewed month in FullCalendar with a ExtJS datepicker component, so if the viewed month is changed in FullCalendar, then the Datepicker is updated to show that same month. (think Google Calendar's UI with its "mini calendar" in the top left being the datepicker).

Answer 1

Bill,

I know this question is pretty much ancient, but I needed a solution and figured I'd post it here for others. I solved the problem myself by attaching the viewDisplay event to my calendar (this event was removed in v2 of FullCalendar, viewRender may be used instead).

$("#calendar").fullCalendar({     viewDisplay: function (element) {      } }); 

Once you have access to the element parameter, you can get the date by using element.start or element.visStart. If you're in the month view, start will provide you with the first day of the month that you're viewing, visStart will give you the first visible day of the month

Answer 2

This is how I did it:

$("#calendar").fullCalendar({  viewRender: function(view, element){         var currentdate = view.intervalStart;         $('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));     }      }); 

In month view, intervalStart will return the first day of the month being displayed on the FullCalendar, rather than the first visible day, which is usually a day near the end of the previous month.