dragScroll event dragging should scroll document scrollbars

Originally reported on Google Code with ID 2496

Can't drag and drop event from first date cell to last date cell on one time pick and
drop action(scroll is now going down respect to event draging)

same issue for day and week view

Reported by digvijaysinh.jhala7 on 2015-04-30 11:15:29

---

- _Attachment: [fullcalendar_issue.jpg](https://storage.googleapis.com/google-code-attachments/fullcalendar/issue-2496/comment-0/fullcalendar_issue.jpg)_

Imported with 1 stars.

[arshaw]

i understand the need for this. dragScroll should do this.

the reason the document is NOT getting scrolled is that the container div for the view has overflow:hidden (or auto?) and is considered the most immediate scroll parent, and auto-scrolling all the way up the chain of parents beyond the first scroll parent is not supported.

[JeroenSfdc]

@arshaw maybe you have a suggestion… we’re using v4 today. We show the FC inside a LWC in Salesforce. That all works brilliant. Dragging and re-sizing is working (we use the week view). We have slotDuration set to 15 minutus. And although dragScroll is enabled it doesn’t work. I had look at the parent div and set overflow to different values to no avail.

https://watch.screencastify.com/v/sWb7L8nKSN9eWBY2L6On

 this._calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ["dayGrid", "timeGrid", "list","interaction", "rrule"]
            , views: {
                listDay: { buttonText: "list day" },
                listWeek: { buttonText: "list week" },
                listMonth: { buttonText: "list month" },
                timeGridWeek: { buttonText: "week time" },
                timeGridDay: { buttonText: "day time" },
                dayGridMonth: { buttonText: "month" },
                dayGridWeek: { buttonText: "week" },
                dayGridDay: { buttonText: "day" }
            }
            , locale: 'nl-BE'
            , firstDay: 1 // first day of the week = Monday
            , allDaySlot: false
            , header: false
            , defaultView: 'timeGridWeek'
            //, height: 600
            , minTime: '07:00:00'
            , maxTime: '19:00:00'
            , weekends: false
            , noEventsMessage: 'Geen data'
            , fixedWeekCount: false
            , showNonCurrentDates: false
            , eventStartEditable: true
            , eventResizableFromStart: true
            , eventDurationEditable: true
            , dragScroll: true
            , slotDuration: '00:15:00'
            , slotLabelFormat: {
                hour: '2-digit',
                minute: '2-digit',
                omitZeroMinute: false,
            }
            , eventTimeFormat: {
                hour: "2-digit",
                minute: "2-digit",
                hour12: false
            }
            , eventRender: info => {
                this.eventRender(info);
            }
            , eventClick: info => {
                this._navigateLightningRecordPage(info);
            }
            //, eventMouseEnter: info => {console.log("mouse enter", info)}     leaving as placeholder
            , eventResize: function(info) {
                alert(info.event.title + " end is now " + info.event.end.toISOString());

                if (!confirm("is this okay?")) {
                    info.revert();
                }
            }
            , dateClick:info => {console.log("date click", info)}
            , eventSources: [
                {
                    events: this.eventSourceHandler.bind(this),
                    id: "event-sources-id"
                },
            ],
        });
        this._calendar.render();
    }

The LWC template:

<template>

    <lightning-spinner if:true={_showSpinner} alternative-text="Loading" size="medium"></lightning-spinner>
    <c-error-panel if:true={_errors}  errors={_errors} friendly-message={LABELS.LBL_ERROR_LOADING_CALENDAR}></c-error-panel>

    <template if:false={_errors}>
        <div class="slds-grid slds-wrap"
             style="background:#ffffff; padding-bottom:0.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.5rem;overflow-y:auto">

            <div class="slds-col slds-size_12-of-12">
                <div class="slds-float_right">
                    <lightning-button-icon class="slds-p-horizontal_xxx-small" icon-name="utility:refresh" title="Ververs" onclick={_handleRefresh}></lightning-button-icon>
                    <lightning-button-icon class="slds-p-horizontal_xxx-small" icon-name="utility:date_time" title="Vandaag" onclick={_handleToday}></lightning-button-icon>
                    <lightning-button-icon class="slds-p-horizontal_xxx-small" icon-name="utility:jump_to_left" title="Vorige" onclick={_handlePrevious}></lightning-button-icon>
                    <lightning-button-icon class="slds-p-horizontal_xxx-small" icon-name="utility:jump_to_right" title="Volgende" onclick={_handleNext}></lightning-button-icon>
                </div>
            </div>

        </div>
        <div style="background:#ffffff;" class="slds-grid" >
           <!-- <div class="calendar" lwc:dom="manual" ontouchmove={handleScroll} onscroll={handleScroll}></div>-->
            <div class="calendar fullcalendar-container" lwc:dom="manual"></div>
        </div>
    </template>

</template>

Thanks so much!