false the edit window will not be
* shown). This event when fired from a view class is simply a notification that an event was
* clicked and has no default behavior.
- * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.view.AbstractCalendar} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was clicked on
+ * @param {HTMLNode} el The DOM node that was clicked on
+ */
+ /**
+ * @event eventdblclick
+ * Fires after the user double clicks on an event.
+ *NOTE: This event when fired from a view class is simply a notification that a double click on the element / element + * is detected by the framework and has no default behavior implemented. + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that was clicked on * @param {HTMLNode} el The DOM node that was clicked on @@ -419,7 +429,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @event rangeselect * Fires after the user drags on the calendar to select a range of dates/times in which to * create an event - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Object} dates An object containing the start (StartDate property) and end (EndDate * property) dates selected * @param {Function} callback A callback function that MUST be called after the event handling @@ -431,7 +441,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventover * Fires anytime the mouse is over an event element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that the cursor is over * @param {HTMLNode} el The DOM node that is being moused over @@ -439,7 +449,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventout * Fires anytime the mouse exits an event element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that the cursor exited * @param {HTMLNode} el The DOM node that was exited @@ -449,7 +459,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * Fires before the start date of the view changes, giving you an opportunity to save state or * anything else you may need to do prior to the UI view changing. This is a cancelable event, so * returning false from a handler will cancel both the view change and the setting of the start date. - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Date} startDate The current start date of the view (as explained in {@link #getStartDate} * @param {Date} newStartDate The new start date that will be set when the view changes * @param {Date} viewStart The first displayed date in the current view @@ -458,7 +468,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event dayclick * Fires after the user clicks within a day/week view container and not on an event element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Date} dt The date/time that was clicked on * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. * @param {Ext.Element} el The Element that was clicked on @@ -466,7 +476,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event datechange * Fires after the start date of the view changes - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Date} startDate The start date of the view (as explained in {@link #getStartDate} * @param {Date} viewStart The first displayed date in the view * @param {Date} viewEnd The last displayed date in the view @@ -475,14 +485,14 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @event beforeeventmove * Fires before an event element is dragged by the user and dropped in a new position. This is * a cancelable event, so returning false from a handler will cancel the move operation. - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that will be moved */ /** * @event eventmove * Fires after an event element is dragged by the user and dropped in a new position - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that was moved with * updated start and end dates @@ -490,19 +500,19 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event initdrag * Fires when a drag operation is initiated in the view - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this */ /** * @event dayover * Fires while the mouse is over a day element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Date} dt The date that is being moused over * @param {Ext.Element} el The day Element that is being moused over */ /** * @event dayout * Fires when the mouse exits a day element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Date} dt The date that is exited * @param {Ext.Element} el The day Element that is exited */ @@ -512,7 +522,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * resize operation is carried out. This is a cancelable event, so returning false from a * handler will cancel the resize operation. NOTE: This event is only fired * from views that support event resizing. - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that was resized * containing the updated start and end dates @@ -521,7 +531,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @event eventresize * Fires after the user drags the resize handle of an event and the resize operation is * complete. NOTE: This event is only fired from views that support event resizing. - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The * {@link Extensible.calendar.data.EventModel record} for the event that was resized * containing the updated start and end dates @@ -537,7 +547,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * * Note that only Server proxy and subclasses (including Ajax proxy) will raise this event. * - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Object} response The raw response object returned from the server * @param {Ext.data.Operation} operation The operation that was processed * @since 1.6.0 @@ -653,7 +663,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { fn: function(c) { // Relay view events so that app code only has to handle them in one place. // These events require no special handling by the calendar panel. - this.relayEvents(c, ['eventsrendered', 'eventclick', 'dayclick', 'eventover', 'eventout', + this.relayEvents(c, ['eventsrendered', 'eventclick', 'eventdblclick', 'dayclick', 'eventover', 'eventout', 'beforedatechange', 'datechange', 'rangeselect', 'beforeeventcopy', 'eventcopy', 'beforeeventmove', 'eventmove', 'initdrag', 'dayover', 'dayout', 'beforeeventresize', 'eventresize', 'eventadd', 'eventupdate', 'beforeeventdelete', 'eventdelete', diff --git a/src/calendar/view/AbstractCalendar.js b/src/calendar/view/AbstractCalendar.js index ca394310..13e54921 100644 --- a/src/calendar/view/AbstractCalendar.js +++ b/src/calendar/view/AbstractCalendar.js @@ -15,6 +15,7 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', { requires: [ 'Ext.CompositeElement', + 'Ext.EventObject', 'Extensible.calendar.form.EventDetails', 'Extensible.calendar.form.EventWindow', 'Extensible.calendar.menu.Event', @@ -23,6 +24,7 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', { 'Extensible.form.recurrence.RangeEditWindow' ], + /** * @cfg {Ext.data.Store} eventStore * The {@link Ext.data.Store store} which is bound to this calendar and contains {@link Extensible.calendar.data.EventModel EventRecords}. @@ -372,6 +374,16 @@ viewConfig: { * @param {Extensible.calendar.data.EventModel} rec The {@link Extensible.calendar.data.EventModel record} for the event that the cursor is over * @param {HTMLNode} el The DOM node that is being moused over */ + eventdblclick: true, + /** + * @event eventdblclick + * Fires after the user double clicks on an event element. This could be useful for + * the user to provide a different functionality for double click. + * This event is a passthrough and doesn't provide any functionality. + * @param {Extensible.calendar.view.AbstractCalendar} this + * @param {Extensible.calendar.data.EventModel} rec The {@link Extensible.calendar.data.EventModel record} for the event that was clicked on + * @param {HTMLNode} el The DOM node that was clicked on + */ eventover: true, /** * @event eventout @@ -570,10 +582,14 @@ viewConfig: { this.on('resize', this.onResize, this); + Ext.getBody().on('keyup', this.onKeyUp, this); + Ext.getBody().on('dblclick', this.onDblClick, this); + this.el.on({ 'mouseover': this.onMouseOver, 'mouseout': this.onMouseOut, 'click': this.onClick, +// 'dblclick': this.onDblClick, //'resize': this.onResize, scope: this }); @@ -1879,6 +1895,7 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { me.eventMenu.showForEvent(me.getEventRecordFromEl(el), el, xy); me.menuActive = true; + }, // private @@ -2077,6 +2094,7 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { me.menuActive = false; return true; } + if (el) { var id = me.getEventIdFromEl(el), rec = me.getEventRecord(id); @@ -2090,6 +2108,23 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } }, + /* + * Double click handling. + */ + onDblClick: function(e, t) { + var me = this, + el = e.getTarget(me.eventSelector, 5); + + if (el) { + var id = me.getEventIdFromEl(el), + rec = me.getEventRecord(id); + + me.fireEvent('eventdblclick', me, rec, el); + } + + return true; + }, + // private onMouseOver: function(e, t) { if (this.trackMouseOver !== false && (this.dragZone === undefined || !this.dragZone.dragging)) { @@ -2108,6 +2143,13 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } }, + // private + onKeyUp: function(e, t) { + if (e.getCharCode( ) === Ext.EventObject.ESC) { + this.menuActive = false; + } + }, + // private handleEventMouseEvent: function(e, t, type) { var el = e.getTarget(this.eventSelector, this.eventSelectorDepth, true); diff --git a/src/calendar/view/Month.js b/src/calendar/view/Month.js index 4055c7a9..aab462d1 100644 --- a/src/calendar/view/Month.js +++ b/src/calendar/view/Month.js @@ -325,6 +325,9 @@ Ext.define('Extensible.calendar.view.Month', { if(this.detailPanel) { this.detailPanel.hide(); } + + this.maxEventsPerDay = this.getMaxEventsPerDay(); + this.callParent(arguments); if(this.showTime !== false) {