Sandra Sandra - 5 months ago 220
jQuery Question

fullcalendar agendaDay scroll to first event

i am using fullcalendar v2.4 and i know option scrollTime can be used to scroll to have the agendaDay scroll to a certain time, like this:

$('#calendarday').fullCalendar({
header: {
},
weekends: true, // show Saturdays and Sundays
defaultView: 'agendaDay',
events: entries,
scrollTime: "15:00:00",
});


now i want to scroll to first event of the day: that means i dynamically fetch the start-time of the first event in agendaDay with jquery:

var firstEventTime = $("div.fc-time:first> span:nth-child(1)").text() + ":00";


this finds the first div "fc-time" and then selects the start time in the interior span(which is in the format H:mm ).

but it does not work to put firstEventTime into the scroll

$('#calendarday').fullCalendar({
header: {
},
weekends: true, // show Saturdays and Sundays
defaultView: 'agendaDay',
events: entries,
scrollTime: firstEventTime,
});


is this possible at all?

Answer

I was able to scroll to the first event for a day in the agendaDay view by using the eventAfterAllRender option.

Note that this is looking at the internal elements generated by the plug-in, so if the author changes them in the next version, this approach may have to be updated.

I also took a shortcut and used the jQuery scrollTo plug-in from Ariel Flesler because I was already using it. You could achieve the same results with your own javascript if you prefer.

jQuery scrollTo plug-in URL

eventAfterAllRender: function(view){
    if('agendaDay'===view.name){
            if($('.fc-time-grid-event').length>0){
                var renderedEvents = $('div.fc-event-container a');
                var firstEventOffsetTop = renderedEvents&&renderedEvents.length>0?renderedEvents[0].offsetTop:0;
                $('div.fc-scroller').scrollTo(firstEventOffsetTop+'px');
            }
        }            
    },