Drag & Select Events - weird behavior

[JaySunSyn]

Thanks for this element!!

Do you know by any chance how to fix drag and select events?

e.g. with these options:

          header: false,
          selectable: true,
          select: function(start, end) {
            debugger;
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
              eventData = {
                title: title,
                start: start,
                end: end
              };
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
          }.bind(this),
          editable: true,
          eventLimit: true, // allow "more" link when too many events

          events: 
            [
              { title: 'Discover fullcalendar-calendar', start: moment() },
              { title: 'Install fullcalendar-calendar', start: moment().add(2, 'day') },
              { title: 'Play around with fullcalendar-calendar', start: moment().add(4, 'days'), end: moment().add(5, 'days') },
              { title: 'Star fullcalendar-calendar on Github', start: moment().add(7, 'days'), end: moment().add(7, 'days').add(25, 'minutes') }
            ]
          }

[sorin-davidoi]

Hi @JaySunSyn,

Managed to take a look today. The issue seems to boil down to how jQuery handles ShadowDom. The exact issue is discussed at length here. They seem to have fixed it in version 3.0 (released 6 days ago), but FullCalendar does not support it.

There is an issue opened for adding jQuery 3 support. As a workaround, you could patch jQuery (the problem is the contains function, which reports that all elements are disconnected when inside ShadowDom):

jQuery.fn.extend( {
    offset: function( options ) {
        if ( arguments.length ) {
            return options === undefined ?
                this :
                this.each( function( i ) {
                    jQuery.offset.setOffset( this, options, i );
                } );
        }

        var docElem, win,
            elem = this[ 0 ],
            box = { top: 0, left: 0 },
            doc = elem && elem.ownerDocument;

        if ( !doc ) {
            return;
        }

        docElem = doc.documentElement;

        // Make sure it's not a disconnected DOM node
-       if ( !jQuery.contains( docElem, elem ) ) {
-           return box;
-       }

        box = elem.getBoundingClientRect();
        win = getWindow( doc );
        return {
            top: box.top + win.pageYOffset - docElem.clientTop,
            left: box.left + win.pageXOffset - docElem.clientLeft
        };
    },

[sorin-davidoi]

Or you could just use Shady Dom.

[JaySunSyn]

@sorin-davidoi Thanks a ton for the answer and the patch. The patch works like a charm!