Mar 25, 2015, 2:36 PM
Need help Calendar Customization
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
Plz help me asap
Thanks
Murali
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
Murali