[CLOSED] Calendar control, disallow drag&drop for certain Events

  1. #1

    [CLOSED] Calendar control, disallow drag&drop for certain Events

    Hello,
    we would like to extend the "calendar" control to avoid drag&drop for some given events applying our own logic.

    The issue is that we're not allowed to "cancel" any drag&drop event, but we only get notified about the event.

    We're thinking about extending the getDragData() of the DragZone for the calendar in order to publish a listener that permits us to "cancel" the event based on the rules we need.

    Could you please advise if we're doing it right, or if the control does have another way to implement the same behavior.

    Thank you for help,
    Cheers
    Last edited by Daniil; Jan 15, 2016 at 10:18 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Your idea might be good, but another point to add the event cancelling would be when dropping. In other words, the user would be able to drag the item like any other, but when dropping, it will not go to the dropped place. And you can set a message (for example) to tell the user he didn't have permission to move the entry around.

            Ext.define('Ext.calendar.view.AbstractCalendar', {
                override: 'Ext.calendar.view.AbstractCalendar',
                onEventDrop: function (rec, dt) {
                    // Ignore drop if not permitted
                    if (rec.data.title == "Project due") {
                        return;
                    }
    
                    if (Ext.calendar.util.Date.compare(rec.data[Ext.calendar.data.EventMappings.StartDate.name], dt) === 0) {
                        // no changes
                        return;
                    }
                    var diff = dt.getTime() - rec.data[Ext.calendar.data.EventMappings.StartDate.name].getTime();
                    rec.set(Ext.calendar.data.EventMappings.StartDate.name, dt);
                    rec.set(Ext.calendar.data.EventMappings.EndDate.name, Ext.calendar.util.Date.add(rec.data[Ext.calendar.data.EventMappings.EndDate.name], { millis: diff }));
    
                    this.fireEvent('eventmove', this, rec);
                }
            });
    It seemed to work great with getDragData as well:
    Ext.define('Ext.calendar.dd.DayDragZone', {
                override: 'Ext.calendar.dd.DayDragZone',
                disableRangeSelect: true,
                getDragData: function (e) {
                    var startDateName = Ext.calendar.data.EventMappings.StartDate.name,
                        endDateName = Ext.calendar.data.EventMappings.EndDate.name,
                        t, p, rec;
    
                    t = e.getTarget(this.resizeSelector, 2, true);
    
                    if (t) {
                        p = t.parent(this.eventSelector);
                        rec = this.view.getEventRecordFromEl(p);
    
                        return {
                            type: 'eventresize',
                            ddel: p.dom,
                            eventStart: rec.get(startDateName),
                            eventEnd: rec.get(endDateName),
                            proxy: this.proxy
                        };
                    }
    
                    t = e.getTarget(this.eventSelector, 3);
                    if (t) {
                        rec = this.view.getEventRecordFromEl(t);
                        if (rec.data.title == "Project due") return null;
    
                        return {
                            type: 'eventdrag',
                            ddel: t,
                            eventStart: rec.get(startDateName),
                            eventEnd: rec.get(endDateName),
                            proxy: this.proxy
                        };
                    }
    
                    // If not dragging/resizing an event then we are dragging on
                    // the calendar to add a new event
                    if (!this.disableRangeSelect) {
                        t = this.view.getDayAt(e.getX(), e.getY());
                        if (t.el) {
                            return {
                                type: 'caldrag',
                                dayInfo: t,
                                proxy: this.proxy
                            };
                        }
                    };
                    return null;
                }
            });
    Both examples above will prevent from dragging the event if its title is 'Project due'.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Jul 21, 2015, 7:13 AM
  2. Replies: 1
    Last Post: Aug 26, 2013, 8:34 PM
  3. [CLOSED] [2.1] Ext:Calendar, Disable Drag & Drop
    By FVNoel in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 16, 2013, 6:34 AM
  4. Replies: 3
    Last Post: Apr 05, 2013, 4:43 PM
  5. Drag Drop events in TreePanel
    By web4u in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 6:31 AM

Tags for this Thread

Posting Permissions