[OPEN] [#1221] [3.2.1] [FEATURE] Disable rangeSelect on Calendar

  1. #1

    [OPEN] [#1221] [3.2.1] [FEATURE] Disable rangeSelect on Calendar

    Hello,
    is it possible to disable the rangeSelect-mechanism of the calendarpanel? I tried my best but I couldn't figure out how to disable it, so that when I click on a cell in the calendar there is no pop up an no selection on dragging...

    Regards,
    Göki
  2. #2
    Hello Göki! Welcome to Ext.NET forums!

    You can use EnableDD="false" on the month/day/week views to disable the time interval selection and remove the event listeners for DayClick (and maybe EventClick) that they will no longer be triggering.

    Setting a Handler="return false;" to the day/event click events can also prevent any default action if there is one.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    EnableDD

    This would work if I dont needed drag&drop at all. But I only dont need the rangeSelect method.
  4. #4
    To disable just the RangeSelect for either/both inter-day or intra-day selections you should use the following override on your code:

    Ext.define('Ext.calendar.dd.DragZone', {
        override: 'Ext.calendar.dd.DragZone',
        disableRangeSelect: true,
        getDragData: function (e) {
            // Check whether we are dragging on an event first
            var t = e.getTarget(this.eventSelector, 3);
            if (t) {
                var rec = this.view.getEventRecordFromEl(t);
                return {
                    type: 'eventdrag',
                    ddel: t,
                    eventStart: rec.data[Ext.calendar.data.EventMappings.StartDate.name],
                    eventEnd: rec.data[Ext.calendar.data.EventMappings.EndDate.name],
                    proxy: this.proxy
                };
            }
    
            // If not dragging 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',
                        start: t.date,
                        proxy: this.proxy
                    };
                }
            };
            return null;
        }
    });
    
    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);
                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;
        }
    });
    This will add a 'disableRangeSelect' option on the JavaScript side, default as true, to the month (first override) and week and day (second override).

    I hope this helps!
    Otherwise, the calendar panel does not provide a means
    Fabrício Murta
    Developer & Support Expert
  5. #5

    Thanks

    Thanks Fabricio,
    that did it!! Thanks for the help!
  6. #6
    Glad it helped! As most part is done for this, I've created a feature request issue in our issue tracker under #1221. It is not high priority over bugs, but we'll keep an eye on making this option permanent on Ext.NET for next releases if the feature is appreciated by our user base.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 17
    Last Post: Apr 27, 2016, 12:06 AM
  2. [CLOSED] v.3 Enable/Disable Grid Grouping Feature
    By omazlov in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: May 19, 2015, 11:48 AM
  3. Replies: 4
    Last Post: Nov 03, 2014, 5:24 PM
  4. Replies: 11
    Last Post: Jun 13, 2014, 11:05 AM
  5. [OPEN] [#48] GridPanel - Feature Request
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 17, 2012, 1:20 AM

Tags for this Thread

Posting Permissions