I'm using the Scheduler with a 1 year view. So I can see every day from Jan 1 to Dec 31 by scrolling horizontally.

Minor issue is that the horizontal scroll is always at the initial position (all the way left) so it always display Jan 1. Is there a way for it to scroll to the current date or month on the initial load?

I was looking into scrolling through it with jQuery by finding the current date and ScrollLeft to the element. But it seems that the header is separate from the scrolling container so not sure how that would work.

I'm using the Scheduler with a 1 year view. So I can see every day from Jan 1 to Dec 31 by scrolling horizontally.

Minor issue is that the horizontal scroll is always at the initial position (all the way left) so it always display Jan 1. Is there a way for it to scroll to the current date or month on the initial load?

I was looking into scrolling through it with jQuery by finding the current date and ScrollLeft to the element. But it seems that the header is separate from the scrolling container so not sure how that would work.

• javascript
• jquery
• scroll
• fullcalendar

Share Improve this question Follow edited Feb 27, 2017 at 10:53 Jack asked Apr 23, 2016 at 12:24 JackJack 5,7681212 gold badges5151 silver badges7575 bronze badges 3

• Did you ever solve this problem? – fr0sty Commented Feb 14, 2017 at 11:07
• @fr0sty Yea, I just wrote some calculation to get the offset and set it. Let me post it. – Jack Commented Feb 14, 2017 at 19:50
• @fr0sty I posted the answer. Seems like someone else found another solution so you can try that too. – Jack Commented Feb 17, 2017 at 6:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I ran into the same problem just yesterday and found the following solution (working with fullCalendar 2.6.1):

// Scroll the calendar to a specific event
scrollToEvent: function(event) {
    // Get the "scroller" divs for header and content
    var headerScroller = $('.fc-time-area.fc-widget-header > .fc-scrollpane > div');
    var contentScroller = $('.fc-time-area.fc-widget-content > .fc-scrollpane > div');

    // Get the destination date
    // For some reason event.start.format('YYYY-MM-DDTHH:mm:ss') will be formatted 
    // as 'YYYY-MM-DDAHH:mm:ss', hence the "replace" hack.
    // Maybe I have to dig more into moment js...
    var dateSelector = 'th[data-date="' + event.start.format('YYYY-MM-DDTHH:mm:ss').replace('A', 'T') + '"]';
    var date = $(dateSelector).last()[0];

    // Scroll to date
    headerScroller.scrollLeft(date.offsetLeft);
    contentScroller.scrollLeft(date.offsetLeft);

    // To scroll vertically to a specific resource (if any)...
    // Get the destination resource
    var resourceSelector = 'tr[data-resource-id="' + event.resourceId + '"]';
    var resource = $(resourceSelector).last()[0];

    // Scroll to resource
    contentScroller.scrollTop(resource.offsetTop);
}

I have called the above function from "eventAfterAllRender" function of FullCalendar, using a flag to check for the first rendering only. Don't know if there's a better way...

Simpler code to just scroll to date:

scrollToDate: function(date) {
    // Get the "scroller" (no need to distinguish between header and content so get both)
    var scroller = $('.fc-time-area > .fc-scrollpane > div');

    // Get the destination date
    var selector = 'th[data-date="' + date.format('YYYY-MM-DDTHH:mm:ss') + '"]';
    var date = $(selector).last()[0];

    // Scroll to date
    scroller.scrollLeft(date.offsetLeft);
}

Hope this helps (this is my first post on Stack Overflow).

For version 2.6.1

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

This is the main part in version 2.6.1

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

In Version 3.0+ the structure of the HTML is different. The element to scroll on has changed.

$('.fc-body .fc-time-area .fc-scroller-clip .fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

Can probably reduce it down to

$('.fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)