Fullcalendar Scheduler Grab and drag horizontal - fullcalendar

Question

I'm trying to grab and drag the scroller canvas horizontally. I can scroll left & right with my mouse (Apple Magic Mouse), but have not been able to figure out how to implement the grab and drag left & right.
I tried to follow the instructions on the link below, but the pageX & clientX seems to cancel out bringing me straight to the beginning.
$('.fc-scroller-canvas').on('mousedown', function(e) {
console.log('pageX:::', e.pageX)
$('.fc-scroller-canvas').on('mousemove', function(evt) {
console.log('clientX:::', evt.clientX)
$('.fc-scroller').stop(false, true).animate({
scrollLeft: e.pageX - evt.clientX
});
});
});
$('.fc-scroller-canvas').on('mouseup', function() {
$('.fc-scroller-canvas').off('mousemove');
});
jQuery Grab Content and Scroll page horizontally
Any clue? Can someone help?

Answer 1

Thanks #hman! Code worked like a charm!
I've made some modifications to mine so the scrolling activated when clicking and dragging on the .fc-time
let pageX_Drag, pageY_Drag;
let disableDragSelector = '.fc-event,.some-other-class-here-maybe';
$('.fc-time-area').on('mousedown', '.fc-scroller', function (e) {
// prevent drag from happening if we click on certain things
let dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
if (dragDisabledElms.length) return;
pageX_Drag = e.pageX;
pageY_Drag = e.pageY;
$(window).off("mousemove", __mouseMove_Drag);
$(window).on("mousemove", __mouseMove_Drag);
});
$(window).on('mouseup', __mouseUp_Drag);
function __mouseUp_Drag() {
$(window).off("mousemove", __mouseMove_Drag);
}
function __mouseMove_Drag(evt) {
let offsetX = pageX_Drag - evt.pageX;
let offsetY = pageY_Drag - evt.pageY;
$('.fc-scroller', '.fc-time-area').each(function () {
let scroller = $(this);
let newX = scroller.scrollLeft() + offsetX;
let newY = scroller.scrollTop() + offsetY;
scroller.scrollLeft(newX);
scroller.scrollTop(newY);
});
pageX_Drag = evt.pageX;
pageY_Drag = evt.pageY;
}

Answer 2

Here is what I did to allow panning around the calendar both vertically and horizontally. You should be able to easily modify it to only work horizontally if that's what you want. I've only tested this with timeline view but it should work with all of the views.
var pageX_Drag, pageY_Drag;
var disableDragSelector = '.fc-event,.some-other-class-here-maybe';
calendarElement.on('mousedown', '.fc-scroller', function (e)
{
// prevent drag from happening if we click on certain things
var dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
if (dragDisabledElms.length) return;
pageX_Drag = e.pageX;
pageY_Drag = e.pageY;
$(window).off("mousemove", __mouseMove_Drag);
$(window).on("mousemove", __mouseMove_Drag);
});
$(window).on('mouseup', __mouseUp_Drag);
function __mouseUp_Drag()
{
$(window).off("mousemove", __mouseMove_Drag);
}
function __mouseMove_Drag(evt)
{
var offsetX = pageX_Drag - evt.pageX;
var offsetY = pageY_Drag - evt.pageY;
$('.fc-scroller', calendarElement).each(function ()
{
var scroller = $(this);
var newX = scroller.scrollLeft() + offsetX;
var newY = scroller.scrollTop() + offsetY;
scroller.scrollLeft(newX);
scroller.scrollTop(newY);
});
pageX_Drag = evt.pageX;
pageY_Drag = evt.pageY;
}