[CLOSED] Need help to Customize Calendar Interval ,Dragging and resizing

[mohan.bizbites]

Hi

I Created CalendarPanel by Ext.net 3.0.
There I override DayBody,DayView,Month View script methods,and also change interval(10Min).
While displaying Day View and Week View,calendar displays with 10Min Interval,but
when i dragging to create an event,it displays default Interval
here im not overriding the dragzone and dropzone.

I use Following Code to enable custom Interval while draging and resizing also in ext 1.0

if(Ext && Ext.calendar && Ext.calendar.DayViewDropZone)
{
    Ext.calendar.DayViewDropZone.override({
        
        onNodeOver: function(n, dd, e, data) {
            var dt,
                box,
                endDt,
                text = this.createText,
                curr,
                start,
                end,
                evtEl,
                dayCol;
                
            var interval = (this.view.interval||60) > 60 ? 60 : ((this.view.interval||60) < 10 ? 10 : (this.view.interval||60));
            interval = Math.round(interval / 10) * 10;
            
            if (data.type == 'caldrag') {
                if (!this.dragStartMarker) {
                    // Since the container can scroll, this gets a little tricky.
                    // There is no el in the DOM that we can measure by default since
                    // the box is simply calculated from the original drag start (as opposed
                    // to dragging or resizing the event where the orig event box is present).
                    // To work around this we add a placeholder el into the DOM and give it
                    // the original starting time's box so that we can grab its updated
                    // box measurements as the underlying container scrolls up or down.
                    // This placeholder is removed in onNodeDrop.
                    this.dragStartMarker = n.el.parent().createChild({
                        style: 'position:absolute;'
                    });
                    this.dragStartMarker.setBox(n.timeBox);
                    this.dragCreateDt = n.date;
                }
                box = this.dragStartMarker.getBox();
                box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;

                if (e.xy[1] < box.y) {
                    box.height += n.timeBox.height;
                    box.y = box.y - box.height + n.timeBox.height;
                    endDt = this.dragCreateDt.add(Date.MINUTE, interval / 2);
                }
                else {
                    n.date = n.date.add(Date.MINUTE, interval / 2);
                }
                this.shim(this.dragCreateDt, box);

                curr = Ext.calendar.Date.copyTime(n.date, this.dragCreateDt);
                this.dragStartDate = Ext.calendar.Date.min(this.dragCreateDt, curr);
                this.dragEndDate = endDt || Ext.calendar.Date.max(this.dragCreateDt, curr);

                dt = this.dragStartDate.format('g:ia-') + this.dragEndDate.format('g:ia');
            }
            else {
                evtEl = Ext.get(data.ddel);
                dayCol = evtEl.parent().parent();
                box = evtEl.getBox();

                box.width = dayCol.getWidth();

                if (data.type == 'eventdrag') {
                    if (this.dragOffset === undefined) {
                        this.dragOffset = n.timeBox.y - box.y;
                        box.y = n.timeBox.y - this.dragOffset;
                    }
                    else {
                        box.y = n.timeBox.y;
                    }
                    dt = n.date.format('n/j g:ia');
                    box.x = n.el.getLeft();

                    this.shim(n.date, box);
                    text = this.moveText;
                }
                if (data.type == 'eventresize') {
                    if (!this.resizeDt) {
                        this.resizeDt = n.date;
                    }
                    box.x = dayCol.getLeft();
                    box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
                    if (e.xy[1] < box.y) {
                        box.y -= box.height;
                    }
                    else {
                        n.date = n.date.add(Date.MINUTE, interval / 2);
                    }
                    this.shim(this.resizeDt, box);

                    curr = Ext.calendar.Date.copyTime(n.date, this.resizeDt);
                    start = Ext.calendar.Date.min(data.eventStart, curr);
                    end = Ext.calendar.Date.max(data.eventStart, curr);

                    data.resizeDates = {
                        StartDate: start,
                        EndDate: end
                    };
                    dt = start.format('g:ia-') + end.format('g:ia');
                    text = this.resizeText;
                }
            }

            data.proxy.updateMsg(String.format(text, dt));
            return this.dropAllowed;
        }
    });
}

Plz help me asap
Thanks
Mohan

[Daniil]

Hello @mohan.bizbites,

It sounds like quite a challenging task.

Do you mean that you were able to get it working as needed with Ext.NET v1, right?

[mohan.bizbites]

Hi Daniil,
Thanks for Your reply

Here the code which i used in Ext.Net 1.0

if(Ext && Ext.calendar && Ext.calendar.DayViewDropZone)
{
    Ext.calendar.DayViewDropZone.override({
        
        onNodeOver: function(n, dd, e, data) {
            var dt,
                box,
                endDt,
                text = this.createText,
                curr,
                start,
                end,
                evtEl,
                dayCol;
                
            var interval = (this.view.interval||60) > 60 ? 60 : ((this.view.interval||60) < 10 ? 10 : (this.view.interval||60));
            interval = Math.round(interval / 10) * 10;
            
            if (data.type == 'caldrag') {
                if (!this.dragStartMarker) {
                    // Since the container can scroll, this gets a little tricky.
                    // There is no el in the DOM that we can measure by default since
                    // the box is simply calculated from the original drag start (as opposed
                    // to dragging or resizing the event where the orig event box is present).
                    // To work around this we add a placeholder el into the DOM and give it
                    // the original starting time's box so that we can grab its updated
                    // box measurements as the underlying container scrolls up or down.
                    // This placeholder is removed in onNodeDrop.
                    this.dragStartMarker = n.el.parent().createChild({
                        style: 'position:absolute;'
                    });
                    this.dragStartMarker.setBox(n.timeBox);
                    this.dragCreateDt = n.date;
                }
                box = this.dragStartMarker.getBox();
                box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;


                if (e.xy[1] < box.y) {
                    box.height += n.timeBox.height;
                    box.y = box.y - box.height + n.timeBox.height;
                    endDt = this.dragCreateDt.add(Date.MINUTE, interval / 2);
                }
                else {
                    n.date = n.date.add(Date.MINUTE, interval / 2);
                }
                this.shim(this.dragCreateDt, box);


                curr = Ext.calendar.Date.copyTime(n.date, this.dragCreateDt);
                this.dragStartDate = Ext.calendar.Date.min(this.dragCreateDt, curr);
                this.dragEndDate = endDt || Ext.calendar.Date.max(this.dragCreateDt, curr);


                dt = this.dragStartDate.format('g:ia-') + this.dragEndDate.format('g:ia');
            }
            else {
                evtEl = Ext.get(data.ddel);
                dayCol = evtEl.parent().parent();
                box = evtEl.getBox();


                box.width = dayCol.getWidth();


                if (data.type == 'eventdrag') {
                    if (this.dragOffset === undefined) {
                        this.dragOffset = n.timeBox.y - box.y;
                        box.y = n.timeBox.y - this.dragOffset;
                    }
                    else {
                        box.y = n.timeBox.y;
                    }
                    dt = n.date.format('n/j g:ia');
                    box.x = n.el.getLeft();


                    this.shim(n.date, box);
                    text = this.moveText;
                }
                if (data.type == 'eventresize') {
                    if (!this.resizeDt) {
                        this.resizeDt = n.date;
                    }
                    box.x = dayCol.getLeft();
                    box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
                    if (e.xy[1] < box.y) {
                        box.y -= box.height;
                    }
                    else {
                        n.date = n.date.add(Date.MINUTE, interval / 2);
                    }
                    this.shim(this.resizeDt, box);


                    curr = Ext.calendar.Date.copyTime(n.date, this.resizeDt);
                    start = Ext.calendar.Date.min(data.eventStart, curr);
                    end = Ext.calendar.Date.max(data.eventStart, curr);


                    data.resizeDates = {
                        StartDate: start,
                        EndDate: end
                    };
                    dt = start.format('g:ia-') + end.format('g:ia');
                    text = this.resizeText;
                }
            }


            data.proxy.updateMsg(String.format(text, dt));
            return this.dropAllowed;
        }
    });
}

Regards
Mohan.

[Daniil]

Thanks. I suggest to compare your onNodeOver override with the original version in Ext.NET v3. It can be found here.
http://svn.ext.net/premium/trunk/Ext...DayDropZone.js

Seeing the difference, you should be able to adjust your code to get it working with v3.

[mohan.bizbites]

Hi Daniil,
Thank you for replying us.
And I'm overriding the DayBodyTemplate also to customize the interval.It displays proper interval(10Mins) in day and week views.But when i drag(for new event) it gives 5mins interval for single box,from next box it gives 30 mins interval.see attachment to understand.

//Custom Interval 10 Mins
Ext.calendar.template.DayBody.override({
    applyTemplate: function (o) {
        this.today = Ext.calendar.util.Date.today();
        this.dayCount = this.dayCount || 1;


        var i = 0,
            days = [],
            dt = Ext.Date.clone(o.viewStart),
            times = [];


        for (; i < this.dayCount; i++) {
            days[i] = Ext.calendar.util.Date.add(dt, { days: i });
        }


        // use a fixed DST-safe date so times don't get skipped on DST boundaries
        dt = Ext.Date.clearTime(new Date('5/26/1972'));
        //dt = Ext.calendar.util.Date.add(dt, { hours: 0 });  // start 8 morning
        for (i = 0; i < 24 * 6; i++) {                                   //  from 8 to 21 =13 hourse =26 half hours
            //times.push(Ext.Date.format(dt, 'ga'));
            times.push(Ext.Date.format(dt, 'H:i'));
            dt = Ext.calendar.util.Date.add(dt, { minutes: 10 }); // step 0.5 hours = 30 minute
        }


        return this.applyOut({
            days: days,
            dayCount: days.length,
            times: times
        }, []).join('');
    },


    getEventPositionOffsets: function () {
        return {
            top: 0,
            height: -1
        };
    }});

[Daniil]

Thank you for the clarification.

Please clarify have you tried the suggestion in the previous post?