How can I scroll content horizontally with fullcalendar scheduler? - fullcalendar

Question

Using a heavily customized version of the scheduler, I'm getting reports that users are having trouble figuring out how to scroll horizontally. I imagine it's because the scrollbar is at the bottom of the schedule and on Mac OS, it's potentially hidden if the user has a trackpad.
My schedule functions similar to this one minus the vertical scroll. If you're on an Apple laptop and only using trackpad it's likely you won't see a scrollbar at all. If the scroll bar is visible, it's buried under the page's fold.
Ideally, I'd have arrows near the times so users could click left or right and that view would scroll left or right. I've been unable to figure out a way to programmatically call $.animate({ scrollLeft: ... }) on any piece of the scheduler and scroll both the contents where events are and the header where times are.
It looks like I can get and set the position of at least the timeline with $( '.fc-time-area .fc-content table' ).offset() but it won't move the contents of the schedule itself.
Any idea how I can move the schedule content (events) and the timeline in sync with each other?
Bonus internet points if you can tell me how I could ensure that I'd only move the container to it's end. (i.e. If the schedule for that day ends at 10pm, don't allow me to change the offset to something beyond 10pm)

Answer 1

Any idea how I can move the schedule content (events) and the timeline in sync with each other?
To get to the beginning of the view:
$('.fc-body .fc-time-area .fc-scroller').scrollLeft(0);
And for scrolling to the end of the view, you can do something as follows:
var scroller = $('.fc-body .fc-time-area .fc-scroller');
var scrollWidth = scroller[0].scrollWidth;
scroller.scrollLeft(scrollWidth);