This is the template used to render the all-day event container used in {@link Ext.calendar.DayView DayView} and + * {@link Ext.calendar.WeekView WeekView}. Internally the majority of the layout logic is deferred to an instance of + * {@link Ext.calendar.BoxLayoutTemplate}.
+ *This template is automatically bound to the underlying event store by the + * calendar components and expects records of type {@link Ext.calendar.EventRecord}.
+ *Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate} + * that internally creates an instance of this template along with a {@link Ext.calendar.DayBodyTemplate}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayHeaderTemplate = function(config){ + + Ext.apply(this, config); + + this.allDayTpl = new Ext.calendar.BoxLayoutTemplate(config); + this.allDayTpl.compile(); + + Ext.calendar.DayHeaderTemplate.superclass.constructor.call(this, + '| ', + ' | ', + ' | ', + ' |
This is the template used to render the scrolling body container used in {@link Ext.calendar.DayView DayView} and + * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the + * calendar components and expects records of type {@link Ext.calendar.EventRecord}.
+ *Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate} + * that internally creates an instance of this template along with a {@link Ext.calendar.DayHeaderTemplate}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayBodyTemplate = function(config){ + + Ext.apply(this, config); + + Ext.calendar.DayBodyTemplate.superclass.constructor.call(this, + '| ', + ' | ',
+ ' ',
+ ' ',
+ '',
+ ' ',
+ '',
+ '',
+ ' ',
+ ' | ',
+ '
| ',
+ ' ',
+ ' ',
+ '{.} ',
+ ' | ',
+ '',
+ ' ',
+ '',
+ ' ',
+ ' | ',
+ '
This template is automatically bound to the underlying event store by the + * calendar components and expects records of type {@link Ext.calendar.EventRecord}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayViewTemplate = function(config){ + + Ext.apply(this, config); + + this.headerTpl = new Ext.calendar.DayHeaderTemplate(config); + this.headerTpl.compile(); + + this.bodyTpl = new Ext.calendar.DayBodyTemplate(config); + this.bodyTpl.compile(); + + Ext.calendar.DayViewTemplate.superclass.constructor.call(this, + 'This is the template used to render calendar views based on small day boxes within a non-scrolling container (currently + * the {@link Ext.calendar.MonthView MonthView} and the all-day headers for {@link Ext.calendar.DayView DayView} and + * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the + * calendar components and expects records of type {@link Ext.calendar.EventRecord}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.BoxLayoutTemplate = function(config){ + + Ext.apply(this, config); + + var weekLinkTpl = this.showWeekLinks ? '| ', + ' |
{title} | ',
+ '
This is the template used to render the {@link Ext.calendar.MonthView MonthView}. Internally this class defers to an + * instance of {@link Ext.calerndar.BoxLayoutTemplate} to handle the inner layout rendering and adds containing elements around + * that to form the month view.
+ *This template is automatically bound to the underlying event store by the + * calendar components and expects records of type {@link Ext.calendar.EventRecord}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.MonthViewTemplate = function(config){ + + Ext.apply(this, config); + + this.weekTpl = new Ext.calendar.BoxLayoutTemplate(config); + this.weekTpl.compile(); + + var weekLinkTpl = this.showWeekLinks ? '| {.:date("D")} | ', + '
|---|
Provides automatic scrolling of overflow regions in the page during drag operations.
+ *The ScrollManager configs will be used as the defaults for any scroll container registered with it, + * but you can also override most of the configs per scroll container by adding a + * ddScrollConfig object to the target element that contains these properties: {@link #hthresh}, + * {@link #vthresh}, {@link #increment} and {@link #frequency}. Example usage: + *
+var el = Ext.get('scroll-ct');
+el.ddScrollConfig = {
+ vthresh: 50,
+ hthresh: -1,
+ frequency: 100,
+ increment: 200
+};
+Ext.dd.ScrollManager.register(el);
+The only required fields when creating a new event record instance are StartDate and + * EndDate. All other fields are either optional are will be defaulted if blank.
+ *Here is a basic example for how to create a new record of this type:
+rec = new Ext.calendar.EventRecord({
+ StartDate: '2101-01-12 12:00:00',
+ EndDate: '2101-01-12 13:30:00',
+ Title: 'My cool event',
+ Notes: 'Some notes'
+});
+
+var M = Ext.calendar.EventMappings;
+
+rec = new Ext.calendar.EventRecord();
+rec.data[M.StartDate.name] = '2101-01-12 12:00:00';
+rec.data[M.EndDate.name] = '2101-01-12 13:30:00';
+rec.data[M.Title.name] = 'My cool event';
+rec.data[M.Notes.name] = 'Some notes';
+| {markup} |
A custom combo used for choosing from the list of available calendars to assign an event to.
+ *This is pretty much a standard combo that is simply pre-configured for the options needed by the + * calendar components. The default configs are as follows:
+ fieldLabel: 'Calendar',
+ valueField: 'CalendarId',
+ displayField: 'Title',
+ triggerAction: 'all',
+ mode: 'local',
+ forceSelection: true,
+ width: 200
+This is an abstract class that serves as the base for other calendar views. This class is not + * intended to be directly instantiated.
+ *When extending this class to create a custom calendar view, you must provide an implementation
+ * for the renderItems method, as there is no default implementation for rendering events
+ * The rendering logic is totally dependent on how the UI structures its data, which
+ * is determined by the underlying UI template (this base class does not have a template).
Returns the XTemplate that is bound to the calendar's event store (it expects records of type + * {@link Ext.calendar.EventRecord}) to populate the calendar views with events. Internally this method + * by default generates different markup for browsers that support CSS border radius and those that don't. + * This method can be overridden as needed to customize the markup generated.
+ *Note that this method calls {@link #getEventBodyMarkup} to retrieve the body markup for events separately + * from the surrounding container markup. This provdes the flexibility to customize what's in the body without + * having to override the entire XTemplate. If you do override this method, you should make sure that your + * overridden version also does the same.
+ * @return {Ext.XTemplate} The event XTemplate + */ + getEventTemplate: Ext.emptyFn, + // must be implemented by a subclass + // private + initComponent: function() { + this.setStartDate(this.startDate || new Date()); + + Ext.calendar.CalendarView.superclass.initComponent.call(this); + + this.addEvents({ + /** + * @event eventsrendered + * Fires after events are finished rendering in the view + * @param {Ext.calendar.CalendarView} this + */ + eventsrendered: true, + /** + * @event eventclick + * Fires after the user clicks on an event element + * @param {Ext.calendar.CalendarView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was clicked on + * @param {HTMLNode} el The DOM node that was clicked on + */ + eventclick: true, + /** + * @event eventover + * Fires anytime the mouse is over an event element + * @param {Ext.calendar.CalendarView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that the cursor is over + * @param {HTMLNode} el The DOM node that is being moused over + */ + eventover: true, + /** + * @event eventout + * Fires anytime the mouse exits an event element + * @param {Ext.calendar.CalendarView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that the cursor exited + * @param {HTMLNode} el The DOM node that was exited + */ + eventout: true, + /** + * @event datechange + * Fires after the start date of the view changes + * @param {Ext.calendar.CalendarView} 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 + */ + datechange: true, + /** + * @event rangeselect + * Fires after the user drags on the calendar to select a range of dates/times in which to create an event + * @param {Ext.calendar.CalendarView} 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 is complete so that + * the view is properly cleaned up (shim elements are persisted in the view while the user is prompted to handle the + * range selection). The callback is already created in the proper scope, so it simply needs to be executed as a standard + * function call (e.g., callback()). + */ + rangeselect: true, + /** + * @event eventmove + * Fires after an event element is dragged by the user and dropped in a new position + * @param {Ext.calendar.CalendarView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was moved with + * updated start and end dates + */ + eventmove: true, + /** + * @event initdrag + * Fires when a drag operation is initiated in the view + * @param {Ext.calendar.CalendarView} this + */ + initdrag: true, + /** + * @event dayover + * Fires while the mouse is over a day element + * @param {Ext.calendar.CalendarView} this + * @param {Date} dt The date that is being moused over + * @param {Ext.Element} el The day Element that is being moused over + */ + dayover: true, + /** + * @event dayout + * Fires when the mouse exits a day element + * @param {Ext.calendar.CalendarView} this + * @param {Date} dt The date that is exited + * @param {Ext.Element} el The day Element that is exited + */ + dayout: true + /* + * @event eventdelete + * Fires after an event element is deleted by the user. Not currently implemented directly at the view level -- currently + * deletes only happen from one of the forms. + * @param {Ext.calendar.CalendarView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was deleted + */ + //eventdelete: true + }); + }, + + // private + afterRender: function() { + Ext.calendar.CalendarView.superclass.afterRender.call(this); + + this.renderTemplate(); + + if (this.store) { + this.setStore(this.store, true); + } + + this.el.on({ + 'mouseover': this.onMouseOver, + 'mouseout': this.onMouseOut, + 'click': this.onClick, + 'resize': this.onResize, + scope: this + }); + + this.el.unselectable(); + + if (this.enableDD && this.initDD) { + this.initDD(); + } + + this.on('eventsrendered', this.forceSize); + this.forceSize.defer(100, this); + + }, + + // private + forceSize: function() { + if (this.el && this.el.child) { + var hd = this.el.child('.ext-cal-hd-ct'), + bd = this.el.child('.ext-cal-body-ct'); + + if (bd == null || hd == null) return; + + var headerHeight = hd.getHeight(), + sz = this.el.parent().getSize(); + + bd.setHeight(sz.height - headerHeight); + } + }, + + refresh: function() { + this.prepareData(); + this.renderTemplate(); + this.renderItems(); + }, + + getWeekCount: function() { + var days = Ext.calendar.Date.diffDays(this.viewStart, this.viewEnd); + return Math.ceil(days / this.dayCount); + }, + + // private + prepareData: function() { + var lastInMonth = this.startDate.getLastDateOfMonth(), + w = 0, + row = 0, + dt = this.viewStart.clone(), + weeks = this.weekCount < 1 ? 6: this.weekCount; + + this.eventGrid = [[]]; + this.allDayGrid = [[]]; + this.evtMaxCount = []; + + var evtsInView = this.store.queryBy(function(rec) { + return this.isEventVisible(rec.data); + }, + this); + + for (; w < weeks; w++) { + this.evtMaxCount[w] = 0; + if (this.weekCount == -1 && dt > lastInMonth) { + //current week is fully in next month so skip + break; + } + this.eventGrid[w] = this.eventGrid[w] || []; + this.allDayGrid[w] = this.allDayGrid[w] || []; + + for (d = 0; d < this.dayCount; d++) { + if (evtsInView.getCount() > 0) { + var evts = evtsInView.filterBy(function(rec) { + var startsOnDate = (dt.getTime() == rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime()); + var spansFromPrevView = (w == 0 && d == 0 && (dt > rec.data[Ext.calendar.EventMappings.StartDate.name])); + return startsOnDate || spansFromPrevView; + }, + this); + + this.sortEventRecordsForDay(evts); + this.prepareEventGrid(evts, w, d); + } + dt = dt.add(Date.DAY, 1); + } + } + this.currentWeekCount = w; + }, + + // private + prepareEventGrid: function(evts, w, d) { + var row = 0, + dt = this.viewStart.clone(), + max = this.maxEventsPerDay ? this.maxEventsPerDay: 999; + + evts.each(function(evt) { + var M = Ext.calendar.EventMappings, + days = Ext.calendar.Date.diffDays( + Ext.calendar.Date.max(this.viewStart, evt.data[M.StartDate.name]), + Ext.calendar.Date.min(this.viewEnd, evt.data[M.EndDate.name])) + 1; + + if (days > 1 || Ext.calendar.Date.diffDays(evt.data[M.StartDate.name], evt.data[M.EndDate.name]) > 1) { + this.prepareEventGridSpans(evt, this.eventGrid, w, d, days); + this.prepareEventGridSpans(evt, this.allDayGrid, w, d, days, true); + } else { + row = this.findEmptyRowIndex(w, d); + this.eventGrid[w][d] = this.eventGrid[w][d] || []; + this.eventGrid[w][d][row] = evt; + + if (evt.data[M.IsAllDay.name]) { + row = this.findEmptyRowIndex(w, d, true); + this.allDayGrid[w][d] = this.allDayGrid[w][d] || []; + this.allDayGrid[w][d][row] = evt; + } + } + + if (this.evtMaxCount[w] < this.eventGrid[w][d].length) { + this.evtMaxCount[w] = Math.min(max + 1, this.eventGrid[w][d].length); + } + return true; + }, + this); + }, + + // private + prepareEventGridSpans: function(evt, grid, w, d, days, allday) { + // this event spans multiple days/weeks, so we have to preprocess + // the events and store special span events as placeholders so that + // the render routine can build the necessary TD spans correctly. + var w1 = w, + d1 = d, + row = this.findEmptyRowIndex(w, d, allday), + dt = this.viewStart.clone(); + + var start = { + event: evt, + isSpan: true, + isSpanStart: true, + spanLeft: false, + spanRight: (d == 6) + }; + grid[w][d] = grid[w][d] || []; + grid[w][d][row] = start; + + while (--days) { + dt = dt.add(Date.DAY, 1); + if (dt > this.viewEnd) { + break; + } + if (++d1 > 6) { + // reset counters to the next week + d1 = 0; + w1++; + row = this.findEmptyRowIndex(w1, 0); + } + grid[w1] = grid[w1] || []; + grid[w1][d1] = grid[w1][d1] || []; + + grid[w1][d1][row] = { + event: evt, + isSpan: true, + isSpanStart: (d1 == 0), + spanLeft: (w1 > w) && (d1 % 7 == 0), + spanRight: (d1 == 6) && (days > 1) + }; + } + }, + + // private + findEmptyRowIndex: function(w, d, allday) { + var grid = allday ? this.allDayGrid: this.eventGrid, + day = grid[w] ? grid[w][d] || [] : [], + i = 0, + ln = day.length; + + for (; i < ln; i++) { + if (day[i] == null) { + return i; + } + } + return ln; + }, + + // private + renderTemplate: function() { + if (this.tpl) { + this.tpl.overwrite(this.el, this.getParams()); + this.lastRenderStart = this.viewStart.clone(); + this.lastRenderEnd = this.viewEnd.clone(); + } + }, + + disableStoreEvents: function() { + this.monitorStoreEvents = false; + }, + + enableStoreEvents: function(refresh) { + this.monitorStoreEvents = true; + if (refresh === true) { + this.refresh(); + } + }, + + // private + onResize: function() { + this.refresh(); + }, + + // private + onInitDrag: function() { + this.fireEvent('initdrag', this); + }, + + // private + onEventDrop: function(rec, dt) { + if (Ext.calendar.Date.compare(rec.data[Ext.calendar.EventMappings.StartDate.name], dt) === 0) { + // no changes + return; + } + var diff = dt.getTime() - rec.data[Ext.calendar.EventMappings.StartDate.name].getTime(); + rec.set(Ext.calendar.EventMappings.StartDate.name, dt); + rec.set(Ext.calendar.EventMappings.EndDate.name, rec.data[Ext.calendar.EventMappings.EndDate.name].add(Date.MILLI, diff)); + + this.fireEvent('eventmove', this, rec); + }, + + // private + onCalendarEndDrag: function(start, end, onComplete) { + // set this flag for other event handlers that might conflict while we're waiting + this.dragPending = true; + + // have to wait for the user to save or cancel before finalizing the dd interation + var o = {}; + o[Ext.calendar.EventMappings.StartDate.name] = start; + o[Ext.calendar.EventMappings.EndDate.name] = end; + + this.fireEvent('rangeselect', this, o, this.onCalendarEndDragComplete.createDelegate(this, [onComplete])); + }, + + // private + onCalendarEndDragComplete: function(onComplete) { + // callback for the drop zone to clean up + onComplete(); + // clear flag for other events to resume normally + this.dragPending = false; + }, + + // private + onUpdate: function(ds, rec, operation) { + if (this.monitorStoreEvents === false) { + return; + } + if (operation == Ext.data.Record.COMMIT) { + this.refresh(); + if (this.enableFx && this.enableUpdateFx) { + this.doUpdateFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), { + scope: this + }); + } + } + }, + + + doUpdateFx: function(els, o) { + this.highlightEvent(els, null, o); + }, + + // private + onAdd: function(ds, records, index) { + if (this.monitorStoreEvents === false) { + return; + } + var rec = records[0]; + this.tempEventId = rec.id; + this.refresh(); + + if (this.enableFx && this.enableAddFx) { + this.doAddFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), { + scope: this + }); + }; + }, + + doAddFx: function(els, o) { + els.fadeIn(Ext.apply(o, { + duration: 2 + })); + }, + + // private + onRemove: function(ds, rec) { + if (this.monitorStoreEvents === false) { + return; + } + if (this.enableFx && this.enableRemoveFx) { + this.doRemoveFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), { + remove: true, + scope: this, + callback: this.refresh + }); + } + else { + this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]).remove(); + this.refresh(); + } + }, + + doRemoveFx: function(els, o) { + els.fadeOut(o); + }, + + /** + * Visually highlights an event using {@link Ext.Fx#highlight} config options. + * If {@link #highlightEventActions} is false this method will have no effect. + * @param {Ext.CompositeElement} els The element(s) to highlight + * @param {Object} color (optional) The highlight color. Should be a 6 char hex + * color without the leading # (defaults to yellow: 'ffff9c') + * @param {Object} o (optional) Object literal with any of the {@link Ext.Fx} config + * options. See {@link Ext.Fx#highlight} for usage examples. + */ + highlightEvent: function(els, color, o) { + if (this.enableFx) { + var c; + ! (Ext.isIE || Ext.isOpera) ? + els.highlight(color, o) : + // Fun IE/Opera handling: + els.each(function(el) { + el.highlight(color, Ext.applyIf({ + attr: 'color' + }, + o)); + c = el.child('.ext-cal-evm'); + if (c) { + c.highlight(color, o); + } + }, + this); + } + }, + + /** + * Retrieve an Event object's id from its corresponding node in the DOM. + * @param {String/Element/HTMLElement} el An {@link Ext.Element}, DOM node or id + */ + getEventIdFromEl: function(el) { + el = Ext.get(el); + var id = el.id.split(this.eventElIdDelimiter)[1]; + if (id.indexOf('-') > -1) { + //This id has the index of the week it is rendered in as the suffix. + //This allows events that span across weeks to still have reproducibly-unique DOM ids. + id = id.split('-')[0]; + } + return id; + }, + + // private + getEventId: function(eventId) { + if (eventId === undefined && this.tempEventId) { + eventId = this.tempEventId; + } + return eventId; + }, + + /** + * + * @param {String} eventId + * @param {Boolean} forSelect + * @return {String} The selector class + */ + getEventSelectorCls: function(eventId, forSelect) { + var prefix = forSelect ? '.': ''; + return prefix + this.id + this.eventElIdDelimiter + this.getEventId(eventId); + }, + + /** + * + * @param {String} eventId + * @return {Ext.CompositeElement} The matching CompositeElement of nodes + * that comprise the rendered event. Any event that spans across a view + * boundary will contain more than one internal Element. + */ + getEventEls: function(eventId) { + var els = Ext.select(this.getEventSelectorCls(this.getEventId(eventId), true), false, this.el.id); + return new Ext.CompositeElement(els); + }, + + /** + * Returns true if the view is currently displaying today's date, else false. + * @return {Boolean} True or false + */ + isToday: function() { + var today = new Date().clearTime().getTime(); + return this.viewStart.getTime() <= today && this.viewEnd.getTime() >= today; + }, + + // private + onDataChanged: function(store) { + this.refresh(); + }, + + // private + isEventVisible: function(evt) { + var start = this.viewStart.getTime(), + end = this.viewEnd.getTime(), + M = Ext.calendar.EventMappings, + evStart = (evt.data ? evt.data[M.StartDate.name] : evt[M.StartDate.name]).getTime(), + evEnd = (evt.data ? evt.data[M.EndDate.name] : evt[M.EndDate.name]).add(Date.SECOND, -1).getTime(), + + startsInRange = (evStart >= start && evStart <= end), + endsInRange = (evEnd >= start && evEnd <= end), + spansRange = (evStart < start && evEnd > end); + + return (startsInRange || endsInRange || spansRange); + }, + + // private + isOverlapping: function(evt1, evt2) { + var ev1 = evt1.data ? evt1.data: evt1, + ev2 = evt2.data ? evt2.data: evt2, + M = Ext.calendar.EventMappings, + start1 = ev1[M.StartDate.name].getTime(), + end1 = ev1[M.EndDate.name].add(Date.SECOND, -1).getTime(), + start2 = ev2[M.StartDate.name].getTime(), + end2 = ev2[M.EndDate.name].add(Date.SECOND, -1).getTime(); + + if (end1 < start1) { + end1 = start1; + } + if (end2 < start2) { + end2 = start2; + } + + var ev1startsInEv2 = (start1 >= start2 && start1 <= end2), + ev1EndsInEv2 = (end1 >= start2 && end1 <= end2), + ev1SpansEv2 = (start1 < start2 && end1 > end2); + + return (ev1startsInEv2 || ev1EndsInEv2 || ev1SpansEv2); + }, + + getDayEl: function(dt) { + return Ext.get(this.getDayId(dt)); + }, + + getDayId: function(dt) { + if (Ext.isDate(dt)) { + dt = dt.format('Ymd'); + } + return this.id + this.dayElIdDelimiter + dt; + }, + + /** + * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not + * be the first date displayed in the rendered calendar -- to get the start and end dates displayed + * to the user use {@link #getViewBounds}. + * @return {Date} The start date + */ + getStartDate: function() { + return this.startDate; + }, + + /** + * Sets the start date used to calculate the view boundaries to display. The displayed view will be the + * earliest and latest dates that match the view requirements and contain the date passed to this function. + * @param {Date} dt The date used to calculate the new view boundaries + */ + setStartDate: function(start, refresh) { + this.startDate = start.clearTime(); + this.setViewBounds(start); + this.store.load({ + params: { + start: this.viewStart.format('m-d-Y'), + end: this.viewEnd.format('m-d-Y') + } + }); + if (refresh === true) { + this.refresh(); + } + this.fireEvent('datechange', this, this.startDate, this.viewStart, this.viewEnd); + }, + + // private + setViewBounds: function(startDate) { + var start = startDate || this.startDate, + offset = start.getDay() - this.startDay; + + switch (this.weekCount) { + case 0: + case 1: + this.viewStart = this.dayCount < 7 ? start: start.add(Date.DAY, -offset).clearTime(true); + this.viewEnd = this.viewStart.add(Date.DAY, this.dayCount || 7).add(Date.SECOND, -1); + return; + + case - 1: + // auto by month + start = start.getFirstDateOfMonth(); + offset = start.getDay() - this.startDay; + + this.viewStart = start.add(Date.DAY, -offset).clearTime(true); + + // start from current month start, not view start: + var end = start.add(Date.MONTH, 1).add(Date.SECOND, -1); + // fill out to the end of the week: + this.viewEnd = end.add(Date.DAY, 6 - end.getDay()); + return; + + default: + this.viewStart = start.add(Date.DAY, -offset).clearTime(true); + this.viewEnd = this.viewStart.add(Date.DAY, this.weekCount * 7).add(Date.SECOND, -1); + } + }, + + // private + getViewBounds: function() { + return { + start: this.viewStart, + end: this.viewEnd + }; + }, + + /* private + * Sort events for a single day for display in the calendar. This sorts allday + * events first, then non-allday events are sorted either based on event start + * priority or span priority based on the value of {@link #spansHavePriority} + * (defaults to event start priority). + * @param {MixedCollection} evts A {@link Ext.util.MixedCollection MixedCollection} + * of {@link #Ext.calendar.EventRecord EventRecord} objects + */ + sortEventRecordsForDay: function(evts) { + if (evts.length < 2) { + return; + } + evts.sort('ASC', + function(evtA, evtB) { + var a = evtA.data, + b = evtB.data, + M = Ext.calendar.EventMappings; + + // Always sort all day events before anything else + if (a[M.IsAllDay.name]) { + return - 1; + } + else if (b[M.IsAllDay.name]) { + return 1; + } + if (this.spansHavePriority) { + // This logic always weights span events higher than non-span events + // (at the possible expense of start time order). This seems to + // be the approach used by Google calendar and can lead to a more + // visually appealing layout in complex cases, but event order is + // not guaranteed to be consistent. + var diff = Ext.calendar.Date.diffDays; + if (diff(a[M.StartDate.name], a[M.EndDate.name]) > 0) { + if (diff(b[M.StartDate.name], b[M.EndDate.name]) > 0) { + // Both events are multi-day + if (a[M.StartDate.name].getTime() == b[M.StartDate.name].getTime()) { + // If both events start at the same time, sort the one + // that ends later (potentially longer span bar) first + return b[M.EndDate.name].getTime() - a[M.EndDate.name].getTime(); + } + return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime(); + } + return - 1; + } + else if (diff(b[M.StartDate.name], b[M.EndDate.name]) > 0) { + return 1; + } + return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime(); + } + else { + // Doing this allows span and non-span events to intermingle but + // remain sorted sequentially by start time. This seems more proper + // but can make for a less visually-compact layout when there are + // many such events mixed together closely on the calendar. + return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime(); + } + }.createDelegate(this)); + }, + + /** + * Updates the view to contain the passed date + * @param {Date} dt The date to display + */ + moveTo: function(dt, noRefresh) { + if (Ext.isDate(dt)) { + this.setStartDate(dt); + if (noRefresh !== false) { + this.refresh(); + } + return this.startDate; + } + return dt; + }, + + /** + * Updates the view to the next consecutive date(s) + */ + moveNext: function(noRefresh) { + return this.moveTo(this.viewEnd.add(Date.DAY, 1)); + }, + + /** + * Updates the view to the previous consecutive date(s) + */ + movePrev: function(noRefresh) { + var days = Ext.calendar.Date.diffDays(this.viewStart, this.viewEnd) + 1; + return this.moveDays( - days, noRefresh); + }, + + /** + * Shifts the view by the passed number of months relative to the currently set date + * @param {Number} value The number of months (positive or negative) by which to shift the view + */ + moveMonths: function(value, noRefresh) { + return this.moveTo(this.startDate.add(Date.MONTH, value), noRefresh); + }, + + /** + * Shifts the view by the passed number of weeks relative to the currently set date + * @param {Number} value The number of weeks (positive or negative) by which to shift the view + */ + moveWeeks: function(value, noRefresh) { + return this.moveTo(this.startDate.add(Date.DAY, value * 7), noRefresh); + }, + + /** + * Shifts the view by the passed number of days relative to the currently set date + * @param {Number} value The number of days (positive or negative) by which to shift the view + */ + moveDays: function(value, noRefresh) { + return this.moveTo(this.startDate.add(Date.DAY, value), noRefresh); + }, + + /** + * Updates the view to show today + */ + moveToday: function(noRefresh) { + return this.moveTo(new Date(), noRefresh); + }, + + /** + * Sets the event store used by the calendar to display {@link Ext.calendar.EventRecord events}. + * @param {Ext.data.Store} store + */ + setStore: function(store, initial) { + if (!initial && this.store) { + this.store.un("datachanged", this.onDataChanged, this); + this.store.un("add", this.onAdd, this); + this.store.un("remove", this.onRemove, this); + this.store.un("update", this.onUpdate, this); + this.store.un("clear", this.refresh, this); + } + if (store) { + store.on("datachanged", this.onDataChanged, this); + store.on("add", this.onAdd, this); + store.on("remove", this.onRemove, this); + store.on("update", this.onUpdate, this); + store.on("clear", this.refresh, this); + } + this.store = store; + if (store && store.getCount() > 0) { + this.refresh(); + } + }, + + getEventRecord: function(id) { + var idx = this.store.find(Ext.calendar.EventMappings.EventId.name, id); + return this.store.getAt(idx); + }, + + getEventRecordFromEl: function(el) { + return this.getEventRecord(this.getEventIdFromEl(el)); + }, + + // private + getParams: function() { + return { + viewStart: this.viewStart, + viewEnd: this.viewEnd, + startDate: this.startDate, + dayCount: this.dayCount, + weekCount: this.weekCount, + title: this.getTitle() + }; + }, + + getTitle: function() { + return this.startDate.format('F Y'); + }, + + /* + * Shared click handling. Each specific view also provides view-specific + * click handling that calls this first. This method returns true if it + * can handle the click (and so the subclass should ignore it) else false. + */ + onClick: function(e, t) { + var el = e.getTarget(this.eventSelector, 5); + if (el) { + var id = this.getEventIdFromEl(el); + this.fireEvent('eventclick', this, this.getEventRecord(id), el); + return true; + } + }, + + // private + onMouseOver: function(e, t) { + if (this.trackMouseOver !== false && (this.dragZone == undefined || !this.dragZone.dragging)) { + if (!this.handleEventMouseEvent(e, t, 'over')) { + this.handleDayMouseEvent(e, t, 'over'); + } + } + }, + + // private + onMouseOut: function(e, t) { + if (this.trackMouseOver !== false && (this.dragZone == undefined || !this.dragZone.dragging)) { + if (!this.handleEventMouseEvent(e, t, 'out')) { + this.handleDayMouseEvent(e, t, 'out'); + } + } + }, + + // private + handleEventMouseEvent: function(e, t, type) { + var el = e.getTarget(this.eventSelector, 5, true), + rel, + els, + evtId; + if (el) { + rel = Ext.get(e.getRelatedTarget()); + if (el == rel || el.contains(rel)) { + return true; + } + + evtId = this.getEventIdFromEl(el); + + if (this.eventOverClass != '') { + els = this.getEventEls(evtId); + els[type == 'over' ? 'addClass': 'removeClass'](this.eventOverClass); + } + this.fireEvent('event' + type, this, this.getEventRecord(evtId), el); + return true; + } + return false; + }, + + // private + getDateFromId: function(id, delim) { + var parts = id.split(delim); + return parts[parts.length - 1]; + }, + + // private + handleDayMouseEvent: function(e, t, type) { + t = e.getTarget('td', 3); + if (t) { + if (t.id && t.id.indexOf(this.dayElIdDelimiter) > -1) { + var dt = this.getDateFromId(t.id, this.dayElIdDelimiter), + rel = Ext.get(e.getRelatedTarget()), + relTD, + relDate; + + if (rel) { + relTD = rel.is('td') ? rel: rel.up('td', 3); + relDate = relTD && relTD.id ? this.getDateFromId(relTD.id, this.dayElIdDelimiter) : ''; + } + if (!rel || dt != relDate) { + var el = this.getDayEl(dt); + if (el && this.dayOverClass != '') { + el[type == 'over' ? 'addClass': 'removeClass'](this.dayOverClass); + } + this.fireEvent('day' + type, this, Date.parseDate(dt, "Ymd"), el); + } + } + } + }, + + // private + renderItems: function() { + throw 'This method must be implemented by a subclass'; + } +});/** + * @class Ext.calendar.MonthView + * @extends Ext.calendar.CalendarView + *Displays a calendar view by month. This class does not usually need ot be used directly as you can + * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including + * the month view.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.MonthView = Ext.extend(Ext.calendar.CalendarView, { + /** + * @cfg {Boolean} showTime + * True to display the current time in today's box in the calendar, false to not display it (defautls to true) + */ + showTime: true, + /** + * @cfg {Boolean} showTodayText + * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true) + */ + showTodayText: true, + /** + * @cfg {String} todayText + * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today') + */ + todayText: 'Today', + /** + * @cfg {Boolean} showHeader + * True to display a header beneath the navigation bar containing the week names above each week's column, false not to + * show it and instead display the week names in the first row of days in the calendar (defaults to false). + */ + showHeader: false, + /** + * @cfg {Boolean} showWeekLinks + * True to display an extra column before the first day in the calendar that links to the {@link Ext.calendar.WeekView view} + * for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week + * number depending on the value of {@link #showWeekNumbers}. + */ + showWeekLinks: false, + /** + * @cfg {Boolean} showWeekNumbers + * True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false). + * Note that if {@link #showWeekLinks} is false this config will have no affect even if true. + */ + showWeekNumbers: false, + /** + * @cfg {String} weekLinkOverClass + * The CSS class name applied when the mouse moves over a week link element (only applies when {@link #showWeekLinks} is true, + * defaults to 'ext-week-link-over'). + */ + weekLinkOverClass: 'ext-week-link-over', + + //private properties -- do not override: + daySelector: '.ext-cal-day', + moreSelector: '.ext-cal-ev-more', + weekLinkSelector: '.ext-cal-week-link', + weekCount: -1, + // defaults to auto by month + dayCount: 7, + moreElIdDelimiter: '-more-', + weekLinkIdDelimiter: 'ext-cal-week-', + + // private + initComponent: function() { + Ext.calendar.MonthView.superclass.initComponent.call(this); + this.addEvents({ + /** + * @event dayclick + * Fires after the user clicks within the view container and not on an event element + * @param {Ext.calendar.MonthView} 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. Clicks within the + * MonthView always return true for this param. + * @param {Ext.Element} el The Element that was clicked on + */ + dayclick: true, + /** + * @event weekclick + * Fires after the user clicks within a week link (when {@link #showWeekLinks is true) + * @param {Ext.calendar.MonthView} this + * @param {Date} dt The start date of the week that was clicked on + */ + weekclick: true, + // inherited docs + dayover: true, + // inherited docs + dayout: true + }); + }, + + // private + initDD: function() { + var cfg = { + view: this, + createText: this.ddCreateEventText, + moveText: this.ddMoveEventText, + ddGroup: 'MonthViewDD' + }; + + this.dragZone = new Ext.calendar.DragZone(this.el, cfg); + this.dropZone = new Ext.calendar.DropZone(this.el, cfg); + }, + + // private + onDestroy: function() { + Ext.destroy(this.ddSelector); + Ext.destroy(this.dragZone); + Ext.destroy(this.dropZone); + Ext.calendar.MonthView.superclass.onDestroy.call(this); + }, + + // private + afterRender: function() { + if (!this.tpl) { + this.tpl = new Ext.calendar.MonthViewTemplate({ + id: this.id, + showTodayText: this.showTodayText, + todayText: this.todayText, + showTime: this.showTime, + showHeader: this.showHeader, + showWeekLinks: this.showWeekLinks, + showWeekNumbers: this.showWeekNumbers + }); + } + this.tpl.compile(); + this.addClass('ext-cal-monthview ext-cal-ct'); + + Ext.calendar.MonthView.superclass.afterRender.call(this); + }, + + // private + onResize: function() { + if (this.monitorResize) { + this.maxEventsPerDay = this.getMaxEventsPerDay(); + this.refresh(); + } + }, + + // private + forceSize: function() { + // Compensate for the week link gutter width if visible + if (this.showWeekLinks && this.el && this.el.child) { + var hd = this.el.select('.ext-cal-hd-days-tbl'), + bgTbl = this.el.select('.ext-cal-bg-tbl'), + evTbl = this.el.select('.ext-cal-evt-tbl'), + wkLinkW = this.el.child('.ext-cal-week-link').getWidth(), + w = this.el.getWidth() - wkLinkW; + + hd.setWidth(w); + bgTbl.setWidth(w); + evTbl.setWidth(w); + } + Ext.calendar.MonthView.superclass.forceSize.call(this); + }, + + //private + initClock: function() { + if (Ext.fly(this.id + '-clock') !== null) { + this.prevClockDay = new Date().getDay(); + if (this.clockTask) { + Ext.TaskMgr.stop(this.clockTask); + } + this.clockTask = Ext.TaskMgr.start({ + run: function() { + var el = Ext.fly(this.id + '-clock'), + t = new Date(); + + if (t.getDay() == this.prevClockDay) { + if (el) { + el.update(t.format('g:i a')); + } + } + else { + this.prevClockDay = t.getDay(); + this.moveTo(t); + } + }, + scope: this, + interval: 1000 + }); + } + }, + + // inherited docs + getEventBodyMarkup: function() { + if (!this.eventBodyMarkup) { + this.eventBodyMarkup = ['{Title}', + 'This is the header area container within the day and week views where all-day events are displayed. + * Normally you should not need to use this class directly -- instead you should use {@link Ext.calendar.DayView DayView} + * which aggregates this class and the {@link Ext.calendar.DayBodyView DayBodyView} into the single unified view + * presented by {@link Ext.calendar.CalendarPanel CalendarPanel}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayHeaderView = Ext.extend(Ext.calendar.MonthView, { + // private configs + weekCount: 1, + dayCount: 1, + allDayOnly: true, + monitorResize: false, + + /** + * @event dayclick + * Fires after the user clicks within the day view container and not on an event element + * @param {Ext.calendar.DayBodyView} 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. Clicks within the + * DayHeaderView always return true for this param. + * @param {Ext.Element} el The Element that was clicked on + */ + + // private + afterRender: function() { + if (!this.tpl) { + this.tpl = new Ext.calendar.DayHeaderTemplate({ + id: this.id, + showTodayText: this.showTodayText, + todayText: this.todayText, + showTime: this.showTime + }); + } + this.tpl.compile(); + this.addClass('ext-cal-day-header'); + + Ext.calendar.DayHeaderView.superclass.afterRender.call(this); + }, + + // private + forceSize: Ext.emptyFn, + + // private + refresh: function() { + Ext.calendar.DayHeaderView.superclass.refresh.call(this); + this.recalcHeaderBox(); + }, + + // private + recalcHeaderBox: function() { + var tbl = this.el.child('.ext-cal-evt-tbl'), + h = tbl.getHeight(); + + this.el.setHeight(h + 7); + + if (Ext.isIE && Ext.isStrict) { + this.el.child('.ext-cal-hd-ad-inner').setHeight(h + 4); + } + if (Ext.isOpera) { + //TODO: figure out why Opera refuses to refresh height when + //the new height is lower than the previous one + // var ct = this.el.child('.ext-cal-hd-ct'); + // ct.repaint(); + } + }, + + // private + moveNext: function(noRefresh) { + this.moveDays(this.dayCount, noRefresh); + }, + + // private + movePrev: function(noRefresh) { + this.moveDays( - this.dayCount, noRefresh); + }, + + // private + onClick: function(e, t) { + var el = e.getTarget('td', 3), + parts, + dt; + if (el) { + if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) { + parts = el.id.split(this.dayElIdDelimiter); + dt = parts[parts.length - 1]; + + this.fireEvent('dayclick', this, Date.parseDate(dt, 'Ymd'), true, Ext.get(this.getDayId(dt))); + return; + } + } + Ext.calendar.DayHeaderView.superclass.onClick.apply(this, arguments); + } +}); + +Ext.reg('dayheaderview', Ext.calendar.DayHeaderView); +/**S + * @class Ext.calendar.DayBodyView + * @extends Ext.calendar.CalendarView + *This is the scrolling container within the day and week views where non-all-day events are displayed. + * Normally you should not need to use this class directly -- instead you should use {@link Ext.calendar.DayView DayView} + * which aggregates this class and the {@link Ext.calendar.DayHeaderView DayHeaderView} into the single unified view + * presented by {@link Ext.calendar.CalendarPanel CalendarPanel}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayBodyView = Ext.extend(Ext.calendar.CalendarView, { + //private + dayColumnElIdDelimiter: '-day-col-', + + //private + initComponent: function() { + Ext.calendar.DayBodyView.superclass.initComponent.call(this); + + this.addEvents({ + /** + * @event eventresize + * Fires after the user drags the resize handle of an event to resize it + * @param {Ext.calendar.DayBodyView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was resized + * containing the updated start and end dates + */ + eventresize: true, + /** + * @event dayclick + * Fires after the user clicks within the day view container and not on an event element + * @param {Ext.calendar.DayBodyView} 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. Clicks within the + * DayBodyView always return false for this param. + * @param {Ext.Element} el The Element that was clicked on + */ + dayclick: true + }); + }, + + //private + initDD: function() { + var cfg = { + createText: this.ddCreateEventText, + moveText: this.ddMoveEventText, + resizeText: this.ddResizeEventText + }; + + this.el.ddScrollConfig = { + // scrolling is buggy in IE/Opera for some reason. A larger vthresh + // makes it at least functional if not perfect + vthresh: Ext.isIE || Ext.isOpera ? 100: 40, + hthresh: -1, + frequency: 50, + increment: 100, + ddGroup: 'DayViewDD' + }; + this.dragZone = new Ext.calendar.DayViewDragZone(this.el, Ext.apply({ + view: this, + containerScroll: true + }, + cfg)); + + this.dropZone = new Ext.calendar.DayViewDropZone(this.el, Ext.apply({ + view: this + }, + cfg)); + }, + + //private + refresh: function() { + var top = this.el.getScroll().top; + this.prepareData(); + this.renderTemplate(); + this.renderItems(); + + // skip this if the initial render scroll position has not yet been set. + // necessary since IE/Opera must be deferred, so the first refresh will + // override the initial position by default and always set it to 0. + if (this.scrollReady) { + this.scrollTo(top); + } + }, + + /** + * Scrolls the container to the specified vertical position. If the view is large enough that + * there is no scroll overflow then this method will have no affect. + * @param {Number} y The new vertical scroll position in pixels + * @param {Boolean} defer (optional)True to slightly defer the call, false to execute immediately.
+ *This method will automatically defer itself for IE and Opera (even if you pass false) otherwise + * the scroll position will not update in those browsers. You can optionally pass true, however, to + * force the defer in all browsers, or use your own custom conditions to determine whether this is needed.
+ *Note that this method should not generally need to be called directly as scroll position is managed internally.
+ */ + scrollTo: function(y, defer) { + defer = defer || (Ext.isIE || Ext.isOpera); + if (defer) { + (function() { + this.el.scrollTo('top', y); + this.scrollReady = true; + }).defer(10, this); + } + else { + this.el.scrollTo('top', y); + this.scrollReady = true; + } + }, + + // private + afterRender: function() { + if (!this.tpl) { + this.tpl = new Ext.calendar.DayBodyTemplate({ + id: this.id, + dayCount: this.dayCount, + showTodayText: this.showTodayText, + todayText: this.todayText, + showTime: this.showTime + }); + } + this.tpl.compile(); + + this.addClass('ext-cal-body-ct'); + + Ext.calendar.DayBodyView.superclass.afterRender.call(this); + + // default scroll position to 7am: + this.scrollTo(7 * 42); + }, + + // private + forceSize: Ext.emptyFn, + + // private + onEventResize: function(rec, data) { + var D = Ext.calendar.Date, + start = Ext.calendar.EventMappings.StartDate.name, + end = Ext.calendar.EventMappings.EndDate.name; + + if (D.compare(rec.data[start], data.StartDate) === 0 && + D.compare(rec.data[end], data.EndDate) === 0) { + // no changes + return; + } + rec.set(start, data.StartDate); + rec.set(end, data.EndDate); + + this.fireEvent('eventresize', this, rec); + }, + + // inherited docs + getEventBodyMarkup: function() { + if (!this.eventBodyMarkup) { + this.eventBodyMarkup = ['{Title}', + 'Returns the XTemplate that is bound to the calendar's event store (it expects records of type + * {@link Ext.calendar.EventRecord}) to populate the calendar views with all-day events. + * Internally this method by default generates different markup for browsers that support CSS border radius + * and those that don't. This method can be overridden as needed to customize the markup generated.
+ *Note that this method calls {@link #getEventBodyMarkup} to retrieve the body markup for events separately + * from the surrounding container markup. This provdes the flexibility to customize what's in the body without + * having to override the entire XTemplate. If you do override this method, you should make sure that your + * overridden version also does the same.
+ * @return {Ext.XTemplate} The event XTemplate + */ + getEventAllDayTemplate: function() { + if (!this.eventAllDayTpl) { + var tpl, + body = this.getEventBodyMarkup(); + + tpl = !(Ext.isIE || Ext.isOpera) ? + new Ext.XTemplate( + 'Unlike other calendar views, is not actually a subclass of {@link Ext.calendar.CalendarView CalendarView}. + * Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of + * a {@link Ext.calendar.DayHeaderView DayHeaderView} and a {@link Ext.calendar.DayBodyView DayBodyView}. As such + * DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through + * to the contained views. It also supports the interface required of any calendar view and in turn calls methods + * on the contained views as necessary.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayView = Ext.extend(Ext.Container, { + /** + * @cfg {Boolean} showTime + * True to display the current time in today's box in the calendar, false to not display it (defautls to true) + */ + showTime: true, + /** + * @cfg {Boolean} showTodayText + * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true) + */ + showTodayText: true, + /** + * @cfg {String} todayText + * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today') + */ + todayText: 'Today', + /** + * @cfg {String} ddCreateEventText + * The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to + * 'Create event for {0}' where {0} is a date range supplied by the view) + */ + ddCreateEventText: 'Create event for {0}', + /** + * @cfg {String} ddMoveEventText + * The text to display inside the drag proxy while dragging an event to reposition it (defaults to + * 'Move event to {0}' where {0} is the updated event start date/time supplied by the view) + */ + ddMoveEventText: 'Move event to {0}', + /** + * @cfg {Number} dayCount + * The number of days to display in the view (defaults to 1) + */ + dayCount: 1, + + // private + initComponent : function(){ + // rendering more than 7 days per view is not supported + this.dayCount = this.dayCount > 7 ? 7 : this.dayCount; + + var cfg = Ext.apply({}, this.initialConfig); + cfg.showTime = this.showTime; + cfg.showTodatText = this.showTodayText; + cfg.todayText = this.todayText; + cfg.dayCount = this.dayCount; + cfg.wekkCount = 1; + + var header = Ext.applyIf({ + xtype: 'dayheaderview', + id: this.id+'-hd' + }, cfg); + + var body = Ext.applyIf({ + xtype: 'daybodyview', + id: this.id+'-bd' + }, cfg); + + this.items = [header, body]; + this.addClass('ext-cal-dayview ext-cal-ct'); + + Ext.calendar.DayView.superclass.initComponent.call(this); + }, + + // private + afterRender : function(){ + Ext.calendar.DayView.superclass.afterRender.call(this); + + this.header = Ext.getCmp(this.id+'-hd'); + this.body = Ext.getCmp(this.id+'-bd'); + this.body.on('eventsrendered', this.forceSize, this); + }, + + // private + refresh : function(){ + this.header.refresh(); + this.body.refresh(); + }, + + // private + forceSize: function(){ + // The defer call is mainly for good ol' IE, but it doesn't hurt in + // general to make sure that the window resize is good and done first + // so that we can properly calculate sizes. + (function(){ + var ct = this.el.up('.x-panel-body'), + hd = this.el.child('.ext-cal-day-header'), + h = ct.getHeight() - hd.getHeight(); + + this.el.child('.ext-cal-body-ct').setHeight(h); + }).defer(10, this); + }, + + // private + onResize : function(){ + this.forceSize(); + }, + + // private + getViewBounds : function(){ + return this.header.getViewBounds(); + }, + + /** + * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not + * be the first date displayed in the rendered calendar -- to get the start and end dates displayed + * to the user use {@link #getViewBounds}. + * @return {Date} The start date + */ + getStartDate : function(){ + return this.header.getStartDate(); + }, + + /** + * Sets the start date used to calculate the view boundaries to display. The displayed view will be the + * earliest and latest dates that match the view requirements and contain the date passed to this function. + * @param {Date} dt The date used to calculate the new view boundaries + */ + setStartDate: function(dt){ + this.header.setStartDate(dt, true); + this.body.setStartDate(dt, true); + }, + + // private + renderItems: function(){ + this.header.renderItems(); + this.body.renderItems(); + }, + + /** + * Returns true if the view is currently displaying today's date, else false. + * @return {Boolean} True or false + */ + isToday : function(){ + return this.header.isToday(); + }, + + /** + * Updates the view to contain the passed date + * @param {Date} dt The date to display + */ + moveTo : function(dt, noRefresh){ + this.header.moveTo(dt, noRefresh); + this.body.moveTo(dt, noRefresh); + }, + + /** + * Updates the view to the next consecutive date(s) + */ + moveNext : function(noRefresh){ + this.header.moveNext(noRefresh); + this.body.moveNext(noRefresh); + }, + + /** + * Updates the view to the previous consecutive date(s) + */ + movePrev : function(noRefresh){ + this.header.movePrev(noRefresh); + this.body.movePrev(noRefresh); + }, + + /** + * Shifts the view by the passed number of days relative to the currently set date + * @param {Number} value The number of days (positive or negative) by which to shift the view + */ + moveDays : function(value, noRefresh){ + this.header.moveDays(value, noRefresh); + this.body.moveDays(value, noRefresh); + }, + + /** + * Updates the view to show today + */ + moveToday : function(noRefresh){ + this.header.moveToday(noRefresh); + this.body.moveToday(noRefresh); + } +}); + +Ext.reg('dayview', Ext.calendar.DayView); +/** + * @class Ext.calendar.WeekView + * @extends Ext.calendar.DayView + *Displays a calendar view by week. This class does not usually need ot be used directly as you can + * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including + * the week view.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.WeekView = Ext.extend(Ext.calendar.DayView, { + /** + * @cfg {Number} dayCount + * The number of days to display in the view (defaults to 7) + */ + dayCount: 7 +}); + +Ext.reg('weekview', Ext.calendar.WeekView);/** + * @class Ext.calendar.DateRangeField + * @extends Ext.form.Field + *A combination field that includes start and end dates and times, as well as an optional all-day checkbox.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DateRangeField = Ext.extend(Ext.form.Field, { + /** + * @cfg {String} toText + * The text to display in between the date/time fields (defaults to 'to') + */ + toText: 'to', + /** + * @cfg {String} toText + * The text to display as the label for the all day checkbox (defaults to 'All day') + */ + allDayText: 'All day', + + // private + onRender: function(ct, position) { + if (!this.el) { + this.startDate = new Ext.form.DateField({ + id: this.id + '-start-date', + format: 'n/j/Y', + width: 100, + listeners: { + 'change': { + fn: function() { + this.checkDates('date', 'start'); + }, + scope: this + } + } + }); + this.startTime = new Ext.form.TimeField({ + id: this.id + '-start-time', + hidden: this.showTimes === false, + labelWidth: 0, + hideLabel: true, + width: 90, + listeners: { + 'select': { + fn: function() { + this.checkDates('time', 'start'); + }, + scope: this + } + } + }); + this.endTime = new Ext.form.TimeField({ + id: this.id + '-end-time', + hidden: this.showTimes === false, + labelWidth: 0, + hideLabel: true, + width: 90, + listeners: { + 'select': { + fn: function() { + this.checkDates('time', 'end'); + }, + scope: this + } + } + }); + this.endDate = new Ext.form.DateField({ + id: this.id + '-end-date', + format: 'n/j/Y', + hideLabel: true, + width: 100, + listeners: { + 'change': { + fn: function() { + this.checkDates('date', 'end'); + }, + scope: this + } + } + }); + this.allDay = new Ext.form.Checkbox({ + id: this.id + '-allday', + hidden: this.showTimes === false || this.showAllDay === false, + boxLabel: this.allDayText, + handler: function(chk, checked) { + this.startTime.setVisible(!checked); + this.endTime.setVisible(!checked); + }, + scope: this + }); + this.toLabel = new Ext.form.Label({ + xtype: 'label', + id: this.id + '-to-label', + text: this.toText + }); + + this.fieldCt = new Ext.Container({ + autoEl: { + id: this.id + }, + //make sure the container el has the field's id + cls: 'ext-dt-range', + renderTo: ct, + layout: 'table', + layoutConfig: { + columns: 6 + }, + defaults: { + hideParent: true + }, + items: [ + this.startDate, + this.startTime, + this.toLabel, + this.endTime, + this.endDate, + this.allDay + ] + }); + + this.fieldCt.ownerCt = this; + this.el = this.fieldCt.getEl(); + this.items = new Ext.util.MixedCollection(); + this.items.addAll([this.startDate, this.endDate, this.toLabel, this.startTime, this.endTime, this.allDay]); + } + Ext.calendar.DateRangeField.superclass.onRender.call(this, ct, position); + }, + + // private + checkDates: function(type, startend) { + var startField = Ext.getCmp(this.id + '-start-' + type), + endField = Ext.getCmp(this.id + '-end-' + type), + startValue = this.getDT('start'), + endValue = this.getDT('end'); + + if (startValue > endValue) { + if (startend == 'start') { + endField.setValue(startValue); + } else { + startField.setValue(endValue); + this.checkDates(type, 'start'); + } + } + if (type == 'date') { + this.checkDates('time', startend); + } + }, + + /** + * Returns an array containing the following values in order:DateTime : DateTime : Boolean : Array : DateTime : Object : A custom combo used for choosing a reminder setting for an event.
+ *This is pretty much a standard combo that is simply pre-configured for the options needed by the + * calendar components. The default configs are as follows:
+ width: 200,
+ fieldLabel: 'Reminder',
+ mode: 'local',
+ triggerAction: 'all',
+ forceSelection: true,
+ displayField: 'desc',
+ valueField: 'value'
+A custom form used for detailed editing of events.
+ *This is pretty much a standard form that is simply pre-configured for the options needed by the + * calendar components. It is also configured to automatically bind records of type {@link Ext.calendar.EventRecord} + * to and from the form.
+ *This form also provides custom events specific to the calendar so that other calendar components can be easily + * notified when an event has been edited via this component.
+ *The default configs are as follows:
+ labelWidth: 65,
+ title: 'Event Form',
+ titleTextAdd: 'Add Event',
+ titleTextEdit: 'Edit Event',
+ bodyStyle: 'background:transparent;padding:20px 20px 10px;',
+ border: false,
+ buttonAlign: 'center',
+ autoHeight: true,
+ cls: 'ext-evt-edit-form',
+A custom window containing a basic edit form used for quick editing of events.
+ *This window also provides custom events specific to the calendar so that other calendar components can be easily + * notified when an event has been edited via this component.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.EventEditWindow = function(config) { + var formPanelCfg = { + xtype: 'form', + labelWidth: 65, + frame: false, + bodyStyle: 'background:transparent;padding:5px 10px 10px;', + bodyBorder: false, + border: false, + items: [{ + id: 'title', + name: Ext.calendar.EventMappings.Title.name, + fieldLabel: 'Title', + xtype: 'textfield', + anchor: '100%' + }, + { + xtype: 'daterangefield', + id: 'date-range', + anchor: '100%', + fieldLabel: 'When' + }] + }; + + if (config.calendarStore) { + this.calendarStore = config.calendarStore; + delete config.calendarStore; + + formPanelCfg.items.push({ + xtype: 'calendarpicker', + id: 'calendar', + name: 'calendar', + anchor: '100%', + store: this.calendarStore + }); + } + + Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({ + titleTextAdd: 'Add Event', + titleTextEdit: 'Edit Event', + width: 600, + autocreate: true, + border: true, + closeAction: 'hide', + modal: false, + resizable: false, + buttonAlign: 'left', + savingMessage: 'Saving changes...', + deletingMessage: 'Deleting event...', + + fbar: [{ + xtype: 'tbtext', + text: 'Edit Details...' + }, + '->', { + text: 'Save', + disabled: false, + handler: this.onSave, + scope: this + }, + { + id: 'delete-btn', + text: 'Delete', + disabled: false, + handler: this.onDelete, + scope: this, + hideMode: 'offsets' + }, + { + text: 'Cancel', + disabled: false, + handler: this.onCancel, + scope: this + }], + items: formPanelCfg + }, + config)); +}; + +Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, { + // private + newId: 10000, + + // private + initComponent: function() { + Ext.calendar.EventEditWindow.superclass.initComponent.call(this); + + this.formPanel = this.items.items[0]; + + this.addEvents({ + /** + * @event eventadd + * Fires after a new event is added + * @param {Ext.calendar.EventEditWindow} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added + */ + eventadd: true, + /** + * @event eventupdate + * Fires after an existing event is updated + * @param {Ext.calendar.EventEditWindow} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated + */ + eventupdate: true, + /** + * @event eventdelete + * Fires after an event is deleted + * @param {Ext.calendar.EventEditWindow} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted + */ + eventdelete: true, + /** + * @event eventcancel + * Fires after an event add/edit operation is canceled by the user and no store update took place + * @param {Ext.calendar.EventEditWindow} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled + */ + eventcancel: true, + /** + * @event editdetails + * Fires when the user selects the option in this window to continue editing in the detailed edit form + * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window + * and transfer the current event record to the appropriate instance of the detailed form by showing it + * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}. + * @param {Ext.calendar.EventEditWindow} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited + */ + editdetails: true + }); + }, + + // private + afterRender: function() { + Ext.calendar.EventEditWindow.superclass.afterRender.call(this); + + this.el.addClass('ext-cal-event-win'); + + Ext.get('tblink').on('click', + function(e) { + e.stopEvent(); + this.updateRecord(); + this.fireEvent('editdetails', this, this.activeRecord); + }, + this); + }, + + /** + * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. + * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form + * for an existing event in edit mode, or a plain object containing a StartDate property (and + * optionally an EndDate property) for showing the form in add mode. + * @param {String/Element} animateTarget (optional) The target element or id from which the window should + * animate while opening (defaults to null with no animation) + * @return {Ext.Window} this + */ + show: function(o, animateTarget) { + // Work around the CSS day cell height hack needed for initial render in IE8/strict: + var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget; + + Ext.calendar.EventEditWindow.superclass.show.call(this, anim, + function() { + Ext.getCmp('title').focus(false, 100); + }); + Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide'](); + + var rec, + f = this.formPanel.form; + + if (o.data) { + rec = o; + this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name]; + if (this.isAdd) { + // Enable adding the default record that was passed in + // if it's new even if the user makes no changes + rec.markDirty(); + this.setTitle(this.titleTextAdd); + } + else { + this.setTitle(this.titleTextEdit); + } + + f.loadRecord(rec); + } + else { + this.isAdd = true; + this.setTitle(this.titleTextAdd); + + var M = Ext.calendar.EventMappings, + eventId = M.EventId.name, + start = o[M.StartDate.name], + end = o[M.EndDate.name] || start.add('h', 1); + + rec = new Ext.calendar.EventRecord(); + rec.data[M.EventId.name] = this.newId++; + rec.data[M.StartDate.name] = start; + rec.data[M.EndDate.name] = end; + rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate(); + rec.data[M.IsNew.name] = true; + + f.reset(); + f.loadRecord(rec); + } + + if (this.calendarStore) { + Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]); + } + Ext.getCmp('date-range').setValue(rec.data); + this.activeRecord = rec; + + return this; + }, + + // private + roundTime: function(dt, incr) { + incr = incr || 15; + var m = parseInt(dt.getMinutes(), 10); + return dt.add('mi', incr - (m % incr)); + }, + + // private + onCancel: function() { + this.cleanup(true); + this.fireEvent('eventcancel', this); + }, + + // private + cleanup: function(hide) { + if (this.activeRecord && this.activeRecord.dirty) { + this.activeRecord.reject(); + } + delete this.activeRecord; + + if (hide === true) { + // Work around the CSS day cell height hack needed for initial render in IE8/strict: + //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget; + this.hide(); + } + }, + + // private + updateRecord: function() { + var f = this.formPanel.form, + dates = Ext.getCmp('date-range').getValue(), + M = Ext.calendar.EventMappings; + + f.updateRecord(this.activeRecord); + this.activeRecord.set(M.StartDate.name, dates[0]); + this.activeRecord.set(M.EndDate.name, dates[1]); + this.activeRecord.set(M.IsAllDay.name, dates[2]); + this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue()); + }, + + // private + onSave: function() { + if (!this.formPanel.form.isValid()) { + return; + } + this.updateRecord(); + + if (!this.activeRecord.dirty) { + this.onCancel(); + return; + } + + this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord); + }, + + // private + onDelete: function() { + this.fireEvent('eventdelete', this, this.activeRecord); + } +});/** + * @class Ext.calendar.CalendarPanel + * @extends Ext.Panel + *This is the default container for Ext calendar views. It supports day, week and month views as well + * as a built-in event edit form. The only requirement for displaying a calendar is passing in a valid + * {@link #calendarStore} config containing records of type {@link Ext.calendar.EventRecord EventRecord}. In order + * to make the calendar interactive (enable editing, drag/drop, etc.) you can handle any of the various + * events fired by the underlying views and exposed through the CalendarPanel.
+ * {@link #layoutConfig} option if needed. + * @constructor + * @param {Object} config The config object + * @xtype calendarpanel + */ +Ext.calendar.CalendarPanel = Ext.extend(Ext.Panel, { + /** + * @cfg {Boolean} showDayView + * True to include the day view (and toolbar button), false to hide them (defaults to true). + */ + showDayView: true, + /** + * @cfg {Boolean} showWeekView + * True to include the week view (and toolbar button), false to hide them (defaults to true). + */ + showWeekView: true, + /** + * @cfg {Boolean} showMonthView + * True to include the month view (and toolbar button), false to hide them (defaults to true). + * If the day and week views are both hidden, the month view will show by default even if + * this config is false. + */ + showMonthView: true, + /** + * @cfg {Boolean} showNavBar + * True to display the calendar navigation toolbar, false to hide it (defaults to true). Note that + * if you hide the default navigation toolbar you'll have to provide an alternate means of navigating the calendar. + */ + showNavBar: true, + /** + * @cfg {String} todayText + * Alternate text to use for the 'Today' nav bar button. + */ + todayText: 'Today', + /** + * @cfg {Boolean} showTodayText + * True to show the value of {@link #todayText} instead of today's date in the calendar's current day box, + * false to display the day number(defaults to true). + */ + showTodayText: true, + /** + * @cfg {Boolean} showTime + * True to display the current time next to the date in the calendar's current day box, false to not show it + * (defaults to true). + */ + showTime: true, + /** + * @cfg {String} dayText + * Alternate text to use for the 'Day' nav bar button. + */ + dayText: 'Day', + /** + * @cfg {String} weekText + * Alternate text to use for the 'Week' nav bar button. + */ + weekText: 'Week', + /** + * @cfg {String} monthText + * Alternate text to use for the 'Month' nav bar button. + */ + monthText: 'Month', + + // private + layoutConfig: { + layoutOnCardChange: true, + deferredRender: true + }, + + // private property + startDate: new Date(), + + // private + initComponent: function() { + this.tbar = { + cls: 'ext-cal-toolbar', + border: true, + buttonAlign: 'center', + items: [{ + id: this.id + '-tb-prev', + handler: this.onPrevClick, + scope: this, + iconCls: 'x-tbar-page-prev' + }] + }; + + this.viewCount = 0; + + if (this.showDayView) { + this.tbar.items.push({ + id: this.id + '-tb-day', + text: this.dayText, + handler: this.onDayClick, + scope: this, + toggleGroup: 'tb-views' + }); + this.viewCount++; + } + if (this.showWeekView) { + this.tbar.items.push({ + id: this.id + '-tb-week', + text: this.weekText, + handler: this.onWeekClick, + scope: this, + toggleGroup: 'tb-views' + }); + this.viewCount++; + } + if (this.showMonthView || this.viewCount == 0) { + this.tbar.items.push({ + id: this.id + '-tb-month', + text: this.monthText, + handler: this.onMonthClick, + scope: this, + toggleGroup: 'tb-views' + }); + this.viewCount++; + this.showMonthView = true; + } + this.tbar.items.push({ + id: this.id + '-tb-next', + handler: this.onNextClick, + scope: this, + iconCls: 'x-tbar-page-next' + }); + this.tbar.items.push('->'); + + var idx = this.viewCount - 1; + this.activeItem = this.activeItem === undefined ? idx: (this.activeItem > idx ? idx: this.activeItem); + + if (this.showNavBar === false) { + delete this.tbar; + this.addClass('x-calendar-nonav'); + } + + Ext.calendar.CalendarPanel.superclass.initComponent.call(this); + + this.addEvents({ + /** + * @event eventadd + * Fires after a new event is added to the underlying store + * @param {Ext.calendar.CalendarPanel} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added + */ + eventadd: true, + /** + * @event eventupdate + * Fires after an existing event is updated + * @param {Ext.calendar.CalendarPanel} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated + */ + eventupdate: true, + /** + * @event eventdelete + * Fires after an event is removed from the underlying store + * @param {Ext.calendar.CalendarPanel} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was removed + */ + eventdelete: true, + /** + * @event eventcancel + * Fires after an event add/edit operation is canceled by the user and no store update took place + * @param {Ext.calendar.CalendarPanel} this + * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled + */ + eventcancel: true, + /** + * @event viewchange + * Fires after a different calendar view is activated (but not when the event edit form is activated) + * @param {Ext.calendar.CalendarPanel} this + * @param {Ext.CalendarView} view The view being activated (any valid {@link Ext.calendar.CalendarView CalendarView} subclass) + * @param {Object} info Extra information about the newly activated view. This is a plain object + * with following properties:activeDate : viewStart : viewEnd :