View Full Version : Disable Calendar Day/Week View Event Resize

11 Aug 2010, 10:27 AM
Is there any way or a specific property to disable resizing in the 3.3 beta calendar for Day/Week views? I looked at the 3.3 docs and didn't see anything, any help is much appreciated!


11 Aug 2010, 1:18 PM
You mean that you want read-only events in general, or you just don't want them to be resizable (even though they would still be editable)? There's nothing in there currently for either of those options, although it should be fairly straightforward to add yourself. There are many possibilities for how the calendar could be configured, but as a sample, a lot of these details are not included.

11 Aug 2010, 1:42 PM
My application sends text messages out, which only requires a start date/time... basically in my DB the start and end date are the same and I've modified the DateRangeField.js file to only show start date and time. Since this is the requirement of my application I don't want them to be able to resize the event, it would modify the end date/time which won't work for my application

11 Aug 2010, 2:04 PM
Gotcha. Unfortunately adding more config options is a bit out of scope for the current sample, but you can remove the functionality pretty easily. You can simply remove the "ext-evt-rsz" element from the markup like so (note the 2 commented out lines):

Ext.override(Ext.calendar.DayBodyView, {
getEventTemplate : function(){
this.eventTpl = !(Ext.isIE || Ext.isOpera) ?
new Ext.XTemplate(
'<div id="{_elId}" class="{_selectorCls} {_colorCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
'<div class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',
//'<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&nbsp;</div></div>', //remove this line
: new Ext.XTemplate(
'<div id="{_elId}" class="ext-cal-evt {_selectorCls} {_colorCls}-x" style="left: {_left}%; width: {_width}%; top: {_top}px;">',
'<div class="ext-cal-evb">&nbsp;</div>',
'<dl style="height: {_height}px;" class="ext-cal-evdm">',
'<dd class="ext-evt-bd">',
//'<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&nbsp;</div></div>', // remove this line
'<div class="ext-cal-evb">&nbsp;</div>',
return this.eventTpl;

Unfortunately it's a bit of a verbose override, but it should do the trick. It's something I'll put on my list for the Pro release as a config option -- thanks for the feedback.

12 Aug 2010, 9:16 AM
Awesome, thanks Brian your the man! I'll be working with the calendar pretty heavily for another 1-2 weeks, I'll shoot back any more pertinent feedback / questions if I come across them. Thanks again!

29 Jun 2011, 6:56 AM
I was reading through this thread, and I was wondering, is there a way to disable the dragging of just certain events on the various views of the calendar?