--- /dev/null
+/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.calendar');
+
+ (function() {
+ Ext.apply(Ext.calendar, {
+ Date: {
+ diffDays: function(start, end) {
+ day = 1000 * 60 * 60 * 24;
+ diff = end.clearTime(true).getTime() - start.clearTime(true).getTime();
+ return Math.ceil(diff / day);
+ },
+
+ copyTime: function(fromDt, toDt) {
+ var dt = toDt.clone();
+ dt.setHours(
+ fromDt.getHours(),
+ fromDt.getMinutes(),
+ fromDt.getSeconds(),
+ fromDt.getMilliseconds());
+
+ return dt;
+ },
+
+ compare: function(dt1, dt2, precise) {
+ if (precise !== true) {
+ dt1 = dt1.clone();
+ dt1.setMilliseconds(0);
+ dt2 = dt2.clone();
+ dt2.setMilliseconds(0);
+ }
+ return dt2.getTime() - dt1.getTime();
+ },
+
+ // private helper fn
+ maxOrMin: function(max) {
+ var dt = (max ? 0: Number.MAX_VALUE),
+ i = 0,
+ args = arguments[1],
+ ln = args.length;
+ for (; i < ln; i++) {
+ dt = Math[max ? 'max': 'min'](dt, args[i].getTime());
+ }
+ return new Date(dt);
+ },
+
+ max: function() {
+ return this.maxOrMin.apply(this, [true, arguments]);
+ },
+
+ min: function() {
+ return this.maxOrMin.apply(this, [false, arguments]);
+ }
+ }
+ });
+})();/**
+ * @class Ext.calendar.DayHeaderTemplate
+ * @extends Ext.XTemplate
+ * <p>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}.</p>
+ * <p>This template is automatically bound to the underlying event store by the
+ * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
+ * <p>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}.</p>
+ * @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,
+ '<div class="ext-cal-hd-ct">',
+ '<table class="ext-cal-hd-days-tbl" cellspacing="0" cellpadding="0">',
+ '<tbody>',
+ '<tr>',
+ '<td class="ext-cal-gutter"></td>',
+ '<td class="ext-cal-hd-days-td"><div class="ext-cal-hd-ad-inner">{allDayTpl}</div></td>',
+ '<td class="ext-cal-gutter-rt"></td>',
+ '</tr>',
+ '</tobdy>',
+ '</table>',
+ '</div>'
+ );
+};
+
+Ext.extend(Ext.calendar.DayHeaderTemplate, Ext.XTemplate, {
+ applyTemplate : function(o){
+ return Ext.calendar.DayHeaderTemplate.superclass.applyTemplate.call(this, {
+ allDayTpl: this.allDayTpl.apply(o)
+ });
+ }
+});
+
+Ext.calendar.DayHeaderTemplate.prototype.apply = Ext.calendar.DayHeaderTemplate.prototype.applyTemplate;
+/**
+ * @class Ext.calendar.DayBodyTemplate
+ * @extends Ext.XTemplate
+ * <p>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}.</p>
+ * <p>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}.</p>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.DayBodyTemplate = function(config){
+
+ Ext.apply(this, config);
+
+ Ext.calendar.DayBodyTemplate.superclass.constructor.call(this,
+ '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
+ '<tbody>',
+ '<tr height="1">',
+ '<td class="ext-cal-gutter"></td>',
+ '<td colspan="{dayCount}">',
+ '<div class="ext-cal-bg-rows">',
+ '<div class="ext-cal-bg-rows-inner">',
+ '<tpl for="times">',
+ '<div class="ext-cal-bg-row">',
+ '<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
+ '</div>',
+ '</tpl>',
+ '</div>',
+ '</div>',
+ '</td>',
+ '</tr>',
+ '<tr>',
+ '<td class="ext-cal-day-times">',
+ '<tpl for="times">',
+ '<div class="ext-cal-bg-row">',
+ '<div class="ext-cal-day-time-inner">{.}</div>',
+ '</div>',
+ '</tpl>',
+ '</td>',
+ '<tpl for="days">',
+ '<td class="ext-cal-day-col">',
+ '<div class="ext-cal-day-col-inner">',
+ '<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
+ '</div>',
+ '</td>',
+ '</tpl>',
+ '</tr>',
+ '</tbody>',
+ '</table>'
+ );
+};
+
+Ext.extend(Ext.calendar.DayBodyTemplate, Ext.XTemplate, {
+ // private
+ applyTemplate : function(o){
+ this.today = new Date().clearTime();
+ this.dayCount = this.dayCount || 1;
+
+ var i = 0, days = [],
+ dt = o.viewStart.clone(),
+ times;
+
+ for(; i<this.dayCount; i++){
+ days[i] = dt.add(Date.DAY, i);
+ }
+
+ times = [];
+ dt = new Date().clearTime();
+ for(i=0; i<24; i++){
+ times.push(dt.format('ga'));
+ dt = dt.add(Date.HOUR, 1);
+ }
+
+ return Ext.calendar.DayBodyTemplate.superclass.applyTemplate.call(this, {
+ days: days,
+ dayCount: days.length,
+ times: times
+ });
+ }
+});
+
+Ext.calendar.DayBodyTemplate.prototype.apply = Ext.calendar.DayBodyTemplate.prototype.applyTemplate;
+/**
+ * @class Ext.calendar.DayViewTemplate
+ * @extends Ext.XTemplate
+ * <p>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 this class simply defers to instances of {@link Ext.calerndar.DayHeaderTemplate}
+ * and {@link Ext.calerndar.DayBodyTemplate} to perform the actual rendering logic, but it also provides the overall calendar view
+ * container that contains them both. As such this is the template that should be used when rendering day or week views.</p>
+ * <p>This template is automatically bound to the underlying event store by the
+ * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
+ * @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,
+ '<div class="ext-cal-inner-ct">',
+ '{headerTpl}',
+ '{bodyTpl}',
+ '</div>'
+ );
+};
+
+Ext.extend(Ext.calendar.DayViewTemplate, Ext.XTemplate, {
+ // private
+ applyTemplate : function(o){
+ return Ext.calendar.DayViewTemplate.superclass.applyTemplate.call(this, {
+ headerTpl: this.headerTpl.apply(o),
+ bodyTpl: this.bodyTpl.apply(o)
+ });
+ }
+});
+
+Ext.calendar.DayViewTemplate.prototype.apply = Ext.calendar.DayViewTemplate.prototype.applyTemplate;
+/**
+ * @class Ext.calendar.BoxLayoutTemplate
+ * @extends Ext.XTemplate
+ * <p>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}.</p>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.BoxLayoutTemplate = function(config){
+
+ Ext.apply(this, config);
+
+ var weekLinkTpl = this.showWeekLinks ? '<div id="{weekLinkId}" class="ext-cal-week-link">{weekNum}</div>' : '';
+
+ Ext.calendar.BoxLayoutTemplate.superclass.constructor.call(this,
+ '<tpl for="weeks">',
+ '<div id="{[this.id]}-wk-{[xindex-1]}" class="ext-cal-wk-ct" style="top:{[this.getRowTop(xindex, xcount)]}%; height:{[this.getRowHeight(xcount)]}%;">',
+ weekLinkTpl,
+ '<table class="ext-cal-bg-tbl" cellpadding="0" cellspacing="0">',
+ '<tbody>',
+ '<tr>',
+ '<tpl for=".">',
+ '<td id="{[this.id]}-day-{date:date("Ymd")}" class="{cellCls}"> </td>',
+ '</tpl>',
+ '</tr>',
+ '</tbody>',
+ '</table>',
+ '<table class="ext-cal-evt-tbl" cellpadding="0" cellspacing="0">',
+ '<tbody>',
+ '<tr>',
+ '<tpl for=".">',
+ '<td id="{[this.id]}-ev-day-{date:date("Ymd")}" class="{titleCls}"><div>{title}</div></td>',
+ '</tpl>',
+ '</tr>',
+ '</tbody>',
+ '</table>',
+ '</div>',
+ '</tpl>', {
+ getRowTop: function(i, ln){
+ return ((i-1)*(100/ln));
+ },
+ getRowHeight: function(ln){
+ return 100/ln;
+ }
+ }
+ );
+};
+
+Ext.extend(Ext.calendar.BoxLayoutTemplate, Ext.XTemplate, {
+ // private
+ applyTemplate : function(o){
+
+ Ext.apply(this, o);
+
+ var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
+ weeks = [[]],
+ today = new Date().clearTime(),
+ dt = this.viewStart.clone(),
+ thisMonth = this.startDate.getMonth();
+
+ for(; w < this.weekCount || this.weekCount == -1; w++){
+ if(dt > this.viewEnd){
+ break;
+ }
+ weeks[w] = [];
+
+ for(var d = 0; d < this.dayCount; d++){
+ isToday = dt.getTime() === today.getTime();
+ showMonth = first || (dt.getDate() == 1);
+ prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
+ nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
+
+ if(dt.getDay() == 1){
+ // The ISO week format 'W' is relative to a Monday week start. If we
+ // make this check on Sunday the week number will be off.
+ weeks[w].weekNum = this.showWeekNumbers ? dt.format('W') : ' ';
+ weeks[w].weekLinkId = 'ext-cal-week-'+dt.format('Ymd');
+ }
+
+ if(showMonth){
+ if(isToday){
+ title = this.getTodayText();
+ }
+ else{
+ title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
+ }
+ }
+ else{
+ var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
+ title = isToday ? this.getTodayText() : dt.format(dayFmt);
+ }
+
+ weeks[w].push({
+ title: title,
+ date: dt.clone(),
+ titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
+ (w==0 ? ' ext-cal-dtitle-first' : '') +
+ (prevMonth ? ' ext-cal-dtitle-prev' : '') +
+ (nextMonth ? ' ext-cal-dtitle-next' : ''),
+ cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
+ (d==0 ? ' ext-cal-day-first' : '') +
+ (prevMonth ? ' ext-cal-day-prev' : '') +
+ (nextMonth ? ' ext-cal-day-next' : '')
+ });
+ dt = dt.add(Date.DAY, 1);
+ first = false;
+ }
+ }
+
+ return Ext.calendar.BoxLayoutTemplate.superclass.applyTemplate.call(this, {
+ weeks: weeks
+ });
+ },
+
+ // private
+ getTodayText : function(){
+ var dt = new Date().format('l, F j, Y'),
+ todayText = this.showTodayText !== false ? this.todayText : '',
+ timeText = this.showTime !== false ? ' <span id="'+this.id+'-clock" class="ext-cal-dtitle-time">' +
+ new Date().format('g:i a') + '</span>' : '',
+ separator = todayText.length > 0 || timeText.length > 0 ? ' — ' : '';
+
+ if(this.dayCount == 1){
+ return dt + separator + todayText + timeText;
+ }
+ fmt = this.weekCount == 1 ? 'D j' : 'j';
+ return todayText.length > 0 ? todayText + timeText : new Date().format(fmt) + timeText;
+ }
+});
+
+Ext.calendar.BoxLayoutTemplate.prototype.apply = Ext.calendar.BoxLayoutTemplate.prototype.applyTemplate;
+/**\r
+ * @class Ext.calendar.MonthViewTemplate\r
+ * @extends Ext.XTemplate\r
+ * <p>This is the template used to render the {@link Ext.calendar.MonthView MonthView}. Internally this class defers to an\r
+ * instance of {@link Ext.calerndar.BoxLayoutTemplate} to handle the inner layout rendering and adds containing elements around\r
+ * that to form the month view.</p> \r
+ * <p>This template is automatically bound to the underlying event store by the \r
+ * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>\r
+ * @constructor\r
+ * @param {Object} config The config object\r
+ */\r
+Ext.calendar.MonthViewTemplate = function(config){\r
+ \r
+ Ext.apply(this, config);\r
+ \r
+ this.weekTpl = new Ext.calendar.BoxLayoutTemplate(config);\r
+ this.weekTpl.compile();\r
+ \r
+ var weekLinkTpl = this.showWeekLinks ? '<div class="ext-cal-week-link-hd"> </div>' : '';\r
+ \r
+ Ext.calendar.MonthViewTemplate.superclass.constructor.call(this,\r
+ '<div class="ext-cal-inner-ct {extraClasses}">',\r
+ '<div class="ext-cal-hd-ct ext-cal-month-hd">',\r
+ weekLinkTpl,\r
+ '<table class="ext-cal-hd-days-tbl" cellpadding="0" cellspacing="0">',\r
+ '<tbody>',\r
+ '<tr>',\r
+ '<tpl for="days">',\r
+ '<th class="ext-cal-hd-day{[xindex==1 ? " ext-cal-day-first" : ""]}" title="{.:date("l, F j, Y")}">{.:date("D")}</th>',\r
+ '</tpl>',\r
+ '</tr>',\r
+ '</tbody>',\r
+ '</table>',\r
+ '</div>',\r
+ '<div class="ext-cal-body-ct">{weeks}</div>',\r
+ '</div>'\r
+ );\r
+};\r
+\r
+Ext.extend(Ext.calendar.MonthViewTemplate, Ext.XTemplate, {\r
+ // private\r
+ applyTemplate : function(o){\r
+ var days = [],\r
+ weeks = this.weekTpl.apply(o),\r
+ dt = o.viewStart;\r
+ \r
+ for(var i = 0; i < 7; i++){\r
+ days.push(dt.add(Date.DAY, i));\r
+ }\r
+ \r
+ var extraClasses = this.showHeader === true ? '' : 'ext-cal-noheader';\r
+ if(this.showWeekLinks){\r
+ extraClasses += ' ext-cal-week-links';\r
+ }\r
+ \r
+ return Ext.calendar.MonthViewTemplate.superclass.applyTemplate.call(this, {\r
+ days: days,\r
+ weeks: weeks,\r
+ extraClasses: extraClasses \r
+ });\r
+ }\r
+});\r
+\r
+Ext.calendar.MonthViewTemplate.prototype.apply = Ext.calendar.MonthViewTemplate.prototype.applyTemplate;\r
+/**
+ * @class Ext.dd.ScrollManager
+ * <p>Provides automatic scrolling of overflow regions in the page during drag operations.</p>
+ * <p>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
+ * <tt>ddScrollConfig</tt> object to the target element that contains these properties: {@link #hthresh},
+ * {@link #vthresh}, {@link #increment} and {@link #frequency}. Example usage:
+ * <pre><code>
+var el = Ext.get('scroll-ct');
+el.ddScrollConfig = {
+ vthresh: 50,
+ hthresh: -1,
+ frequency: 100,
+ increment: 200
+};
+Ext.dd.ScrollManager.register(el);
+</code></pre>
+ * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
+ * @singleton
+ */
+Ext.dd.ScrollManager = function() {
+ var ddm = Ext.dd.DragDropMgr,
+ els = {},
+ dragEl = null,
+ proc = {},
+ onStop = function(e) {
+ dragEl = null;
+ clearProc();
+ },
+ triggerRefresh = function() {
+ if (ddm.dragCurrent) {
+ ddm.refreshCache(ddm.dragCurrent.groups);
+ }
+ },
+ doScroll = function() {
+ if (ddm.dragCurrent) {
+ var dds = Ext.dd.ScrollManager,
+ inc = proc.el.ddScrollConfig ? proc.el.ddScrollConfig.increment: dds.increment;
+ if (!dds.animate) {
+ if (proc.el.scroll(proc.dir, inc)) {
+ triggerRefresh();
+ }
+ } else {
+ proc.el.scroll(proc.dir, inc, true, dds.animDuration, triggerRefresh);
+ }
+ }
+ },
+ clearProc = function() {
+ if (proc.id) {
+ clearInterval(proc.id);
+ }
+ proc.id = 0;
+ proc.el = null;
+ proc.dir = "";
+ },
+ startProc = function(el, dir) {
+ clearProc();
+ proc.el = el;
+ proc.dir = dir;
+ var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ?
+ el.ddScrollConfig.frequency: Ext.dd.ScrollManager.frequency,
+ group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup: undefined;
+
+ if (group === undefined || ddm.dragCurrent.ddGroup == group) {
+ proc.id = setInterval(doScroll, freq);
+ }
+ },
+ onFire = function(e, isDrop) {
+ if (isDrop || !ddm.dragCurrent) {
+ return;
+ }
+ var dds = Ext.dd.ScrollManager;
+ if (!dragEl || dragEl != ddm.dragCurrent) {
+ dragEl = ddm.dragCurrent;
+ // refresh regions on drag start
+ dds.refreshCache();
+ }
+
+ var xy = Ext.lib.Event.getXY(e),
+ pt = new Ext.lib.Point(xy[0], xy[1]),
+ id,
+ el,
+ r,
+ c;
+ for (id in els) {
+ if (els.hasOwnProperty(id)) {
+ el = els[id];
+ r = el._region;
+ c = el.ddScrollConfig ? el.ddScrollConfig: dds;
+ if (r && r.contains(pt) && el.isScrollable()) {
+ if (r.bottom - pt.y <= c.vthresh) {
+ if (proc.el != el) {
+ startProc(el, "down");
+ }
+ return;
+ } else if (r.right - pt.x <= c.hthresh) {
+ if (proc.el != el) {
+ startProc(el, "left");
+ }
+ return;
+ } else if (pt.y - r.top <= c.vthresh) {
+ if (proc.el != el) {
+ startProc(el, "up");
+ }
+ return;
+ } else if (pt.x - r.left <= c.hthresh) {
+ if (proc.el != el) {
+ startProc(el, "right");
+ }
+ return;
+ }
+ }
+ }
+ }
+ clearProc();
+ };
+
+ ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
+ ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
+
+ return {
+ /**
+ * Registers new overflow element(s) to auto scroll
+ * @param {Mixed/Array} el The id of or the element to be scrolled or an array of either
+ */
+ register: function(el) {
+ if (Ext.isArray(el)) {
+ var i = 0,
+ len = el.length;
+ for (; i < len; i++) {
+ this.register(el[i]);
+ }
+ } else {
+ el = Ext.get(el);
+ els[el.id] = el;
+ }
+ },
+
+ /**
+ * Unregisters overflow element(s) so they are no longer scrolled
+ * @param {Mixed/Array} el The id of or the element to be removed or an array of either
+ */
+ unregister: function(el) {
+ if (Ext.isArray(el)) {
+ var i = 0,
+ len = el.length;
+ for (; i < len; i++) {
+ this.unregister(el[i]);
+ }
+ } else {
+ el = Ext.get(el);
+ delete els[el.id];
+ }
+ },
+
+ /**
+ * The number of pixels from the top or bottom edge of a container the pointer needs to be to
+ * trigger scrolling (defaults to 25)
+ * @type Number
+ */
+ vthresh: 25,
+ /**
+ * The number of pixels from the right or left edge of a container the pointer needs to be to
+ * trigger scrolling (defaults to 25)
+ * @type Number
+ */
+ hthresh: 25,
+
+ /**
+ * The number of pixels to scroll in each scroll increment (defaults to 50)
+ * @type Number
+ */
+ increment: 100,
+
+ /**
+ * The frequency of scrolls in milliseconds (defaults to 500)
+ * @type Number
+ */
+ frequency: 500,
+
+ /**
+ * True to animate the scroll (defaults to true)
+ * @type Boolean
+ */
+ animate: true,
+
+ /**
+ * The animation duration in seconds -
+ * MUST BE less than Ext.dd.ScrollManager.frequency! (defaults to .4)
+ * @type Number
+ */
+ animDuration: 0.4,
+
+ /**
+ * Manually trigger a cache refresh.
+ */
+ refreshCache: function() {
+ var id;
+ for (id in els) {
+ if (els.hasOwnProperty(id)) {
+ if (typeof els[id] == 'object') {
+ // for people extending the object prototype
+ els[id]._region = els[id].getRegion();
+ }
+ }
+ }
+ }
+ };
+}();/*
+ * @class Ext.calendar.StatusProxy
+ * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. It also
+ * contains a calendar-specific drag status message containing details about the dragged event's target drop date range.
+ * This is the default drag proxy used by all calendar views.
+ * @constructor
+ * @param {Object} config
+ */
+Ext.calendar.StatusProxy = function(config) {
+ Ext.apply(this, config);
+ this.id = this.id || Ext.id();
+ this.el = new Ext.Layer({
+ dh: {
+ id: this.id,
+ cls: 'ext-dd-drag-proxy x-dd-drag-proxy ' + this.dropNotAllowed,
+ cn: [
+ {
+ cls: 'x-dd-drop-icon'
+ },
+ {
+ cls: 'ext-dd-ghost-ct',
+ cn: [
+ {
+ cls: 'x-dd-drag-ghost'
+ },
+ {
+ cls: 'ext-dd-msg'
+ }
+ ]
+ }
+ ]
+ },
+ shadow: !config || config.shadow !== false
+ });
+ this.ghost = Ext.get(this.el.dom.childNodes[1].childNodes[0]);
+ this.message = Ext.get(this.el.dom.childNodes[1].childNodes[1]);
+ this.dropStatus = this.dropNotAllowed;
+};
+
+Ext.extend(Ext.calendar.StatusProxy, Ext.dd.StatusProxy, {
+ /**
+ * @cfg {String} moveEventCls
+ * The CSS class to apply to the status element when an event is being dragged (defaults to 'ext-cal-dd-move').
+ */
+ moveEventCls: 'ext-cal-dd-move',
+ /**
+ * @cfg {String} addEventCls
+ * The CSS class to apply to the status element when drop is not allowed (defaults to 'ext-cal-dd-add').
+ */
+ addEventCls: 'ext-cal-dd-add',
+
+ // inherit docs
+ update: function(html) {
+ if (typeof html == 'string') {
+ this.ghost.update(html);
+ } else {
+ this.ghost.update('');
+ html.style.margin = '0';
+ this.ghost.dom.appendChild(html);
+ }
+ var el = this.ghost.dom.firstChild;
+ if (el) {
+ Ext.fly(el).setStyle('float', 'none').setHeight('auto');
+ Ext.getDom(el).id += '-ddproxy';
+ }
+ },
+
+ /**
+ * Update the calendar-specific drag status message without altering the ghost element.
+ * @param {String} msg The new status message
+ */
+ updateMsg: function(msg) {
+ this.message.update(msg);
+ }
+});/*
+ * Internal drag zone implementation for the calendar components. This provides base functionality
+ * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.
+ */
+Ext.calendar.DragZone = Ext.extend(Ext.dd.DragZone, {
+ ddGroup: 'CalendarDD',
+ eventSelector: '.ext-cal-evt',
+
+ constructor: function(el, config) {
+ if (!Ext.calendar._statusProxyInstance) {
+ Ext.calendar._statusProxyInstance = new Ext.calendar.StatusProxy();
+ }
+ this.proxy = Ext.calendar._statusProxyInstance;
+ Ext.calendar.DragZone.superclass.constructor.call(this, el, config);
+ },
+
+ getDragData: function(e) {
+ // Check whether we are dragging on an event first
+ var t = e.getTarget(this.eventSelector, 3);
+ if (t) {
+ var rec = this.view.getEventRecordFromEl(t);
+ return {
+ type: 'eventdrag',
+ ddel: t,
+ eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
+ eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
+ proxy: this.proxy
+ };
+ }
+
+ // If not dragging an event then we are dragging on
+ // the calendar to add a new event
+ t = this.view.getDayAt(e.getPageX(), e.getPageY());
+ if (t.el) {
+ return {
+ type: 'caldrag',
+ start: t.date,
+ proxy: this.proxy
+ };
+ }
+ return null;
+ },
+
+ onInitDrag: function(x, y) {
+ if (this.dragData.ddel) {
+ var ghost = this.dragData.ddel.cloneNode(true),
+ child = Ext.fly(ghost).child('dl');
+
+ Ext.fly(ghost).setWidth('auto');
+
+ if (child) {
+ // for IE/Opera
+ child.setHeight('auto');
+ }
+ this.proxy.update(ghost);
+ this.onStartDrag(x, y);
+ }
+ else if (this.dragData.start) {
+ this.onStartDrag(x, y);
+ }
+ this.view.onInitDrag();
+ return true;
+ },
+
+ afterRepair: function() {
+ if (Ext.enableFx && this.dragData.ddel) {
+ Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || 'c3daf9');
+ }
+ this.dragging = false;
+ },
+
+ getRepairXY: function(e) {
+ if (this.dragData.ddel) {
+ return Ext.Element.fly(this.dragData.ddel).getXY();
+ }
+ },
+
+ afterInvalidDrop: function(e, id) {
+ Ext.select('.ext-dd-shim').hide();
+ }
+});
+
+/*
+ * Internal drop zone implementation for the calendar components. This provides base functionality
+ * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.
+ */
+Ext.calendar.DropZone = Ext.extend(Ext.dd.DropZone, {
+ ddGroup: 'CalendarDD',
+ eventSelector: '.ext-cal-evt',
+
+ // private
+ shims: [],
+
+ getTargetFromEvent: function(e) {
+ var dragOffset = this.dragOffset || 0,
+ y = e.getPageY() - dragOffset,
+ d = this.view.getDayAt(e.getPageX(), y);
+
+ return d.el ? d: null;
+ },
+
+ onNodeOver: function(n, dd, e, data) {
+ var D = Ext.calendar.Date,
+ start = data.type == 'eventdrag' ? n.date: D.min(data.start, n.date),
+ end = data.type == 'eventdrag' ? n.date.add(Date.DAY, D.diffDays(data.eventStart, data.eventEnd)) :
+ D.max(data.start, n.date);
+
+ if (!this.dragStartDate || !this.dragEndDate || (D.diffDays(start, this.dragStartDate) != 0) || (D.diffDays(end, this.dragEndDate) != 0)) {
+ this.dragStartDate = start;
+ this.dragEndDate = end.clearTime().add(Date.DAY, 1).add(Date.MILLI, -1);
+ this.shim(start, end);
+
+ var range = start.format('n/j');
+ if (D.diffDays(start, end) > 0) {
+ range += '-' + end.format('n/j');
+ }
+ var msg = String.format(data.type == 'eventdrag' ? this.moveText: this.createText, range);
+ data.proxy.updateMsg(msg);
+ }
+ return this.dropAllowed;
+ },
+
+ shim: function(start, end) {
+ this.currWeek = -1;
+ var dt = start.clone(),
+ i = 0,
+ shim,
+ box,
+ cnt = Ext.calendar.Date.diffDays(dt, end) + 1;
+
+ Ext.each(this.shims,
+ function(shim) {
+ if (shim) {
+ shim.isActive = false;
+ }
+ }
+ );
+
+ while (i++<cnt) {
+ var dayEl = this.view.getDayEl(dt);
+
+ // if the date is not in the current view ignore it (this
+ // can happen when an event is dragged to the end of the
+ // month so that it ends outside the view)
+ if (dayEl) {
+ var wk = this.view.getWeekIndex(dt);
+ shim = this.shims[wk];
+
+ if (!shim) {
+ shim = this.createShim();
+ this.shims[wk] = shim;
+ }
+ if (wk != this.currWeek) {
+ shim.boxInfo = dayEl.getBox();
+ this.currWeek = wk;
+ }
+ else {
+ box = dayEl.getBox();
+ shim.boxInfo.right = box.right;
+ shim.boxInfo.width = box.right - shim.boxInfo.x;
+ }
+ shim.isActive = true;
+ }
+ dt = dt.add(Date.DAY, 1);
+ }
+
+ Ext.each(this.shims,
+ function(shim) {
+ if (shim) {
+ if (shim.isActive) {
+ shim.show();
+ shim.setBox(shim.boxInfo);
+ }
+ else if (shim.isVisible()) {
+ shim.hide();
+ }
+ }
+ });
+ },
+
+ createShim: function() {
+ if (!this.shimCt) {
+ this.shimCt = Ext.get('ext-dd-shim-ct');
+ if (!this.shimCt) {
+ this.shimCt = document.createElement('div');
+ this.shimCt.id = 'ext-dd-shim-ct';
+ Ext.getBody().appendChild(this.shimCt);
+ }
+ }
+ var el = document.createElement('div');
+ el.className = 'ext-dd-shim';
+ this.shimCt.appendChild(el);
+
+ return new Ext.Layer({
+ shadow: false,
+ useDisplay: true,
+ constrain: false
+ },
+ el);
+ },
+
+ clearShims: function() {
+ Ext.each(this.shims,
+ function(shim) {
+ if (shim) {
+ shim.hide();
+ }
+ });
+ },
+
+ onContainerOver: function(dd, e, data) {
+ return this.dropAllowed;
+ },
+
+ onCalendarDragComplete: function() {
+ delete this.dragStartDate;
+ delete this.dragEndDate;
+ this.clearShims();
+ },
+
+ onNodeDrop: function(n, dd, e, data) {
+ if (n && data) {
+ if (data.type == 'eventdrag') {
+ var rec = this.view.getEventRecordFromEl(data.ddel),
+ dt = Ext.calendar.Date.copyTime(rec.data[Ext.calendar.EventMappings.StartDate.name], n.date);
+
+ this.view.onEventDrop(rec, dt);
+ this.onCalendarDragComplete();
+ return true;
+ }
+ if (data.type == 'caldrag') {
+ this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
+ this.onCalendarDragComplete.createDelegate(this));
+ //shims are NOT cleared here -- they stay visible until the handling
+ //code calls the onCalendarDragComplete callback which hides them.
+ return true;
+ }
+ }
+ this.onCalendarDragComplete();
+ return false;
+ },
+
+ onContainerDrop: function(dd, e, data) {
+ this.onCalendarDragComplete();
+ return false;
+ },
+
+ destroy: function() {
+ Ext.calendar.DropZone.superclass.destroy.call(this);
+ Ext.destroy(this.shimCt);
+ }
+});
+
+/*
+ * Internal drag zone implementation for the calendar day and week views.
+ */
+Ext.calendar.DayViewDragZone = Ext.extend(Ext.calendar.DragZone, {
+ ddGroup: 'DayViewDD',
+ resizeSelector: '.ext-evt-rsz',
+
+ getDragData: function(e) {
+ var t = e.getTarget(this.resizeSelector, 2, true),
+ p,
+ rec;
+ if (t) {
+ p = t.parent(this.eventSelector);
+ rec = this.view.getEventRecordFromEl(p);
+
+ return {
+ type: 'eventresize',
+ ddel: p.dom,
+ eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
+ eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
+ proxy: this.proxy
+ };
+ }
+ t = e.getTarget(this.eventSelector, 3);
+ if (t) {
+ rec = this.view.getEventRecordFromEl(t);
+ return {
+ type: 'eventdrag',
+ ddel: t,
+ eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
+ eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
+ proxy: this.proxy
+ };
+ }
+
+ // If not dragging/resizing an event then we are dragging on
+ // the calendar to add a new event
+ t = this.view.getDayAt(e.getPageX(), e.getPageY());
+ if (t.el) {
+ return {
+ type: 'caldrag',
+ dayInfo: t,
+ proxy: this.proxy
+ };
+ }
+ return null;
+ }
+});
+
+/*
+ * Internal drop zone implementation for the calendar day and week views.
+ */
+Ext.calendar.DayViewDropZone = Ext.extend(Ext.calendar.DropZone, {
+ ddGroup: 'DayViewDD',
+
+ onNodeOver: function(n, dd, e, data) {
+ var dt,
+ box,
+ endDt,
+ text = this.createText,
+ curr,
+ start,
+ end,
+ evtEl,
+ dayCol;
+ 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, 30);
+ }
+ else {
+ n.date = n.date.add(Date.MINUTE, 30);
+ }
+ 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, 30);
+ }
+ 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;
+ },
+
+ shim: function(dt, box) {
+ Ext.each(this.shims,
+ function(shim) {
+ if (shim) {
+ shim.isActive = false;
+ shim.hide();
+ }
+ });
+
+ var shim = this.shims[0];
+ if (!shim) {
+ shim = this.createShim();
+ this.shims[0] = shim;
+ }
+
+ shim.isActive = true;
+ shim.show();
+ shim.setBox(box);
+ },
+
+ onNodeDrop: function(n, dd, e, data) {
+ var rec;
+ if (n && data) {
+ if (data.type == 'eventdrag') {
+ rec = this.view.getEventRecordFromEl(data.ddel);
+ this.view.onEventDrop(rec, n.date);
+ this.onCalendarDragComplete();
+ delete this.dragOffset;
+ return true;
+ }
+ if (data.type == 'eventresize') {
+ rec = this.view.getEventRecordFromEl(data.ddel);
+ this.view.onEventResize(rec, data.resizeDates);
+ this.onCalendarDragComplete();
+ delete this.resizeDt;
+ return true;
+ }
+ if (data.type == 'caldrag') {
+ Ext.destroy(this.dragStartMarker);
+ delete this.dragStartMarker;
+ delete this.dragCreateDt;
+ this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
+ this.onCalendarDragComplete.createDelegate(this));
+ //shims are NOT cleared here -- they stay visible until the handling
+ //code calls the onCalendarDragComplete callback which hides them.
+ return true;
+ }
+ }
+ this.onCalendarDragComplete();
+ return false;
+ }
+});
+/**
+ * @class Ext.calendar.EventMappings
+ * @extends Object
+ * A simple object that provides the field definitions for EventRecords so that they can be easily overridden.
+ */
+Ext.calendar.EventMappings = {
+ EventId: {
+ name: 'EventId',
+ mapping: 'id',
+ type: 'int'
+ },
+ CalendarId: {
+ name: 'CalendarId',
+ mapping: 'cid',
+ type: 'int'
+ },
+ Title: {
+ name: 'Title',
+ mapping: 'title',
+ type: 'string'
+ },
+ StartDate: {
+ name: 'StartDate',
+ mapping: 'start',
+ type: 'date',
+ dateFormat: 'c'
+ },
+ EndDate: {
+ name: 'EndDate',
+ mapping: 'end',
+ type: 'date',
+ dateFormat: 'c'
+ },
+ Location: {
+ name: 'Location',
+ mapping: 'loc',
+ type: 'string'
+ },
+ Notes: {
+ name: 'Notes',
+ mapping: 'notes',
+ type: 'string'
+ },
+ Url: {
+ name: 'Url',
+ mapping: 'url',
+ type: 'string'
+ },
+ IsAllDay: {
+ name: 'IsAllDay',
+ mapping: 'ad',
+ type: 'boolean'
+ },
+ Reminder: {
+ name: 'Reminder',
+ mapping: 'rem',
+ type: 'string'
+ },
+ IsNew: {
+ name: 'IsNew',
+ mapping: 'n',
+ type: 'boolean'
+ }
+};
+
+/**
+ * @class Ext.calendar.EventRecord
+ * @extends Ext.data.Record
+ * <p>This is the {@link Ext.data.Record Record} specification for calendar event data used by the
+ * {@link Ext.calendar.CalendarPanel CalendarPanel}'s underlying store. It can be overridden as
+ * necessary to customize the fields supported by events, although the existing column names should
+ * not be altered. If your model fields are named differently you should update the <b>mapping</b>
+ * configs accordingly.</p>
+ * <p>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.</p>
+ * <p>Here is a basic example for how to create a new record of this type:<pre><code>
+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'
+});
+</code></pre>
+ * If you have overridden any of the record's data mappings via the Ext.calendar.EventMappings object
+ * you may need to set the values using this alternate syntax to ensure that the fields match up correctly:<pre><code>
+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';
+</code></pre>
+ * @constructor
+ * @param {Object} data (Optional) An object, the properties of which provide values for the new Record's
+ * fields. If not specified the {@link Ext.data.Field#defaultValue defaultValue}
+ * for each field will be assigned.
+ * @param {Object} id (Optional) The id of the Record. The id is used by the
+ * {@link Ext.data.Store} object which owns the Record to index its collection
+ * of Records (therefore this id should be unique within each store). If an
+ * id is not specified a {@link #phantom}
+ * Record will be created with an {@link #Record.id automatically generated id}.
+ */
+ (function() {
+ var M = Ext.calendar.EventMappings;
+
+ Ext.calendar.EventRecord = Ext.data.Record.create([
+ M.EventId,
+ M.CalendarId,
+ M.Title,
+ M.StartDate,
+ M.EndDate,
+ M.Location,
+ M.Notes,
+ M.Url,
+ M.IsAllDay,
+ M.Reminder,
+ M.IsNew
+ ]);
+
+ /**
+ * Reconfigures the default record definition based on the current Ext.calendar.EventMappings object
+ */
+ Ext.calendar.EventRecord.reconfigure = function() {
+ Ext.calendar.EventRecord = Ext.data.Record.create([
+ M.EventId,
+ M.CalendarId,
+ M.Title,
+ M.StartDate,
+ M.EndDate,
+ M.Location,
+ M.Notes,
+ M.Url,
+ M.IsAllDay,
+ M.Reminder,
+ M.IsNew
+ ]);
+ };
+})();
+/*\r
+ * This is the view used internally by the panel that displays overflow events in the\r
+ * month view. Anytime a day cell cannot display all of its events, it automatically displays\r
+ * a link at the bottom to view all events for that day. When clicked, a panel pops up that\r
+ * uses this view to display the events for that day.\r
+ */\r
+Ext.calendar.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {\r
+ initComponent: function() {\r
+ Ext.calendar.CalendarView.superclass.initComponent.call(this);\r
+\r
+ this.addEvents({\r
+ eventsrendered: true\r
+ });\r
+\r
+ if (!this.el) {\r
+ this.el = document.createElement('div');\r
+ }\r
+ },\r
+\r
+ afterRender: function() {\r
+ this.tpl = this.getTemplate();\r
+\r
+ Ext.calendar.MonthDayDetailView.superclass.afterRender.call(this);\r
+\r
+ this.el.on({\r
+ 'click': this.view.onClick,\r
+ 'mouseover': this.view.onMouseOver,\r
+ 'mouseout': this.view.onMouseOut,\r
+ scope: this.view\r
+ });\r
+ },\r
+\r
+ getTemplate: function() {\r
+ if (!this.tpl) {\r
+ this.tpl = new Ext.XTemplate(\r
+ '<div class="ext-cal-mdv x-unselectable">',\r
+ '<table class="ext-cal-mvd-tbl" cellpadding="0" cellspacing="0">',\r
+ '<tbody>',\r
+ '<tpl for=".">',\r
+ '<tr><td class="ext-cal-ev">{markup}</td></tr>',\r
+ '</tpl>',\r
+ '</tbody>',\r
+ '</table>',\r
+ '</div>'\r
+ );\r
+ }\r
+ this.tpl.compile();\r
+ return this.tpl;\r
+ },\r
+\r
+ update: function(dt) {\r
+ this.date = dt;\r
+ this.refresh();\r
+ },\r
+\r
+ refresh: function() {\r
+ if (!this.rendered) {\r
+ return;\r
+ }\r
+ var eventTpl = this.view.getEventTemplate(),\r
+\r
+ templateData = [];\r
+\r
+ evts = this.store.queryBy(function(rec) {\r
+ var thisDt = this.date.clearTime(true).getTime(),\r
+ recStart = rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime(),\r
+ startsOnDate = (thisDt == recStart),\r
+ spansDate = false;\r
+\r
+ if (!startsOnDate) {\r
+ var recEnd = rec.data[Ext.calendar.EventMappings.EndDate.name].clearTime(true).getTime();\r
+ spansDate = recStart < thisDt && recEnd >= thisDt;\r
+ }\r
+ return startsOnDate || spansDate;\r
+ },\r
+ this);\r
+\r
+ evts.each(function(evt) {\r
+ var item = evt.data,\r
+ M = Ext.calendar.EventMappings;\r
+\r
+ item._renderAsAllDay = item[M.IsAllDay.name] || Ext.calendar.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;\r
+ item.spanLeft = Ext.calendar.Date.diffDays(item[M.StartDate.name], this.date) > 0;\r
+ item.spanRight = Ext.calendar.Date.diffDays(this.date, item[M.EndDate.name]) > 0;\r
+ item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':\r
+ 'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));\r
+\r
+ templateData.push({\r
+ markup: eventTpl.apply(this.getTemplateEventData(item))\r
+ });\r
+ },\r
+ this);\r
+\r
+ this.tpl.overwrite(this.el, templateData);\r
+ this.fireEvent('eventsrendered', this, this.date, evts.getCount());\r
+ },\r
+\r
+ getTemplateEventData: function(evt) {\r
+ var data = this.view.getTemplateEventData(evt);\r
+ data._elId = 'dtl-' + data._elId;\r
+ return data;\r
+ }\r
+});\r
+\r
+Ext.reg('monthdaydetailview', Ext.calendar.MonthDayDetailView);\r
+/**
+ * @class Ext.calendar.CalendarPicker
+ * @extends Ext.form.ComboBox
+ * <p>A custom combo used for choosing from the list of available calendars to assign an event to.</p>
+ * <p>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:<pre><code>
+ fieldLabel: 'Calendar',
+ valueField: 'CalendarId',
+ displayField: 'Title',
+ triggerAction: 'all',
+ mode: 'local',
+ forceSelection: true,
+ width: 200
+</code></pre>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.CalendarPicker = Ext.extend(Ext.form.ComboBox, {
+ fieldLabel: 'Calendar',
+ valueField: 'CalendarId',
+ displayField: 'Title',
+ triggerAction: 'all',
+ mode: 'local',
+ forceSelection: true,
+ width: 200,
+
+ // private
+ initComponent: function() {
+ Ext.calendar.CalendarPicker.superclass.initComponent.call(this);
+ this.tpl = this.tpl ||
+ '<tpl for="."><div class="x-combo-list-item ext-color-{' + this.valueField +
+ '}"><div class="ext-cal-picker-icon"> </div>{' + this.displayField + '}</div></tpl>';
+ },
+
+ // private
+ afterRender: function() {
+ Ext.calendar.CalendarPicker.superclass.afterRender.call(this);
+
+ this.wrap = this.el.up('.x-form-field-wrap');
+ this.wrap.addClass('ext-calendar-picker');
+
+ this.icon = Ext.DomHelper.append(this.wrap, {
+ tag: 'div',
+ cls: 'ext-cal-picker-icon ext-cal-picker-mainicon'
+ });
+ },
+
+ // inherited docs
+ setValue: function(value) {
+ this.wrap.removeClass('ext-color-' + this.getValue());
+ if (!value && this.store !== undefined) {
+ // always default to a valid calendar
+ value = this.store.getAt(0).data.CalendarId;
+ }
+ Ext.calendar.CalendarPicker.superclass.setValue.call(this, value);
+ this.wrap.addClass('ext-color-' + value);
+ }
+});
+
+Ext.reg('calendarpicker', Ext.calendar.CalendarPicker);
+/*
+ * This is an internal helper class for the calendar views and should not be overridden.
+ * It is responsible for the base event rendering logic underlying all of the calendar views.
+ */
+Ext.calendar.WeekEventRenderer = function() {
+
+ var getEventRow = function(id, week, index) {
+ var indexOffset = 1,
+ //skip row with date #'s
+ evtRow,
+ wkRow = Ext.get(id + '-wk-' + week);
+ if (wkRow) {
+ var table = wkRow.child('.ext-cal-evt-tbl', true);
+ evtRow = table.tBodies[0].childNodes[index + indexOffset];
+ if (!evtRow) {
+ evtRow = Ext.DomHelper.append(table.tBodies[0], '<tr></tr>');
+ }
+ }
+ return Ext.get(evtRow);
+ };
+
+ return {
+ render: function(o) {
+ var w = 0,
+ grid = o.eventGrid,
+ dt = o.viewStart.clone(),
+ eventTpl = o.tpl,
+ max = o.maxEventsPerDay != undefined ? o.maxEventsPerDay: 999,
+ weekCount = o.weekCount < 1 ? 6: o.weekCount,
+ dayCount = o.weekCount == 1 ? o.dayCount: 7,
+ cellCfg;
+
+ for (; w < weekCount; w++) {
+ if (!grid[w] || grid[w].length == 0) {
+ // no events or span cells for the entire week
+ if (weekCount == 1) {
+ row = getEventRow(o.id, w, 0);
+ cellCfg = {
+ tag: 'td',
+ cls: 'ext-cal-ev',
+ id: o.id + '-empty-0-day-' + dt.format('Ymd'),
+ html: ' '
+ };
+ if (dayCount > 1) {
+ cellCfg.colspan = dayCount;
+ }
+ Ext.DomHelper.append(row, cellCfg);
+ }
+ dt = dt.add(Date.DAY, 7);
+ } else {
+ var row,
+ d = 0,
+ wk = grid[w],
+ startOfWeek = dt.clone(),
+ endOfWeek = startOfWeek.add(Date.DAY, dayCount).add(Date.MILLI, -1);
+
+ for (; d < dayCount; d++) {
+ if (wk[d]) {
+ var ev = emptyCells = skipped = 0,
+ day = wk[d],
+ ct = day.length,
+ evt;
+
+ for (; ev < ct; ev++) {
+ if (!day[ev]) {
+ emptyCells++;
+ continue;
+ }
+ if (emptyCells > 0 && ev - emptyCells < max) {
+ row = getEventRow(o.id, w, ev - emptyCells);
+ cellCfg = {
+ tag: 'td',
+ cls: 'ext-cal-ev',
+ id: o.id + '-empty-' + ct + '-day-' + dt.format('Ymd')
+ };
+ if (emptyCells > 1 && max - ev > emptyCells) {
+ cellCfg.rowspan = Math.min(emptyCells, max - ev);
+ }
+ Ext.DomHelper.append(row, cellCfg);
+ emptyCells = 0;
+ }
+
+ if (ev >= max) {
+ skipped++;
+ continue;
+ }
+ evt = day[ev];
+
+ if (!evt.isSpan || evt.isSpanStart) {
+ //skip non-starting span cells
+ var item = evt.data || evt.event.data;
+ item._weekIndex = w;
+ item._renderAsAllDay = item[Ext.calendar.EventMappings.IsAllDay.name] || evt.isSpanStart;
+ item.spanLeft = item[Ext.calendar.EventMappings.StartDate.name].getTime() < startOfWeek.getTime();
+ item.spanRight = item[Ext.calendar.EventMappings.EndDate.name].getTime() > endOfWeek.getTime();
+ item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':
+ 'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));
+
+ row = getEventRow(o.id, w, ev);
+ cellCfg = {
+ tag: 'td',
+ cls: 'ext-cal-ev',
+ cn: eventTpl.apply(o.templateDataFn(item))
+ };
+ var diff = Ext.calendar.Date.diffDays(dt, item[Ext.calendar.EventMappings.EndDate.name]) + 1,
+ cspan = Math.min(diff, dayCount - d);
+
+ if (cspan > 1) {
+ cellCfg.colspan = cspan;
+ }
+ Ext.DomHelper.append(row, cellCfg);
+ }
+ }
+ if (ev > max) {
+ row = getEventRow(o.id, w, max);
+ Ext.DomHelper.append(row, {
+ tag: 'td',
+ cls: 'ext-cal-ev-more',
+ id: 'ext-cal-ev-more-' + dt.format('Ymd'),
+ cn: {
+ tag: 'a',
+ html: '+' + skipped + ' more...'
+ }
+ });
+ }
+ if (ct < o.evtMaxCount[w]) {
+ row = getEventRow(o.id, w, ct);
+ if (row) {
+ cellCfg = {
+ tag: 'td',
+ cls: 'ext-cal-ev',
+ id: o.id + '-empty-' + (ct + 1) + '-day-' + dt.format('Ymd')
+ };
+ var rowspan = o.evtMaxCount[w] - ct;
+ if (rowspan > 1) {
+ cellCfg.rowspan = rowspan;
+ }
+ Ext.DomHelper.append(row, cellCfg);
+ }
+ }
+ } else {
+ row = getEventRow(o.id, w, 0);
+ if (row) {
+ cellCfg = {
+ tag: 'td',
+ cls: 'ext-cal-ev',
+ id: o.id + '-empty-day-' + dt.format('Ymd')
+ };
+ if (o.evtMaxCount[w] > 1) {
+ cellCfg.rowSpan = o.evtMaxCount[w];
+ }
+ Ext.DomHelper.append(row, cellCfg);
+ }
+ }
+ dt = dt.add(Date.DAY, 1);
+ }
+ }
+ }
+ }
+ };
+}();
+/**\r
+ * @class Ext.calendar.CalendarView\r
+ * @extends Ext.BoxComponent\r
+ * <p>This is an abstract class that serves as the base for other calendar views. This class is not\r
+ * intended to be directly instantiated.</p>\r
+ * <p>When extending this class to create a custom calendar view, you must provide an implementation\r
+ * for the <code>renderItems</code> method, as there is no default implementation for rendering events\r
+ * The rendering logic is totally dependent on how the UI structures its data, which\r
+ * is determined by the underlying UI template (this base class does not have a template).</p>\r
+ * @constructor\r
+ * @param {Object} config The config object\r
+ */\r
+Ext.calendar.CalendarView = Ext.extend(Ext.BoxComponent, {\r
+ /**\r
+ * @cfg {Number} startDay\r
+ * The 0-based index for the day on which the calendar week begins (0=Sunday, which is the default)\r
+ */\r
+ startDay: 0,\r
+ /**\r
+ * @cfg {Boolean} spansHavePriority\r
+ * Allows switching between two different modes of rendering events that span multiple days. When true,\r
+ * span events are always sorted first, possibly at the expense of start dates being out of order (e.g., \r
+ * a span event that starts at 11am one day and spans into the next day would display before a non-spanning \r
+ * event that starts at 10am, even though they would not be in date order). This can lead to more compact\r
+ * layouts when there are many overlapping events. If false (the default), events will always sort by start date\r
+ * first which can result in a less compact, but chronologically consistent layout.\r
+ */\r
+ spansHavePriority: false,\r
+ /**\r
+ * @cfg {Boolean} trackMouseOver\r
+ * Whether or not the view tracks and responds to the browser mouseover event on contained elements (defaults to\r
+ * true). If you don't need mouseover event highlighting you can disable this.\r
+ */\r
+ trackMouseOver: true,\r
+ /**\r
+ * @cfg {Boolean} enableFx\r
+ * Determines whether or not visual effects for CRUD actions are enabled (defaults to true). If this is false\r
+ * it will override any values for {@link #enableAddFx}, {@link #enableUpdateFx} or {@link enableRemoveFx} and\r
+ * all animations will be disabled.\r
+ */\r
+ enableFx: true,\r
+ /**\r
+ * @cfg {Boolean} enableAddFx\r
+ * True to enable a visual effect on adding a new event (the default), false to disable it. Note that if \r
+ * {@link #enableFx} is false it will override this value. The specific effect that runs is defined in the\r
+ * {@link #doAddFx} method.\r
+ */\r
+ enableAddFx: true,\r
+ /**\r
+ * @cfg {Boolean} enableUpdateFx\r
+ * True to enable a visual effect on updating an event, false to disable it (the default). Note that if \r
+ * {@link #enableFx} is false it will override this value. The specific effect that runs is defined in the\r
+ * {@link #doUpdateFx} method.\r
+ */\r
+ enableUpdateFx: false,\r
+ /**\r
+ * @cfg {Boolean} enableRemoveFx\r
+ * True to enable a visual effect on removing an event (the default), false to disable it. Note that if \r
+ * {@link #enableFx} is false it will override this value. The specific effect that runs is defined in the\r
+ * {@link #doRemoveFx} method.\r
+ */\r
+ enableRemoveFx: true,\r
+ /**\r
+ * @cfg {Boolean} enableDD\r
+ * True to enable drag and drop in the calendar view (the default), false to disable it\r
+ */\r
+ enableDD: true,\r
+ /**\r
+ * @cfg {Boolean} monitorResize\r
+ * True to monitor the browser's resize event (the default), false to ignore it. If the calendar view is rendered\r
+ * into a fixed-size container this can be set to false. However, if the view can change dimensions (e.g., it's in \r
+ * fit layout in a viewport or some other resizable container) it is very important that this config is true so that\r
+ * any resize event propagates properly to all subcomponents and layouts get recalculated properly.\r
+ */\r
+ monitorResize: true,\r
+ /**\r
+ * @cfg {String} ddCreateEventText\r
+ * The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to \r
+ * 'Create event for {0}' where {0} is a date range supplied by the view)\r
+ */\r
+ ddCreateEventText: 'Create event for {0}',\r
+ /**\r
+ * @cfg {String} ddMoveEventText\r
+ * The text to display inside the drag proxy while dragging an event to reposition it (defaults to \r
+ * 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)\r
+ */\r
+ ddMoveEventText: 'Move event to {0}',\r
+ /**\r
+ * @cfg {String} ddResizeEventText\r
+ * The string displayed to the user in the drag proxy while dragging the resize handle of an event (defaults to \r
+ * 'Update event to {0}' where {0} is the updated event start-end range supplied by the view). Note that \r
+ * this text is only used in views\r
+ * that allow resizing of events.\r
+ */\r
+ ddResizeEventText: 'Update event to {0}',\r
+\r
+ //private properties -- do not override:\r
+ weekCount: 1,\r
+ dayCount: 1,\r
+ eventSelector: '.ext-cal-evt',\r
+ eventOverClass: 'ext-evt-over',\r
+ eventElIdDelimiter: '-evt-',\r
+ dayElIdDelimiter: '-day-',\r
+\r
+ /**\r
+ * Returns a string of HTML template markup to be used as the body portion of the event template created\r
+ * by {@link #getEventTemplate}. This provdes the flexibility to customize what's in the body without\r
+ * having to override the entire XTemplate. This string can include any valid {@link Ext.Template} code, and\r
+ * any data tokens accessible to the containing event template can be referenced in this string.\r
+ * @return {String} The body template string\r
+ */\r
+ getEventBodyMarkup: Ext.emptyFn,\r
+ // must be implemented by a subclass\r
+ /**\r
+ * <p>Returns the XTemplate that is bound to the calendar's event store (it expects records of type\r
+ * {@link Ext.calendar.EventRecord}) to populate the calendar views with events. Internally this method\r
+ * by default generates different markup for browsers that support CSS border radius and those that don't.\r
+ * This method can be overridden as needed to customize the markup generated.</p>\r
+ * <p>Note that this method calls {@link #getEventBodyMarkup} to retrieve the body markup for events separately\r
+ * from the surrounding container markup. This provdes the flexibility to customize what's in the body without\r
+ * having to override the entire XTemplate. If you do override this method, you should make sure that your \r
+ * overridden version also does the same.</p>\r
+ * @return {Ext.XTemplate} The event XTemplate\r
+ */\r
+ getEventTemplate: Ext.emptyFn,\r
+ // must be implemented by a subclass\r
+ // private\r
+ initComponent: function() {\r
+ this.setStartDate(this.startDate || new Date());\r
+\r
+ Ext.calendar.CalendarView.superclass.initComponent.call(this);\r
+\r
+ this.addEvents({\r
+ /**\r
+ * @event eventsrendered\r
+ * Fires after events are finished rendering in the view\r
+ * @param {Ext.calendar.CalendarView} this \r
+ */\r
+ eventsrendered: true,\r
+ /**\r
+ * @event eventclick\r
+ * Fires after the user clicks on an event element\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was clicked on\r
+ * @param {HTMLNode} el The DOM node that was clicked on\r
+ */\r
+ eventclick: true,\r
+ /**\r
+ * @event eventover\r
+ * Fires anytime the mouse is over an event element\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that the cursor is over\r
+ * @param {HTMLNode} el The DOM node that is being moused over\r
+ */\r
+ eventover: true,\r
+ /**\r
+ * @event eventout\r
+ * Fires anytime the mouse exits an event element\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that the cursor exited\r
+ * @param {HTMLNode} el The DOM node that was exited\r
+ */\r
+ eventout: true,\r
+ /**\r
+ * @event datechange\r
+ * Fires after the start date of the view changes\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Date} startDate The start date of the view (as explained in {@link #getStartDate}\r
+ * @param {Date} viewStart The first displayed date in the view\r
+ * @param {Date} viewEnd The last displayed date in the view\r
+ */\r
+ datechange: true,\r
+ /**\r
+ * @event rangeselect\r
+ * Fires after the user drags on the calendar to select a range of dates/times in which to create an event\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Object} dates An object containing the start (StartDate property) and end (EndDate property) dates selected\r
+ * @param {Function} callback A callback function that MUST be called after the event handling is complete so that\r
+ * the view is properly cleaned up (shim elements are persisted in the view while the user is prompted to handle the\r
+ * range selection). The callback is already created in the proper scope, so it simply needs to be executed as a standard\r
+ * function call (e.g., callback()).\r
+ */\r
+ rangeselect: true,\r
+ /**\r
+ * @event eventmove\r
+ * Fires after an event element is dragged by the user and dropped in a new position\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was moved with\r
+ * updated start and end dates\r
+ */\r
+ eventmove: true,\r
+ /**\r
+ * @event initdrag\r
+ * Fires when a drag operation is initiated in the view\r
+ * @param {Ext.calendar.CalendarView} this\r
+ */\r
+ initdrag: true,\r
+ /**\r
+ * @event dayover\r
+ * Fires while the mouse is over a day element \r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Date} dt The date that is being moused over\r
+ * @param {Ext.Element} el The day Element that is being moused over\r
+ */\r
+ dayover: true,\r
+ /**\r
+ * @event dayout\r
+ * Fires when the mouse exits a day element \r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Date} dt The date that is exited\r
+ * @param {Ext.Element} el The day Element that is exited\r
+ */\r
+ dayout: true\r
+ /*\r
+ * @event eventdelete\r
+ * Fires after an event element is deleted by the user. Not currently implemented directly at the view level -- currently \r
+ * deletes only happen from one of the forms.\r
+ * @param {Ext.calendar.CalendarView} this\r
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was deleted\r
+ */\r
+ //eventdelete: true\r
+ });\r
+ },\r
+\r
+ // private\r
+ afterRender: function() {\r
+ Ext.calendar.CalendarView.superclass.afterRender.call(this);\r
+\r
+ this.renderTemplate();\r
+\r
+ if (this.store) {\r
+ this.setStore(this.store, true);\r
+ }\r
+\r
+ this.el.on({\r
+ 'mouseover': this.onMouseOver,\r
+ 'mouseout': this.onMouseOut,\r
+ 'click': this.onClick,\r
+ 'resize': this.onResize,\r
+ scope: this\r
+ });\r
+\r
+ this.el.unselectable();\r
+\r
+ if (this.enableDD && this.initDD) {\r
+ this.initDD();\r
+ }\r
+\r
+ this.on('eventsrendered', this.forceSize);\r
+ this.forceSize.defer(100, this);\r
+\r
+ },\r
+\r
+ // private\r
+ forceSize: function() {\r
+ if (this.el && this.el.child) {\r
+ var hd = this.el.child('.ext-cal-hd-ct'),\r
+ bd = this.el.child('.ext-cal-body-ct');\r
+\r
+ if (bd == null || hd == null) return;\r
+\r
+ var headerHeight = hd.getHeight(),\r
+ sz = this.el.parent().getSize();\r
+\r
+ bd.setHeight(sz.height - headerHeight);\r
+ }\r
+ },\r
+\r
+ refresh: function() {\r
+ this.prepareData();\r
+ this.renderTemplate();\r
+ this.renderItems();\r
+ },\r
+\r
+ getWeekCount: function() {\r
+ var days = Ext.calendar.Date.diffDays(this.viewStart, this.viewEnd);\r
+ return Math.ceil(days / this.dayCount);\r
+ },\r
+\r
+ // private\r
+ prepareData: function() {\r
+ var lastInMonth = this.startDate.getLastDateOfMonth(),\r
+ w = 0,\r
+ row = 0,\r
+ dt = this.viewStart.clone(),\r
+ weeks = this.weekCount < 1 ? 6: this.weekCount;\r
+\r
+ this.eventGrid = [[]];\r
+ this.allDayGrid = [[]];\r
+ this.evtMaxCount = [];\r
+\r
+ var evtsInView = this.store.queryBy(function(rec) {\r
+ return this.isEventVisible(rec.data);\r
+ },\r
+ this);\r
+\r
+ for (; w < weeks; w++) {\r
+ this.evtMaxCount[w] = 0;\r
+ if (this.weekCount == -1 && dt > lastInMonth) {\r
+ //current week is fully in next month so skip\r
+ break;\r
+ }\r
+ this.eventGrid[w] = this.eventGrid[w] || [];\r
+ this.allDayGrid[w] = this.allDayGrid[w] || [];\r
+\r
+ for (d = 0; d < this.dayCount; d++) {\r
+ if (evtsInView.getCount() > 0) {\r
+ var evts = evtsInView.filterBy(function(rec) {\r
+ var startsOnDate = (dt.getTime() == rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime());\r
+ var spansFromPrevView = (w == 0 && d == 0 && (dt > rec.data[Ext.calendar.EventMappings.StartDate.name]));\r
+ return startsOnDate || spansFromPrevView;\r
+ },\r
+ this);\r
+\r
+ this.sortEventRecordsForDay(evts);\r
+ this.prepareEventGrid(evts, w, d);\r
+ }\r
+ dt = dt.add(Date.DAY, 1);\r
+ }\r
+ }\r
+ this.currentWeekCount = w;\r
+ },\r
+\r
+ // private\r
+ prepareEventGrid: function(evts, w, d) {\r
+ var row = 0,\r
+ dt = this.viewStart.clone(),\r
+ max = this.maxEventsPerDay ? this.maxEventsPerDay: 999;\r
+\r
+ evts.each(function(evt) {\r
+ var M = Ext.calendar.EventMappings,\r
+ days = Ext.calendar.Date.diffDays(\r
+ Ext.calendar.Date.max(this.viewStart, evt.data[M.StartDate.name]),\r
+ Ext.calendar.Date.min(this.viewEnd, evt.data[M.EndDate.name])) + 1;\r
+\r
+ if (days > 1 || Ext.calendar.Date.diffDays(evt.data[M.StartDate.name], evt.data[M.EndDate.name]) > 1) {\r
+ this.prepareEventGridSpans(evt, this.eventGrid, w, d, days);\r
+ this.prepareEventGridSpans(evt, this.allDayGrid, w, d, days, true);\r
+ } else {\r
+ row = this.findEmptyRowIndex(w, d);\r
+ this.eventGrid[w][d] = this.eventGrid[w][d] || [];\r
+ this.eventGrid[w][d][row] = evt;\r
+\r
+ if (evt.data[M.IsAllDay.name]) {\r
+ row = this.findEmptyRowIndex(w, d, true);\r
+ this.allDayGrid[w][d] = this.allDayGrid[w][d] || [];\r
+ this.allDayGrid[w][d][row] = evt;\r
+ }\r
+ }\r
+\r
+ if (this.evtMaxCount[w] < this.eventGrid[w][d].length) {\r
+ this.evtMaxCount[w] = Math.min(max + 1, this.eventGrid[w][d].length);\r
+ }\r
+ return true;\r
+ },\r
+ this);\r
+ },\r
+\r
+ // private\r
+ prepareEventGridSpans: function(evt, grid, w, d, days, allday) {\r
+ // this event spans multiple days/weeks, so we have to preprocess\r
+ // the events and store special span events as placeholders so that\r
+ // the render routine can build the necessary TD spans correctly.\r
+ var w1 = w,\r
+ d1 = d,\r
+ row = this.findEmptyRowIndex(w, d, allday),\r
+ dt = this.viewStart.clone();\r
+\r
+ var start = {\r
+ event: evt,\r
+ isSpan: true,\r
+ isSpanStart: true,\r
+ spanLeft: false,\r
+ spanRight: (d == 6)\r
+ };\r
+ grid[w][d] = grid[w][d] || [];\r
+ grid[w][d][row] = start;\r
+\r
+ while (--days) {\r
+ dt = dt.add(Date.DAY, 1);\r
+ if (dt > this.viewEnd) {\r
+ break;\r
+ }\r
+ if (++d1 > 6) {\r
+ // reset counters to the next week\r
+ d1 = 0;\r
+ w1++;\r
+ row = this.findEmptyRowIndex(w1, 0);\r
+ }\r
+ grid[w1] = grid[w1] || [];\r
+ grid[w1][d1] = grid[w1][d1] || [];\r
+\r
+ grid[w1][d1][row] = {\r
+ event: evt,\r
+ isSpan: true,\r
+ isSpanStart: (d1 == 0),\r
+ spanLeft: (w1 > w) && (d1 % 7 == 0),\r
+ spanRight: (d1 == 6) && (days > 1)\r
+ };\r
+ }\r
+ },\r
+\r
+ // private\r
+ findEmptyRowIndex: function(w, d, allday) {\r
+ var grid = allday ? this.allDayGrid: this.eventGrid,\r
+ day = grid[w] ? grid[w][d] || [] : [],\r
+ i = 0,\r
+ ln = day.length;\r
+\r
+ for (; i < ln; i++) {\r
+ if (day[i] == null) {\r
+ return i;\r
+ }\r
+ }\r
+ return ln;\r
+ },\r
+\r
+ // private\r
+ renderTemplate: function() {\r
+ if (this.tpl) {\r
+ this.tpl.overwrite(this.el, this.getParams());\r
+ this.lastRenderStart = this.viewStart.clone();\r
+ this.lastRenderEnd = this.viewEnd.clone();\r
+ }\r
+ },\r
+\r
+ disableStoreEvents: function() {\r
+ this.monitorStoreEvents = false;\r
+ },\r
+\r
+ enableStoreEvents: function(refresh) {\r
+ this.monitorStoreEvents = true;\r
+ if (refresh === true) {\r
+ this.refresh();\r
+ }\r
+ },\r
+\r
+ // private\r
+ onResize: function() {\r
+ this.refresh();\r
+ },\r
+\r
+ // private\r
+ onInitDrag: function() {\r
+ this.fireEvent('initdrag', this);\r
+ },\r
+\r
+ // private\r
+ onEventDrop: function(rec, dt) {\r
+ if (Ext.calendar.Date.compare(rec.data[Ext.calendar.EventMappings.StartDate.name], dt) === 0) {\r
+ // no changes\r
+ return;\r
+ }\r
+ var diff = dt.getTime() - rec.data[Ext.calendar.EventMappings.StartDate.name].getTime();\r
+ rec.set(Ext.calendar.EventMappings.StartDate.name, dt);\r
+ rec.set(Ext.calendar.EventMappings.EndDate.name, rec.data[Ext.calendar.EventMappings.EndDate.name].add(Date.MILLI, diff));\r
+\r
+ this.fireEvent('eventmove', this, rec);\r
+ },\r
+\r
+ // private\r
+ onCalendarEndDrag: function(start, end, onComplete) {\r
+ // set this flag for other event handlers that might conflict while we're waiting\r
+ this.dragPending = true;\r
+\r
+ // have to wait for the user to save or cancel before finalizing the dd interation\r
+ var o = {};\r
+ o[Ext.calendar.EventMappings.StartDate.name] = start;\r
+ o[Ext.calendar.EventMappings.EndDate.name] = end;\r
+\r
+ this.fireEvent('rangeselect', this, o, this.onCalendarEndDragComplete.createDelegate(this, [onComplete]));\r
+ },\r
+\r
+ // private\r
+ onCalendarEndDragComplete: function(onComplete) {\r
+ // callback for the drop zone to clean up\r
+ onComplete();\r
+ // clear flag for other events to resume normally\r
+ this.dragPending = false;\r
+ },\r
+\r
+ // private\r
+ onUpdate: function(ds, rec, operation) {\r
+ if (this.monitorStoreEvents === false) {\r
+ return;\r
+ }\r
+ if (operation == Ext.data.Record.COMMIT) {\r
+ this.refresh();\r
+ if (this.enableFx && this.enableUpdateFx) {\r
+ this.doUpdateFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), {\r
+ scope: this\r
+ });\r
+ }\r
+ }\r
+ },\r
+\r
+\r
+ doUpdateFx: function(els, o) {\r
+ this.highlightEvent(els, null, o);\r
+ },\r
+\r
+ // private\r
+ onAdd: function(ds, records, index) {\r
+ if (this.monitorStoreEvents === false) {\r
+ return;\r
+ }\r
+ var rec = records[0];\r
+ this.tempEventId = rec.id;\r
+ this.refresh();\r
+\r
+ if (this.enableFx && this.enableAddFx) {\r
+ this.doAddFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), {\r
+ scope: this\r
+ });\r
+ };\r
+ },\r
+\r
+ doAddFx: function(els, o) {\r
+ els.fadeIn(Ext.apply(o, {\r
+ duration: 2\r
+ }));\r
+ },\r
+\r
+ // private\r
+ onRemove: function(ds, rec) {\r
+ if (this.monitorStoreEvents === false) {\r
+ return;\r
+ }\r
+ if (this.enableFx && this.enableRemoveFx) {\r
+ this.doRemoveFx(this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]), {\r
+ remove: true,\r
+ scope: this,\r
+ callback: this.refresh\r
+ });\r
+ }\r
+ else {\r
+ this.getEventEls(rec.data[Ext.calendar.EventMappings.EventId.name]).remove();\r
+ this.refresh();\r
+ }\r
+ },\r
+\r
+ doRemoveFx: function(els, o) {\r
+ els.fadeOut(o);\r
+ },\r
+\r
+ /**\r
+ * Visually highlights an event using {@link Ext.Fx#highlight} config options.\r
+ * If {@link #highlightEventActions} is false this method will have no effect.\r
+ * @param {Ext.CompositeElement} els The element(s) to highlight\r
+ * @param {Object} color (optional) The highlight color. Should be a 6 char hex \r
+ * color without the leading # (defaults to yellow: 'ffff9c')\r
+ * @param {Object} o (optional) Object literal with any of the {@link Ext.Fx} config \r
+ * options. See {@link Ext.Fx#highlight} for usage examples.\r
+ */\r
+ highlightEvent: function(els, color, o) {\r
+ if (this.enableFx) {\r
+ var c;\r
+ ! (Ext.isIE || Ext.isOpera) ?\r
+ els.highlight(color, o) :\r
+ // Fun IE/Opera handling:\r
+ els.each(function(el) {\r
+ el.highlight(color, Ext.applyIf({\r
+ attr: 'color'\r
+ },\r
+ o));\r
+ c = el.child('.ext-cal-evm');\r
+ if (c) {\r
+ c.highlight(color, o);\r
+ }\r
+ },\r
+ this);\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Retrieve an Event object's id from its corresponding node in the DOM.\r
+ * @param {String/Element/HTMLElement} el An {@link Ext.Element}, DOM node or id\r
+ */\r
+ getEventIdFromEl: function(el) {\r
+ el = Ext.get(el);\r
+ var id = el.id.split(this.eventElIdDelimiter)[1];\r
+ if (id.indexOf('-') > -1) {\r
+ //This id has the index of the week it is rendered in as the suffix.\r
+ //This allows events that span across weeks to still have reproducibly-unique DOM ids.\r
+ id = id.split('-')[0];\r
+ }\r
+ return id;\r
+ },\r
+\r
+ // private\r
+ getEventId: function(eventId) {\r
+ if (eventId === undefined && this.tempEventId) {\r
+ eventId = this.tempEventId;\r
+ }\r
+ return eventId;\r
+ },\r
+\r
+ /**\r
+ * \r
+ * @param {String} eventId\r
+ * @param {Boolean} forSelect\r
+ * @return {String} The selector class\r
+ */\r
+ getEventSelectorCls: function(eventId, forSelect) {\r
+ var prefix = forSelect ? '.': '';\r
+ return prefix + this.id + this.eventElIdDelimiter + this.getEventId(eventId);\r
+ },\r
+\r
+ /**\r
+ * \r
+ * @param {String} eventId\r
+ * @return {Ext.CompositeElement} The matching CompositeElement of nodes\r
+ * that comprise the rendered event. Any event that spans across a view \r
+ * boundary will contain more than one internal Element.\r
+ */\r
+ getEventEls: function(eventId) {\r
+ var els = Ext.select(this.getEventSelectorCls(this.getEventId(eventId), true), false, this.el.id);\r
+ return new Ext.CompositeElement(els);\r
+ },\r
+\r
+ /**\r
+ * Returns true if the view is currently displaying today's date, else false.\r
+ * @return {Boolean} True or false\r
+ */\r
+ isToday: function() {\r
+ var today = new Date().clearTime().getTime();\r
+ return this.viewStart.getTime() <= today && this.viewEnd.getTime() >= today;\r
+ },\r
+\r
+ // private\r
+ onDataChanged: function(store) {\r
+ this.refresh();\r
+ },\r
+\r
+ // private\r
+ isEventVisible: function(evt) {\r
+ var start = this.viewStart.getTime(),\r
+ end = this.viewEnd.getTime(),\r
+ M = Ext.calendar.EventMappings,\r
+ evStart = (evt.data ? evt.data[M.StartDate.name] : evt[M.StartDate.name]).getTime(),\r
+ evEnd = (evt.data ? evt.data[M.EndDate.name] : evt[M.EndDate.name]).add(Date.SECOND, -1).getTime(),\r
+\r
+ startsInRange = (evStart >= start && evStart <= end),\r
+ endsInRange = (evEnd >= start && evEnd <= end),\r
+ spansRange = (evStart < start && evEnd > end);\r
+\r
+ return (startsInRange || endsInRange || spansRange);\r
+ },\r
+\r
+ // private\r
+ isOverlapping: function(evt1, evt2) {\r
+ var ev1 = evt1.data ? evt1.data: evt1,\r
+ ev2 = evt2.data ? evt2.data: evt2,\r
+ M = Ext.calendar.EventMappings,\r
+ start1 = ev1[M.StartDate.name].getTime(),\r
+ end1 = ev1[M.EndDate.name].add(Date.SECOND, -1).getTime(),\r
+ start2 = ev2[M.StartDate.name].getTime(),\r
+ end2 = ev2[M.EndDate.name].add(Date.SECOND, -1).getTime();\r
+\r
+ if (end1 < start1) {\r
+ end1 = start1;\r
+ }\r
+ if (end2 < start2) {\r
+ end2 = start2;\r
+ }\r
+\r
+ var ev1startsInEv2 = (start1 >= start2 && start1 <= end2),\r
+ ev1EndsInEv2 = (end1 >= start2 && end1 <= end2),\r
+ ev1SpansEv2 = (start1 < start2 && end1 > end2);\r
+\r
+ return (ev1startsInEv2 || ev1EndsInEv2 || ev1SpansEv2);\r
+ },\r
+\r
+ getDayEl: function(dt) {\r
+ return Ext.get(this.getDayId(dt));\r
+ },\r
+\r
+ getDayId: function(dt) {\r
+ if (Ext.isDate(dt)) {\r
+ dt = dt.format('Ymd');\r
+ }\r
+ return this.id + this.dayElIdDelimiter + dt;\r
+ },\r
+\r
+ /**\r
+ * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not \r
+ * be the first date displayed in the rendered calendar -- to get the start and end dates displayed\r
+ * to the user use {@link #getViewBounds}.\r
+ * @return {Date} The start date\r
+ */\r
+ getStartDate: function() {\r
+ return this.startDate;\r
+ },\r
+\r
+ /**\r
+ * Sets the start date used to calculate the view boundaries to display. The displayed view will be the \r
+ * earliest and latest dates that match the view requirements and contain the date passed to this function.\r
+ * @param {Date} dt The date used to calculate the new view boundaries\r
+ */\r
+ setStartDate: function(start, refresh) {\r
+ this.startDate = start.clearTime();\r
+ this.setViewBounds(start);\r
+ this.store.load({\r
+ params: {\r
+ start: this.viewStart.format('m-d-Y'),\r
+ end: this.viewEnd.format('m-d-Y')\r
+ }\r
+ });\r
+ if (refresh === true) {\r
+ this.refresh();\r
+ }\r
+ this.fireEvent('datechange', this, this.startDate, this.viewStart, this.viewEnd);\r
+ },\r
+\r
+ // private\r
+ setViewBounds: function(startDate) {\r
+ var start = startDate || this.startDate,\r
+ offset = start.getDay() - this.startDay;\r
+\r
+ switch (this.weekCount) {\r
+ case 0:\r
+ case 1:\r
+ this.viewStart = this.dayCount < 7 ? start: start.add(Date.DAY, -offset).clearTime(true);\r
+ this.viewEnd = this.viewStart.add(Date.DAY, this.dayCount || 7).add(Date.SECOND, -1);\r
+ return;\r
+\r
+ case - 1:\r
+ // auto by month\r
+ start = start.getFirstDateOfMonth();\r
+ offset = start.getDay() - this.startDay;\r
+\r
+ this.viewStart = start.add(Date.DAY, -offset).clearTime(true);\r
+\r
+ // start from current month start, not view start:\r
+ var end = start.add(Date.MONTH, 1).add(Date.SECOND, -1);\r
+ // fill out to the end of the week:\r
+ this.viewEnd = end.add(Date.DAY, 6 - end.getDay());\r
+ return;\r
+\r
+ default:\r
+ this.viewStart = start.add(Date.DAY, -offset).clearTime(true);\r
+ this.viewEnd = this.viewStart.add(Date.DAY, this.weekCount * 7).add(Date.SECOND, -1);\r
+ }\r
+ },\r
+\r
+ // private\r
+ getViewBounds: function() {\r
+ return {\r
+ start: this.viewStart,\r
+ end: this.viewEnd\r
+ };\r
+ },\r
+\r
+ /* private\r
+ * Sort events for a single day for display in the calendar. This sorts allday\r
+ * events first, then non-allday events are sorted either based on event start\r
+ * priority or span priority based on the value of {@link #spansHavePriority} \r
+ * (defaults to event start priority).\r
+ * @param {MixedCollection} evts A {@link Ext.util.MixedCollection MixedCollection} \r
+ * of {@link #Ext.calendar.EventRecord EventRecord} objects\r
+ */\r
+ sortEventRecordsForDay: function(evts) {\r
+ if (evts.length < 2) {\r
+ return;\r
+ }\r
+ evts.sort('ASC',\r
+ function(evtA, evtB) {\r
+ var a = evtA.data,\r
+ b = evtB.data,\r
+ M = Ext.calendar.EventMappings;\r
+\r
+ // Always sort all day events before anything else\r
+ if (a[M.IsAllDay.name]) {\r
+ return - 1;\r
+ }\r
+ else if (b[M.IsAllDay.name]) {\r
+ return 1;\r
+ }\r
+ if (this.spansHavePriority) {\r
+ // This logic always weights span events higher than non-span events\r
+ // (at the possible expense of start time order). This seems to\r
+ // be the approach used by Google calendar and can lead to a more\r
+ // visually appealing layout in complex cases, but event order is\r
+ // not guaranteed to be consistent.\r
+ var diff = Ext.calendar.Date.diffDays;\r
+ if (diff(a[M.StartDate.name], a[M.EndDate.name]) > 0) {\r
+ if (diff(b[M.StartDate.name], b[M.EndDate.name]) > 0) {\r
+ // Both events are multi-day\r
+ if (a[M.StartDate.name].getTime() == b[M.StartDate.name].getTime()) {\r
+ // If both events start at the same time, sort the one\r
+ // that ends later (potentially longer span bar) first\r
+ return b[M.EndDate.name].getTime() - a[M.EndDate.name].getTime();\r
+ }\r
+ return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime();\r
+ }\r
+ return - 1;\r
+ }\r
+ else if (diff(b[M.StartDate.name], b[M.EndDate.name]) > 0) {\r
+ return 1;\r
+ }\r
+ return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime();\r
+ }\r
+ else {\r
+ // Doing this allows span and non-span events to intermingle but\r
+ // remain sorted sequentially by start time. This seems more proper\r
+ // but can make for a less visually-compact layout when there are\r
+ // many such events mixed together closely on the calendar.\r
+ return a[M.StartDate.name].getTime() - b[M.StartDate.name].getTime();\r
+ }\r
+ }.createDelegate(this));\r
+ },\r
+\r
+ /**\r
+ * Updates the view to contain the passed date\r
+ * @param {Date} dt The date to display\r
+ */\r
+ moveTo: function(dt, noRefresh) {\r
+ if (Ext.isDate(dt)) {\r
+ this.setStartDate(dt);\r
+ if (noRefresh !== false) {\r
+ this.refresh();\r
+ }\r
+ return this.startDate;\r
+ }\r
+ return dt;\r
+ },\r
+\r
+ /**\r
+ * Updates the view to the next consecutive date(s)\r
+ */\r
+ moveNext: function(noRefresh) {\r
+ return this.moveTo(this.viewEnd.add(Date.DAY, 1));\r
+ },\r
+\r
+ /**\r
+ * Updates the view to the previous consecutive date(s)\r
+ */\r
+ movePrev: function(noRefresh) {\r
+ var days = Ext.calendar.Date.diffDays(this.viewStart, this.viewEnd) + 1;\r
+ return this.moveDays( - days, noRefresh);\r
+ },\r
+\r
+ /**\r
+ * Shifts the view by the passed number of months relative to the currently set date\r
+ * @param {Number} value The number of months (positive or negative) by which to shift the view\r
+ */\r
+ moveMonths: function(value, noRefresh) {\r
+ return this.moveTo(this.startDate.add(Date.MONTH, value), noRefresh);\r
+ },\r
+\r
+ /**\r
+ * Shifts the view by the passed number of weeks relative to the currently set date\r
+ * @param {Number} value The number of weeks (positive or negative) by which to shift the view\r
+ */\r
+ moveWeeks: function(value, noRefresh) {\r
+ return this.moveTo(this.startDate.add(Date.DAY, value * 7), noRefresh);\r
+ },\r
+\r
+ /**\r
+ * Shifts the view by the passed number of days relative to the currently set date\r
+ * @param {Number} value The number of days (positive or negative) by which to shift the view\r
+ */\r
+ moveDays: function(value, noRefresh) {\r
+ return this.moveTo(this.startDate.add(Date.DAY, value), noRefresh);\r
+ },\r
+\r
+ /**\r
+ * Updates the view to show today\r
+ */\r
+ moveToday: function(noRefresh) {\r
+ return this.moveTo(new Date(), noRefresh);\r
+ },\r
+\r
+ /**\r
+ * Sets the event store used by the calendar to display {@link Ext.calendar.EventRecord events}.\r
+ * @param {Ext.data.Store} store\r
+ */\r
+ setStore: function(store, initial) {\r
+ if (!initial && this.store) {\r
+ this.store.un("datachanged", this.onDataChanged, this);\r
+ this.store.un("add", this.onAdd, this);\r
+ this.store.un("remove", this.onRemove, this);\r
+ this.store.un("update", this.onUpdate, this);\r
+ this.store.un("clear", this.refresh, this);\r
+ }\r
+ if (store) {\r
+ store.on("datachanged", this.onDataChanged, this);\r
+ store.on("add", this.onAdd, this);\r
+ store.on("remove", this.onRemove, this);\r
+ store.on("update", this.onUpdate, this);\r
+ store.on("clear", this.refresh, this);\r
+ }\r
+ this.store = store;\r
+ if (store && store.getCount() > 0) {\r
+ this.refresh();\r
+ }\r
+ },\r
+\r
+ getEventRecord: function(id) {\r
+ var idx = this.store.find(Ext.calendar.EventMappings.EventId.name, id);\r
+ return this.store.getAt(idx);\r
+ },\r
+\r
+ getEventRecordFromEl: function(el) {\r
+ return this.getEventRecord(this.getEventIdFromEl(el));\r
+ },\r
+\r
+ // private\r
+ getParams: function() {\r
+ return {\r
+ viewStart: this.viewStart,\r
+ viewEnd: this.viewEnd,\r
+ startDate: this.startDate,\r
+ dayCount: this.dayCount,\r
+ weekCount: this.weekCount,\r
+ title: this.getTitle()\r
+ };\r
+ },\r
+\r
+ getTitle: function() {\r
+ return this.startDate.format('F Y');\r
+ },\r
+\r
+ /*\r
+ * Shared click handling. Each specific view also provides view-specific\r
+ * click handling that calls this first. This method returns true if it\r
+ * can handle the click (and so the subclass should ignore it) else false.\r
+ */\r
+ onClick: function(e, t) {\r
+ var el = e.getTarget(this.eventSelector, 5);\r
+ if (el) {\r
+ var id = this.getEventIdFromEl(el);\r
+ this.fireEvent('eventclick', this, this.getEventRecord(id), el);\r
+ return true;\r
+ }\r
+ },\r
+\r
+ // private\r
+ onMouseOver: function(e, t) {\r
+ if (this.trackMouseOver !== false && (this.dragZone == undefined || !this.dragZone.dragging)) {\r
+ if (!this.handleEventMouseEvent(e, t, 'over')) {\r
+ this.handleDayMouseEvent(e, t, 'over');\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ onMouseOut: function(e, t) {\r
+ if (this.trackMouseOver !== false && (this.dragZone == undefined || !this.dragZone.dragging)) {\r
+ if (!this.handleEventMouseEvent(e, t, 'out')) {\r
+ this.handleDayMouseEvent(e, t, 'out');\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ handleEventMouseEvent: function(e, t, type) {\r
+ var el = e.getTarget(this.eventSelector, 5, true),\r
+ rel,\r
+ els,\r
+ evtId;\r
+ if (el) {\r
+ rel = Ext.get(e.getRelatedTarget());\r
+ if (el == rel || el.contains(rel)) {\r
+ return true;\r
+ }\r
+\r
+ evtId = this.getEventIdFromEl(el);\r
+\r
+ if (this.eventOverClass != '') {\r
+ els = this.getEventEls(evtId);\r
+ els[type == 'over' ? 'addClass': 'removeClass'](this.eventOverClass);\r
+ }\r
+ this.fireEvent('event' + type, this, this.getEventRecord(evtId), el);\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+\r
+ // private\r
+ getDateFromId: function(id, delim) {\r
+ var parts = id.split(delim);\r
+ return parts[parts.length - 1];\r
+ },\r
+\r
+ // private\r
+ handleDayMouseEvent: function(e, t, type) {\r
+ t = e.getTarget('td', 3);\r
+ if (t) {\r
+ if (t.id && t.id.indexOf(this.dayElIdDelimiter) > -1) {\r
+ var dt = this.getDateFromId(t.id, this.dayElIdDelimiter),\r
+ rel = Ext.get(e.getRelatedTarget()),\r
+ relTD,\r
+ relDate;\r
+\r
+ if (rel) {\r
+ relTD = rel.is('td') ? rel: rel.up('td', 3);\r
+ relDate = relTD && relTD.id ? this.getDateFromId(relTD.id, this.dayElIdDelimiter) : '';\r
+ }\r
+ if (!rel || dt != relDate) {\r
+ var el = this.getDayEl(dt);\r
+ if (el && this.dayOverClass != '') {\r
+ el[type == 'over' ? 'addClass': 'removeClass'](this.dayOverClass);\r
+ }\r
+ this.fireEvent('day' + type, this, Date.parseDate(dt, "Ymd"), el);\r
+ }\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ renderItems: function() {\r
+ throw 'This method must be implemented by a subclass';\r
+ }\r
+});/**\r
+ * @class Ext.calendar.MonthView\r
+ * @extends Ext.calendar.CalendarView\r
+ * <p>Displays a calendar view by month. This class does not usually need ot be used directly as you can\r
+ * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including\r
+ * the month view.</p>\r
+ * @constructor\r
+ * @param {Object} config The config object\r
+ */\r
+Ext.calendar.MonthView = Ext.extend(Ext.calendar.CalendarView, {\r
+ /**\r
+ * @cfg {Boolean} showTime\r
+ * True to display the current time in today's box in the calendar, false to not display it (defautls to true)\r
+ */\r
+ showTime: true,\r
+ /**\r
+ * @cfg {Boolean} showTodayText\r
+ * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)\r
+ */\r
+ showTodayText: true,\r
+ /**\r
+ * @cfg {String} todayText\r
+ * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')\r
+ */\r
+ todayText: 'Today',\r
+ /**\r
+ * @cfg {Boolean} showHeader\r
+ * True to display a header beneath the navigation bar containing the week names above each week's column, false not to \r
+ * show it and instead display the week names in the first row of days in the calendar (defaults to false).\r
+ */\r
+ showHeader: false,\r
+ /**\r
+ * @cfg {Boolean} showWeekLinks\r
+ * True to display an extra column before the first day in the calendar that links to the {@link Ext.calendar.WeekView view}\r
+ * for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week \r
+ * number depending on the value of {@link #showWeekNumbers}.\r
+ */\r
+ showWeekLinks: false,\r
+ /**\r
+ * @cfg {Boolean} showWeekNumbers\r
+ * True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false).\r
+ * Note that if {@link #showWeekLinks} is false this config will have no affect even if true.\r
+ */\r
+ showWeekNumbers: false,\r
+ /**\r
+ * @cfg {String} weekLinkOverClass\r
+ * The CSS class name applied when the mouse moves over a week link element (only applies when {@link #showWeekLinks} is true,\r
+ * defaults to 'ext-week-link-over').\r
+ */\r
+ weekLinkOverClass: 'ext-week-link-over',\r
+\r
+ //private properties -- do not override:\r
+ daySelector: '.ext-cal-day',\r
+ moreSelector: '.ext-cal-ev-more',\r
+ weekLinkSelector: '.ext-cal-week-link',\r
+ weekCount: -1,\r
+ // defaults to auto by month\r
+ dayCount: 7,\r
+ moreElIdDelimiter: '-more-',\r
+ weekLinkIdDelimiter: 'ext-cal-week-',\r
+\r
+ // private\r
+ initComponent: function() {\r
+ Ext.calendar.MonthView.superclass.initComponent.call(this);\r
+ this.addEvents({\r
+ /**\r
+ * @event dayclick\r
+ * Fires after the user clicks within the view container and not on an event element\r
+ * @param {Ext.calendar.MonthView} this\r
+ * @param {Date} dt The date/time that was clicked on\r
+ * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the \r
+ * MonthView always return true for this param.\r
+ * @param {Ext.Element} el The Element that was clicked on\r
+ */\r
+ dayclick: true,\r
+ /**\r
+ * @event weekclick\r
+ * Fires after the user clicks within a week link (when {@link #showWeekLinks is true)\r
+ * @param {Ext.calendar.MonthView} this\r
+ * @param {Date} dt The start date of the week that was clicked on\r
+ */\r
+ weekclick: true,\r
+ // inherited docs\r
+ dayover: true,\r
+ // inherited docs\r
+ dayout: true\r
+ });\r
+ },\r
+\r
+ // private\r
+ initDD: function() {\r
+ var cfg = {\r
+ view: this,\r
+ createText: this.ddCreateEventText,\r
+ moveText: this.ddMoveEventText,\r
+ ddGroup: 'MonthViewDD'\r
+ };\r
+\r
+ this.dragZone = new Ext.calendar.DragZone(this.el, cfg);\r
+ this.dropZone = new Ext.calendar.DropZone(this.el, cfg);\r
+ },\r
+\r
+ // private\r
+ onDestroy: function() {\r
+ Ext.destroy(this.ddSelector);\r
+ Ext.destroy(this.dragZone);\r
+ Ext.destroy(this.dropZone);\r
+ Ext.calendar.MonthView.superclass.onDestroy.call(this);\r
+ },\r
+\r
+ // private\r
+ afterRender: function() {\r
+ if (!this.tpl) {\r
+ this.tpl = new Ext.calendar.MonthViewTemplate({\r
+ id: this.id,\r
+ showTodayText: this.showTodayText,\r
+ todayText: this.todayText,\r
+ showTime: this.showTime,\r
+ showHeader: this.showHeader,\r
+ showWeekLinks: this.showWeekLinks,\r
+ showWeekNumbers: this.showWeekNumbers\r
+ });\r
+ }\r
+ this.tpl.compile();\r
+ this.addClass('ext-cal-monthview ext-cal-ct');\r
+\r
+ Ext.calendar.MonthView.superclass.afterRender.call(this);\r
+ },\r
+\r
+ // private\r
+ onResize: function() {\r
+ if (this.monitorResize) {\r
+ this.maxEventsPerDay = this.getMaxEventsPerDay();\r
+ this.refresh();\r
+ }\r
+ },\r
+\r
+ // private\r
+ forceSize: function() {\r
+ // Compensate for the week link gutter width if visible\r
+ if (this.showWeekLinks && this.el && this.el.child) {\r
+ var hd = this.el.select('.ext-cal-hd-days-tbl'),\r
+ bgTbl = this.el.select('.ext-cal-bg-tbl'),\r
+ evTbl = this.el.select('.ext-cal-evt-tbl'),\r
+ wkLinkW = this.el.child('.ext-cal-week-link').getWidth(),\r
+ w = this.el.getWidth() - wkLinkW;\r
+\r
+ hd.setWidth(w);\r
+ bgTbl.setWidth(w);\r
+ evTbl.setWidth(w);\r
+ }\r
+ Ext.calendar.MonthView.superclass.forceSize.call(this);\r
+ },\r
+\r
+ //private\r
+ initClock: function() {\r
+ if (Ext.fly(this.id + '-clock') !== null) {\r
+ this.prevClockDay = new Date().getDay();\r
+ if (this.clockTask) {\r
+ Ext.TaskMgr.stop(this.clockTask);\r
+ }\r
+ this.clockTask = Ext.TaskMgr.start({\r
+ run: function() {\r
+ var el = Ext.fly(this.id + '-clock'),\r
+ t = new Date();\r
+\r
+ if (t.getDay() == this.prevClockDay) {\r
+ if (el) {\r
+ el.update(t.format('g:i a'));\r
+ }\r
+ }\r
+ else {\r
+ this.prevClockDay = t.getDay();\r
+ this.moveTo(t);\r
+ }\r
+ },\r
+ scope: this,\r
+ interval: 1000\r
+ });\r
+ }\r
+ },\r
+\r
+ // inherited docs\r
+ getEventBodyMarkup: function() {\r
+ if (!this.eventBodyMarkup) {\r
+ this.eventBodyMarkup = ['{Title}',\r
+ '<tpl if="_isReminder">',\r
+ '<i class="ext-cal-ic ext-cal-ic-rem"> </i>',\r
+ '</tpl>',\r
+ '<tpl if="_isRecurring">',\r
+ '<i class="ext-cal-ic ext-cal-ic-rcr"> </i>',\r
+ '</tpl>',\r
+ '<tpl if="spanLeft">',\r
+ '<i class="ext-cal-spl"> </i>',\r
+ '</tpl>',\r
+ '<tpl if="spanRight">',\r
+ '<i class="ext-cal-spr"> </i>',\r
+ '</tpl>'\r
+ ].join('');\r
+ }\r
+ return this.eventBodyMarkup;\r
+ },\r
+\r
+ // inherited docs\r
+ getEventTemplate: function() {\r
+ if (!this.eventTpl) {\r
+ var tpl,\r
+ body = this.getEventBodyMarkup();\r
+\r
+ tpl = !(Ext.isIE || Ext.isOpera) ?\r
+ new Ext.XTemplate(\r
+ '<div id="{_elId}" class="{_selectorCls} {_colorCls} {values.spanCls} ext-cal-evt ext-cal-evr">',\r
+ body,\r
+ '</div>'\r
+ )\r
+ : new Ext.XTemplate(\r
+ '<tpl if="_renderAsAllDay">',\r
+ '<div id="{_elId}" class="{_selectorCls} {values.spanCls} {_colorCls} ext-cal-evt ext-cal-evo">',\r
+ '<div class="ext-cal-evm">',\r
+ '<div class="ext-cal-evi">',\r
+ '</tpl>',\r
+ '<tpl if="!_renderAsAllDay">',\r
+ '<div id="{_elId}" class="{_selectorCls} {_colorCls} ext-cal-evt ext-cal-evr">',\r
+ '</tpl>',\r
+ body,\r
+ '<tpl if="_renderAsAllDay">',\r
+ '</div>',\r
+ '</div>',\r
+ '</tpl>',\r
+ '</div>'\r
+ );\r
+ tpl.compile();\r
+ this.eventTpl = tpl;\r
+ }\r
+ return this.eventTpl;\r
+ },\r
+\r
+ // private\r
+ getTemplateEventData: function(evt) {\r
+ var M = Ext.calendar.EventMappings,\r
+ selector = this.getEventSelectorCls(evt[M.EventId.name]),\r
+ title = evt[M.Title.name];\r
+\r
+ return Ext.applyIf({\r
+ _selectorCls: selector,\r
+ _colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?\r
+ evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),\r
+ _elId: selector + '-' + evt._weekIndex,\r
+ _isRecurring: evt.Recurrence && evt.Recurrence != '',\r
+ _isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',\r
+ Title: (evt[M.IsAllDay.name] ? '': evt[M.StartDate.name].format('g:ia ')) + (!title || title.length == 0 ? '(No title)': title)\r
+ },\r
+ evt);\r
+ },\r
+\r
+ // private\r
+ refresh: function() {\r
+ if (this.detailPanel) {\r
+ this.detailPanel.hide();\r
+ }\r
+ Ext.calendar.MonthView.superclass.refresh.call(this);\r
+\r
+ if (this.showTime !== false) {\r
+ this.initClock();\r
+ }\r
+ },\r
+\r
+ // private\r
+ renderItems: function() {\r
+ Ext.calendar.WeekEventRenderer.render({\r
+ eventGrid: this.allDayOnly ? this.allDayGrid: this.eventGrid,\r
+ viewStart: this.viewStart,\r
+ tpl: this.getEventTemplate(),\r
+ maxEventsPerDay: this.maxEventsPerDay,\r
+ id: this.id,\r
+ templateDataFn: this.getTemplateEventData.createDelegate(this),\r
+ evtMaxCount: this.evtMaxCount,\r
+ weekCount: this.weekCount,\r
+ dayCount: this.dayCount\r
+ });\r
+ this.fireEvent('eventsrendered', this);\r
+ },\r
+\r
+ // private\r
+ getDayEl: function(dt) {\r
+ return Ext.get(this.getDayId(dt));\r
+ },\r
+\r
+ // private\r
+ getDayId: function(dt) {\r
+ if (Ext.isDate(dt)) {\r
+ dt = dt.format('Ymd');\r
+ }\r
+ return this.id + this.dayElIdDelimiter + dt;\r
+ },\r
+\r
+ // private\r
+ getWeekIndex: function(dt) {\r
+ var el = this.getDayEl(dt).up('.ext-cal-wk-ct');\r
+ return parseInt(el.id.split('-wk-')[1], 10);\r
+ },\r
+\r
+ // private\r
+ getDaySize: function(contentOnly) {\r
+ var box = this.el.getBox(),\r
+ w = box.width / this.dayCount,\r
+ h = box.height / this.getWeekCount();\r
+\r
+ if (contentOnly) {\r
+ var hd = this.el.select('.ext-cal-dtitle').first().parent('tr');\r
+ h = hd ? h - hd.getHeight(true) : h;\r
+ }\r
+ return {\r
+ height: h,\r
+ width: w\r
+ };\r
+ },\r
+\r
+ // private\r
+ getEventHeight: function() {\r
+ if (!this.eventHeight) {\r
+ var evt = this.el.select('.ext-cal-evt').first();\r
+ this.eventHeight = evt ? evt.parent('tr').getHeight() : 18;\r
+ }\r
+ return this.eventHeight;\r
+ },\r
+\r
+ // private\r
+ getMaxEventsPerDay: function() {\r
+ var dayHeight = this.getDaySize(true).height,\r
+ h = this.getEventHeight(),\r
+ max = Math.max(Math.floor((dayHeight - h) / h), 0);\r
+\r
+ return max;\r
+ },\r
+\r
+ // private\r
+ getDayAt: function(x, y) {\r
+ var box = this.el.getBox(),\r
+ daySize = this.getDaySize(),\r
+ dayL = Math.floor(((x - box.x) / daySize.width)),\r
+ dayT = Math.floor(((y - box.y) / daySize.height)),\r
+ days = (dayT * 7) + dayL,\r
+ dt = this.viewStart.add(Date.DAY, days);\r
+ return {\r
+ date: dt,\r
+ el: this.getDayEl(dt)\r
+ };\r
+ },\r
+\r
+ // inherited docs\r
+ moveNext: function() {\r
+ return this.moveMonths(1);\r
+ },\r
+\r
+ // inherited docs\r
+ movePrev: function() {\r
+ return this.moveMonths( - 1);\r
+ },\r
+\r
+ // private\r
+ onInitDrag: function() {\r
+ Ext.calendar.MonthView.superclass.onInitDrag.call(this);\r
+ Ext.select(this.daySelector).removeClass(this.dayOverClass);\r
+ if (this.detailPanel) {\r
+ this.detailPanel.hide();\r
+ }\r
+ },\r
+\r
+ // private\r
+ onMoreClick: function(dt) {\r
+ if (!this.detailPanel) {\r
+ this.detailPanel = new Ext.Panel({\r
+ id: this.id + '-details-panel',\r
+ title: dt.format('F j'),\r
+ layout: 'fit',\r
+ floating: true,\r
+ renderTo: Ext.getBody(),\r
+ tools: [{\r
+ id: 'close',\r
+ handler: function(e, t, p) {\r
+ p.hide();\r
+ }\r
+ }],\r
+ items: {\r
+ xtype: 'monthdaydetailview',\r
+ id: this.id + '-details-view',\r
+ date: dt,\r
+ view: this,\r
+ store: this.store,\r
+ listeners: {\r
+ 'eventsrendered': this.onDetailViewUpdated.createDelegate(this)\r
+ }\r
+ }\r
+ });\r
+ }\r
+ else {\r
+ this.detailPanel.setTitle(dt.format('F j'));\r
+ }\r
+ this.detailPanel.getComponent(this.id + '-details-view').update(dt);\r
+ },\r
+\r
+ // private\r
+ onDetailViewUpdated: function(view, dt, numEvents) {\r
+ var p = this.detailPanel,\r
+ frameH = p.getFrameHeight(),\r
+ evtH = this.getEventHeight(),\r
+ bodyH = frameH + (numEvents * evtH) + 3,\r
+ dayEl = this.getDayEl(dt),\r
+ box = dayEl.getBox();\r
+\r
+ p.updateBox(box);\r
+ p.setHeight(bodyH);\r
+ p.setWidth(Math.max(box.width, 220));\r
+ p.show();\r
+ p.getPositionEl().alignTo(dayEl, 't-t?');\r
+ },\r
+\r
+ // private\r
+ onHide: function() {\r
+ Ext.calendar.MonthView.superclass.onHide.call(this);\r
+ if (this.detailPanel) {\r
+ this.detailPanel.hide();\r
+ }\r
+ },\r
+\r
+ // private\r
+ onClick: function(e, t) {\r
+ if (this.detailPanel) {\r
+ this.detailPanel.hide();\r
+ }\r
+ if (Ext.calendar.MonthView.superclass.onClick.apply(this, arguments)) {\r
+ // The superclass handled the click already so exit\r
+ return;\r
+ }\r
+ if (this.dropZone) {\r
+ this.dropZone.clearShims();\r
+ }\r
+ var el = e.getTarget(this.weekLinkSelector, 3),\r
+ dt,\r
+ parts;\r
+ if (el) {\r
+ dt = el.id.split(this.weekLinkIdDelimiter)[1];\r
+ this.fireEvent('weekclick', this, Date.parseDate(dt, 'Ymd'));\r
+ return;\r
+ }\r
+ el = e.getTarget(this.moreSelector, 3);\r
+ if (el) {\r
+ dt = el.id.split(this.moreElIdDelimiter)[1];\r
+ this.onMoreClick(Date.parseDate(dt, 'Ymd'));\r
+ return;\r
+ }\r
+ el = e.getTarget('td', 3);\r
+ if (el) {\r
+ if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {\r
+ parts = el.id.split(this.dayElIdDelimiter);\r
+ dt = parts[parts.length - 1];\r
+\r
+ this.fireEvent('dayclick', this, Date.parseDate(dt, 'Ymd'), false, Ext.get(this.getDayId(dt)));\r
+ return;\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ handleDayMouseEvent: function(e, t, type) {\r
+ var el = e.getTarget(this.weekLinkSelector, 3, true);\r
+ if (el) {\r
+ el[type == 'over' ? 'addClass': 'removeClass'](this.weekLinkOverClass);\r
+ return;\r
+ }\r
+ Ext.calendar.MonthView.superclass.handleDayMouseEvent.apply(this, arguments);\r
+ }\r
+});\r
+\r
+Ext.reg('monthview', Ext.calendar.MonthView);\r
+/**
+ * @class Ext.calendar.DayHeaderView
+ * @extends Ext.calendar.MonthView
+ * <p>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}.</p>
+ * @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
+ * <p>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}.</p>
+ * @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) <p>True to slightly defer the call, false to execute immediately.</p>
+ * <p>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.</p>
+ * <p>Note that this method should not generally need to be called directly as scroll position is managed internally.</p>
+ */
+ 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}',
+ '<tpl if="_isReminder">',
+ '<i class="ext-cal-ic ext-cal-ic-rem"> </i>',
+ '</tpl>',
+ '<tpl if="_isRecurring">',
+ '<i class="ext-cal-ic ext-cal-ic-rcr"> </i>',
+ '</tpl>'
+ // '<tpl if="spanLeft">',
+ // '<i class="ext-cal-spl"> </i>',
+ // '</tpl>',
+ // '<tpl if="spanRight">',
+ // '<i class="ext-cal-spr"> </i>',
+ // '</tpl>'
+ ].join('');
+ }
+ return this.eventBodyMarkup;
+ },
+
+ // inherited docs
+ getEventTemplate: function() {
+ if (!this.eventTpl) {
+ 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"> </div></div>',
+ '</div>'
+ )
+ : 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"> </div>',
+ '<dl style="height: {_height}px;" class="ext-cal-evdm">',
+ '<dd class="ext-evt-bd">',
+ this.getEventBodyMarkup(),
+ '</dd>',
+ '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h"> </div></div>',
+ '</dl>',
+ '<div class="ext-cal-evb"> </div>',
+ '</div>'
+ );
+ this.eventTpl.compile();
+ }
+ return this.eventTpl;
+ },
+
+ /**
+ * <p>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 <strong>all-day</strong> 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.</p>
+ * <p>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.</p>
+ * @return {Ext.XTemplate} The event XTemplate
+ */
+ getEventAllDayTemplate: function() {
+ if (!this.eventAllDayTpl) {
+ var tpl,
+ body = this.getEventBodyMarkup();
+
+ tpl = !(Ext.isIE || Ext.isOpera) ?
+ new Ext.XTemplate(
+ '<div id="{_elId}" class="{_selectorCls} {_colorCls} {values.spanCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
+ body,
+ '</div>'
+ )
+ : new Ext.XTemplate(
+ '<div id="{_elId}" class="ext-cal-evt" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
+ '<div class="{_selectorCls} {values.spanCls} {_colorCls} ext-cal-evo">',
+ '<div class="ext-cal-evm">',
+ '<div class="ext-cal-evi">',
+ body,
+ '</div>',
+ '</div>',
+ '</div></div>'
+ );
+ tpl.compile();
+ this.eventAllDayTpl = tpl;
+ }
+ return this.eventAllDayTpl;
+ },
+
+ // private
+ getTemplateEventData: function(evt) {
+ var selector = this.getEventSelectorCls(evt[Ext.calendar.EventMappings.EventId.name]),
+ data = {},
+ M = Ext.calendar.EventMappings;
+
+ this.getTemplateEventBox(evt);
+
+ data._selectorCls = selector;
+ data._colorCls = 'ext-color-' + evt[M.CalendarId.name] + (evt._renderAsAllDay ? '-ad': '');
+ data._elId = selector + (evt._weekIndex ? '-' + evt._weekIndex: '');
+ data._isRecurring = evt.Recurrence && evt.Recurrence != '';
+ data._isReminder = evt[M.Reminder.name] && evt[M.Reminder.name] != '';
+ var title = evt[M.Title.name];
+ data.Title = (evt[M.IsAllDay.name] ? '': evt[M.StartDate.name].format('g:ia ')) + (!title || title.length == 0 ? '(No title)': title);
+
+ return Ext.applyIf(data, evt);
+ },
+
+ // private
+ getTemplateEventBox: function(evt) {
+ var heightFactor = 0.7,
+ start = evt[Ext.calendar.EventMappings.StartDate.name],
+ end = evt[Ext.calendar.EventMappings.EndDate.name],
+ startMins = start.getHours() * 60 + start.getMinutes(),
+ endMins = end.getHours() * 60 + end.getMinutes(),
+ diffMins = endMins - startMins;
+
+ evt._left = 0;
+ evt._width = 100;
+ evt._top = Math.round(startMins * heightFactor) + 1;
+ evt._height = Math.max((diffMins * heightFactor) - 2, 15);
+ },
+
+ // private
+ renderItems: function() {
+ var day = 0,
+ evts = [],
+ ev,
+ d,
+ ct,
+ item,
+ i,
+ j,
+ l,
+ overlapCols,
+ prevCol,
+ colWidth,
+ evtWidth,
+ markup,
+ target;
+ for (; day < this.dayCount; day++) {
+ ev = emptyCells = skipped = 0;
+ d = this.eventGrid[0][day];
+ ct = d ? d.length: 0;
+
+ for (; ev < ct; ev++) {
+ evt = d[ev];
+ if (!evt) {
+ continue;
+ }
+ item = evt.data || evt.event.data;
+ if (item._renderAsAllDay) {
+ continue;
+ }
+ Ext.apply(item, {
+ cls: 'ext-cal-ev',
+ _positioned: true
+ });
+ evts.push({
+ data: this.getTemplateEventData(item),
+ date: this.viewStart.add(Date.DAY, day)
+ });
+ }
+ }
+
+ // overlapping event pre-processing loop
+ i = j = overlapCols = prevCol = 0;
+ l = evts.length;
+ for (; i < l; i++) {
+ evt = evts[i].data;
+ evt2 = null;
+ prevCol = overlapCols;
+ for (j = 0; j < l; j++) {
+ if (i == j) {
+ continue;
+ }
+ evt2 = evts[j].data;
+ if (this.isOverlapping(evt, evt2)) {
+ evt._overlap = evt._overlap == undefined ? 1: evt._overlap + 1;
+ if (i < j) {
+ if (evt._overcol === undefined) {
+ evt._overcol = 0;
+ }
+ evt2._overcol = evt._overcol + 1;
+ overlapCols = Math.max(overlapCols, evt2._overcol);
+ }
+ }
+ }
+ }
+
+ // rendering loop
+ for (i = 0; i < l; i++) {
+ evt = evts[i].data;
+ if (evt._overlap !== undefined) {
+ colWidth = 100 / (overlapCols + 1);
+ evtWidth = 100 - (colWidth * evt._overlap);
+
+ evt._width = colWidth;
+ evt._left = colWidth * evt._overcol;
+ }
+ markup = this.getEventTemplate().apply(evt);
+ target = this.id + '-day-col-' + evts[i].date.format('Ymd');
+
+ Ext.DomHelper.append(target, markup);
+ }
+
+ this.fireEvent('eventsrendered', this);
+ },
+
+ // private
+ getDayEl: function(dt) {
+ return Ext.get(this.getDayId(dt));
+ },
+
+ // private
+ getDayId: function(dt) {
+ if (Ext.isDate(dt)) {
+ dt = dt.format('Ymd');
+ }
+ return this.id + this.dayColumnElIdDelimiter + dt;
+ },
+
+ // private
+ getDaySize: function() {
+ var box = this.el.child('.ext-cal-day-col-inner').getBox();
+ return {
+ height: box.height,
+ width: box.width
+ };
+ },
+
+ // private
+ getDayAt: function(x, y) {
+ var sel = '.ext-cal-body-ct',
+ xoffset = this.el.child('.ext-cal-day-times').getWidth(),
+ viewBox = this.el.getBox(),
+ daySize = this.getDaySize(false),
+ relX = x - viewBox.x - xoffset,
+ dayIndex = Math.floor(relX / daySize.width),
+ // clicked col index
+ scroll = this.el.getScroll(),
+ row = this.el.child('.ext-cal-bg-row'),
+ // first avail row, just to calc size
+ rowH = row.getHeight() / 2,
+ // 30 minute increment since a row is 60 minutes
+ relY = y - viewBox.y - rowH + scroll.top,
+ rowIndex = Math.max(0, Math.ceil(relY / rowH)),
+ mins = rowIndex * 30,
+ dt = this.viewStart.add(Date.DAY, dayIndex).add(Date.MINUTE, mins),
+ el = this.getDayEl(dt),
+ timeX = x;
+
+ if (el) {
+ timeX = el.getLeft();
+ }
+
+ return {
+ date: dt,
+ el: el,
+ // this is the box for the specific time block in the day that was clicked on:
+ timeBox: {
+ x: timeX,
+ y: (rowIndex * 21) + viewBox.y - scroll.top,
+ width: daySize.width,
+ height: rowH
+ }
+ };
+ },
+
+ // private
+ onClick: function(e, t) {
+ if (this.dragPending || Ext.calendar.DayBodyView.superclass.onClick.apply(this, arguments)) {
+ // The superclass handled the click already so exit
+ return;
+ }
+ if (e.getTarget('.ext-cal-day-times', 3) !== null) {
+ // ignore clicks on the times-of-day gutter
+ return;
+ }
+ var el = e.getTarget('td', 3);
+ if (el) {
+ if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {
+ var dt = this.getDateFromId(el.id, this.dayElIdDelimiter);
+ this.fireEvent('dayclick', this, Date.parseDate(dt, 'Ymd'), true, Ext.get(this.getDayId(dt, true)));
+ return;
+ }
+ }
+ var day = this.getDayAt(e.xy[0], e.xy[1]);
+ if (day && day.date) {
+ this.fireEvent('dayclick', this, day.date, false, null);
+ }
+ }
+});
+
+Ext.reg('daybodyview', Ext.calendar.DayBodyView);
+/**
+ * @class Ext.calendar.DayView
+ * @extends Ext.Container
+ * <p>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.</p>
+ * @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
+ * <p>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.</p>
+ * @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
+ * <p>A combination field that includes start and end dates and times, as well as an optional all-day checkbox.</p>
+ * @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:<div class="mdetail-params"><ul>
+ * <li><b><code>DateTime</code></b> : <div class="sub-desc">The start date/time</div></li>
+ * <li><b><code>DateTime</code></b> : <div class="sub-desc">The end date/time</div></li>
+ * <li><b><code>Boolean</code></b> : <div class="sub-desc">True if the dates are all-day, false
+ * if the time values should be used</div></li><ul></div>
+ * @return {Array} The array of return values
+ */
+ getValue: function() {
+ return [
+ this.getDT('start'),
+ this.getDT('end'),
+ this.allDay.getValue()
+ ];
+ },
+
+ // private getValue helper
+ getDT: function(startend) {
+ var time = this[startend + 'Time'].getValue(),
+ dt = this[startend + 'Date'].getValue();
+
+ if (Ext.isDate(dt)) {
+ dt = dt.format(this[startend + 'Date'].format);
+ }
+ else {
+ return null;
+ };
+ if (time != '' && this[startend + 'Time'].isVisible()) {
+ return Date.parseDate(dt + ' ' + time, this[startend + 'Date'].format + ' ' + this[startend + 'Time'].format);
+ }
+ return Date.parseDate(dt, this[startend + 'Date'].format);
+
+ },
+
+ /**
+ * Sets the values to use in the date range.
+ * @param {Array/Date/Object} v The value(s) to set into the field. Valid types are as follows:<div class="mdetail-params"><ul>
+ * <li><b><code>Array</code></b> : <div class="sub-desc">An array containing, in order, a start date, end date and all-day flag.
+ * This array should exactly match the return type as specified by {@link #getValue}.</div></li>
+ * <li><b><code>DateTime</code></b> : <div class="sub-desc">A single Date object, which will be used for both the start and
+ * end dates in the range. The all-day flag will be defaulted to false.</div></li>
+ * <li><b><code>Object</code></b> : <div class="sub-desc">An object containing properties for StartDate, EndDate and IsAllDay
+ * as defined in {@link Ext.calendar.EventMappings}.</div></li><ul></div>
+ */
+ setValue: function(v) {
+ if (Ext.isArray(v)) {
+ this.setDT(v[0], 'start');
+ this.setDT(v[1], 'end');
+ this.allDay.setValue( !! v[2]);
+ }
+ else if (Ext.isDate(v)) {
+ this.setDT(v, 'start');
+ this.setDT(v, 'end');
+ this.allDay.setValue(false);
+ }
+ else if (v[Ext.calendar.EventMappings.StartDate.name]) {
+ //object
+ this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'start');
+ if (!this.setDT(v[Ext.calendar.EventMappings.EndDate.name], 'end')) {
+ this.setDT(v[Ext.calendar.EventMappings.StartDate.name], 'end');
+ }
+ this.allDay.setValue( !! v[Ext.calendar.EventMappings.IsAllDay.name]);
+ }
+ },
+
+ // private setValue helper
+ setDT: function(dt, startend) {
+ if (dt && Ext.isDate(dt)) {
+ this[startend + 'Date'].setValue(dt);
+ this[startend + 'Time'].setValue(dt.format(this[startend + 'Time'].format));
+ return true;
+ }
+ },
+
+ // inherited docs
+ isDirty: function() {
+ var dirty = false;
+ if (this.rendered && !this.disabled) {
+ this.items.each(function(item) {
+ if (item.isDirty()) {
+ dirty = true;
+ return false;
+ }
+ });
+ }
+ return dirty;
+ },
+
+ // private
+ onDisable: function() {
+ this.delegateFn('disable');
+ },
+
+ // private
+ onEnable: function() {
+ this.delegateFn('enable');
+ },
+
+ // inherited docs
+ reset: function() {
+ this.delegateFn('reset');
+ },
+
+ // private
+ delegateFn: function(fn) {
+ this.items.each(function(item) {
+ if (item[fn]) {
+ item[fn]();
+ }
+ });
+ },
+
+ // private
+ beforeDestroy: function() {
+ Ext.destroy(this.fieldCt);
+ Ext.calendar.DateRangeField.superclass.beforeDestroy.call(this);
+ },
+
+ /**
+ * @method getRawValue
+ * @hide
+ */
+ getRawValue: Ext.emptyFn,
+ /**
+ * @method setRawValue
+ * @hide
+ */
+ setRawValue: Ext.emptyFn
+});
+
+Ext.reg('daterangefield', Ext.calendar.DateRangeField);
+/**
+ * @class Ext.calendar.ReminderField
+ * @extends Ext.form.ComboBox
+ * <p>A custom combo used for choosing a reminder setting for an event.</p>
+ * <p>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:<pre><code>
+ width: 200,
+ fieldLabel: 'Reminder',
+ mode: 'local',
+ triggerAction: 'all',
+ forceSelection: true,
+ displayField: 'desc',
+ valueField: 'value'
+</code></pre>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.ReminderField = Ext.extend(Ext.form.ComboBox, {
+ width: 200,
+ fieldLabel: 'Reminder',
+ mode: 'local',
+ triggerAction: 'all',
+ forceSelection: true,
+ displayField: 'desc',
+ valueField: 'value',
+
+ // private
+ initComponent: function() {
+ Ext.calendar.ReminderField.superclass.initComponent.call(this);
+
+ this.store = this.store || new Ext.data.ArrayStore({
+ fields: ['value', 'desc'],
+ idIndex: 0,
+ data: [
+ ['', 'None'],
+ ['0', 'At start time'],
+ ['5', '5 minutes before start'],
+ ['15', '15 minutes before start'],
+ ['30', '30 minutes before start'],
+ ['60', '1 hour before start'],
+ ['90', '1.5 hours before start'],
+ ['120', '2 hours before start'],
+ ['180', '3 hours before start'],
+ ['360', '6 hours before start'],
+ ['720', '12 hours before start'],
+ ['1440', '1 day before start'],
+ ['2880', '2 days before start'],
+ ['4320', '3 days before start'],
+ ['5760', '4 days before start'],
+ ['7200', '5 days before start'],
+ ['10080', '1 week before start'],
+ ['20160', '2 weeks before start']
+ ]
+ });
+ },
+
+ // inherited docs
+ initValue: function() {
+ if (this.value !== undefined) {
+ this.setValue(this.value);
+ }
+ else {
+ this.setValue('');
+ }
+ this.originalValue = this.getValue();
+ }
+});
+
+Ext.reg('reminderfield', Ext.calendar.ReminderField);
+/**
+ * @class Ext.calendar.EventEditForm
+ * @extends Ext.form.FormPanel
+ * <p>A custom form used for detailed editing of events.</p>
+ * <p>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.</p>
+ * <p>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.</p>
+ * <p>The default configs are as follows:</p><pre><code>
+ 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',
+</code></pre>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.EventEditForm = Ext.extend(Ext.form.FormPanel, {
+ labelWidth: 65,
+ title: 'Event Form',
+ titleTextAdd: 'Add Event',
+ titleTextEdit: 'Edit Event',
+ bodyStyle: 'background:transparent;padding:20px 20px 10px;',
+ border: false,
+ buttonAlign: 'center',
+ autoHeight: true,
+ // to allow for the notes field to autogrow
+ cls: 'ext-evt-edit-form',
+
+ // private properties:
+ newId: 10000,
+ layout: 'column',
+
+ // private
+ initComponent: function() {
+
+ this.addEvents({
+ /**
+ * @event eventadd
+ * Fires after a new event is added
+ * @param {Ext.calendar.EventEditForm} 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.EventEditForm} 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.EventEditForm} 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.EventEditForm} this
+ * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
+ */
+ eventcancel: true
+ });
+
+ this.titleField = new Ext.form.TextField({
+ fieldLabel: 'Title',
+ name: Ext.calendar.EventMappings.Title.name,
+ anchor: '90%'
+ });
+ this.dateRangeField = new Ext.calendar.DateRangeField({
+ fieldLabel: 'When',
+ anchor: '90%'
+ });
+ this.reminderField = new Ext.calendar.ReminderField({
+ name: 'Reminder'
+ });
+ this.notesField = new Ext.form.TextArea({
+ fieldLabel: 'Notes',
+ name: Ext.calendar.EventMappings.Notes.name,
+ grow: true,
+ growMax: 150,
+ anchor: '100%'
+ });
+ this.locationField = new Ext.form.TextField({
+ fieldLabel: 'Location',
+ name: Ext.calendar.EventMappings.Location.name,
+ anchor: '100%'
+ });
+ this.urlField = new Ext.form.TextField({
+ fieldLabel: 'Web Link',
+ name: Ext.calendar.EventMappings.Url.name,
+ anchor: '100%'
+ });
+
+ var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
+ rightFields = [this.notesField, this.locationField, this.urlField];
+
+ if (this.calendarStore) {
+ this.calendarField = new Ext.calendar.CalendarPicker({
+ store: this.calendarStore,
+ name: Ext.calendar.EventMappings.CalendarId.name
+ });
+ leftFields.splice(2, 0, this.calendarField);
+ };
+
+ this.items = [{
+ id: 'left-col',
+ columnWidth: 0.65,
+ layout: 'form',
+ border: false,
+ items: leftFields
+ },
+ {
+ id: 'right-col',
+ columnWidth: 0.35,
+ layout: 'form',
+ border: false,
+ items: rightFields
+ }];
+
+ this.fbar = [{
+ text: 'Save',
+ scope: this,
+ handler: this.onSave
+ },
+ {
+ cls: 'ext-del-btn',
+ text: 'Delete',
+ scope: this,
+ handler: this.onDelete
+ },
+ {
+ text: 'Cancel',
+ scope: this,
+ handler: this.onCancel
+ }];
+
+ Ext.calendar.EventEditForm.superclass.initComponent.call(this);
+ },
+
+ // inherited docs
+ loadRecord: function(rec) {
+ this.form.loadRecord.apply(this.form, arguments);
+ this.activeRecord = rec;
+ this.dateRangeField.setValue(rec.data);
+ if (this.calendarStore) {
+ this.form.setValues({
+ 'calendar': rec.data[Ext.calendar.EventMappings.CalendarId.name]
+ });
+ }
+ this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
+ if (this.isAdd) {
+ rec.markDirty();
+ this.setTitle(this.titleTextAdd);
+ Ext.select('.ext-del-btn').setDisplayed(false);
+ }
+ else {
+ this.setTitle(this.titleTextEdit);
+ Ext.select('.ext-del-btn').setDisplayed(true);
+ }
+ this.titleField.focus();
+ },
+
+ // inherited docs
+ updateRecord: function() {
+ var dates = this.dateRangeField.getValue();
+
+ this.form.updateRecord(this.activeRecord);
+ this.activeRecord.set(Ext.calendar.EventMappings.StartDate.name, dates[0]);
+ this.activeRecord.set(Ext.calendar.EventMappings.EndDate.name, dates[1]);
+ this.activeRecord.set(Ext.calendar.EventMappings.IsAllDay.name, dates[2]);
+ },
+
+ // private
+ onCancel: function() {
+ this.cleanup(true);
+ this.fireEvent('eventcancel', this, this.activeRecord);
+ },
+
+ // private
+ cleanup: function(hide) {
+ if (this.activeRecord && this.activeRecord.dirty) {
+ this.activeRecord.reject();
+ }
+ delete this.activeRecord;
+
+ if (this.form.isDirty()) {
+ this.form.reset();
+ }
+ },
+
+ // private
+ onSave: function() {
+ if (!this.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);
+ }
+});
+
+Ext.reg('eventeditform', Ext.calendar.EventEditForm);
+/**
+ * @class Ext.calendar.EventEditWindow
+ * @extends Ext.Window
+ * <p>A custom window containing a basic edit form used for quick editing of events.</p>
+ * <p>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.</p>
+ * @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: '<a href="#" id="tblink">Edit Details...</a>'
+ },
+ '->', {
+ 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
+ * <p>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.</p>
+ * {@link #layoutConfig} option if needed.</p>
+ * @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:<div class="mdetail-params"><ul>
+ * <li><b><code>activeDate</code></b> : <div class="sub-desc">The currently-selected date</div></li>
+ * <li><b><code>viewStart</code></b> : <div class="sub-desc">The first date in the new view range</div></li>
+ * <li><b><code>viewEnd</code></b> : <div class="sub-desc">The last date in the new view range</div></li>
+ * </ul></div>
+ */
+ viewchange: true
+
+ //
+ // NOTE: CalendarPanel also relays the following events from contained views as if they originated from this:
+ //
+ /**
+ * @event eventsrendered
+ * Fires after events are finished rendering in the view
+ * @param {Ext.calendar.CalendarPanel} this
+ */
+ /**
+ * @event eventclick
+ * Fires after the user clicks on an event element
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ /**
+ * @event eventover
+ * Fires anytime the mouse is over an event element
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ /**
+ * @event eventout
+ * Fires anytime the mouse exits an event element
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ /**
+ * @event datechange
+ * Fires after the start date of the view changes
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ /**
+ * @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.CalendarPanel} 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()).
+ */
+ /**
+ * @event eventmove
+ * Fires after an event element is dragged by the user and dropped in a new position
+ * @param {Ext.calendar.CalendarPanel} this
+ * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was moved with
+ * updated start and end dates
+ */
+ /**
+ * @event initdrag
+ * Fires when a drag operation is initiated in the view
+ * @param {Ext.calendar.CalendarPanel} this
+ */
+ /**
+ * @event eventresize
+ * Fires after the user drags the resize handle of an event to resize it
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ /**
+ * @event dayclick
+ * Fires after the user clicks within a day/week view container and not on an event element
+ * @param {Ext.calendar.CalendarPanel} 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
+ */
+ });
+
+ this.layout = 'card';
+ // do not allow override
+ if (this.showDayView) {
+ var day = Ext.apply({
+ xtype: 'dayview',
+ title: this.dayText,
+ showToday: this.showToday,
+ showTodayText: this.showTodayText,
+ showTime: this.showTime
+ },
+ this.dayViewCfg);
+
+ day.id = this.id + '-day';
+ day.store = day.store || this.eventStore;
+ this.initEventRelay(day);
+ this.add(day);
+ }
+ if (this.showWeekView) {
+ var wk = Ext.applyIf({
+ xtype: 'weekview',
+ title: this.weekText,
+ showToday: this.showToday,
+ showTodayText: this.showTodayText,
+ showTime: this.showTime
+ },
+ this.weekViewCfg);
+
+ wk.id = this.id + '-week';
+ wk.store = wk.store || this.eventStore;
+ this.initEventRelay(wk);
+ this.add(wk);
+ }
+ if (this.showMonthView) {
+ var month = Ext.applyIf({
+ xtype: 'monthview',
+ title: this.monthText,
+ showToday: this.showToday,
+ showTodayText: this.showTodayText,
+ showTime: this.showTime,
+ listeners: {
+ 'weekclick': {
+ fn: function(vw, dt) {
+ this.showWeek(dt);
+ },
+ scope: this
+ }
+ }
+ },
+ this.monthViewCfg);
+
+ month.id = this.id + '-month';
+ month.store = month.store || this.eventStore;
+ this.initEventRelay(month);
+ this.add(month);
+ }
+
+ this.add(Ext.applyIf({
+ xtype: 'eventeditform',
+ id: this.id + '-edit',
+ calendarStore: this.calendarStore,
+ listeners: {
+ 'eventadd': {
+ scope: this,
+ fn: this.onEventAdd
+ },
+ 'eventupdate': {
+ scope: this,
+ fn: this.onEventUpdate
+ },
+ 'eventdelete': {
+ scope: this,
+ fn: this.onEventDelete
+ },
+ 'eventcancel': {
+ scope: this,
+ fn: this.onEventCancel
+ }
+ }
+ },
+ this.editViewCfg));
+ },
+
+ // private
+ initEventRelay: function(cfg) {
+ cfg.listeners = cfg.listeners || {};
+ cfg.listeners.afterrender = {
+ fn: function(c) {
+ // relay the view events so that app code only has to handle them in one place
+ this.relayEvents(c, ['eventsrendered', 'eventclick', 'eventover', 'eventout', 'dayclick',
+ 'eventmove', 'datechange', 'rangeselect', 'eventdelete', 'eventresize', 'initdrag']);
+ },
+ scope: this,
+ single: true
+ };
+ },
+
+ // private
+ afterRender: function() {
+ Ext.calendar.CalendarPanel.superclass.afterRender.call(this);
+ this.fireViewChange();
+ },
+
+ // private
+ onLayout: function() {
+ Ext.calendar.CalendarPanel.superclass.onLayout.call(this);
+ if (!this.navInitComplete) {
+ this.updateNavState();
+ this.navInitComplete = true;
+ }
+ },
+
+ // private
+ onEventAdd: function(form, rec) {
+ rec.data[Ext.calendar.EventMappings.IsNew.name] = false;
+ this.eventStore.add(rec);
+ this.hideEditForm();
+ this.fireEvent('eventadd', this, rec);
+ },
+
+ // private
+ onEventUpdate: function(form, rec) {
+ rec.commit();
+ this.hideEditForm();
+ this.fireEvent('eventupdate', this, rec);
+ },
+
+ // private
+ onEventDelete: function(form, rec) {
+ this.eventStore.remove(rec);
+ this.hideEditForm();
+ this.fireEvent('eventdelete', this, rec);
+ },
+
+ // private
+ onEventCancel: function(form, rec) {
+ this.hideEditForm();
+ this.fireEvent('eventcancel', this, rec);
+ },
+
+ /**
+ * Shows the built-in event edit form for the passed in event record. This method automatically
+ * hides the calendar views and navigation toolbar. To return to the calendar, call {@link #hideEditForm}.
+ * @param {Ext.calendar.EventRecord} record The event record to edit
+ * @return {Ext.calendar.CalendarPanel} this
+ */
+ showEditForm: function(rec) {
+ this.preEditView = this.layout.activeItem.id;
+ this.setActiveView(this.id + '-edit');
+ this.layout.activeItem.loadRecord(rec);
+ return this;
+ },
+
+ /**
+ * Hides the built-in event edit form and returns to the previous calendar view. If the edit form is
+ * not currently visible this method has no effect.
+ * @return {Ext.calendar.CalendarPanel} this
+ */
+ hideEditForm: function() {
+ if (this.preEditView) {
+ this.setActiveView(this.preEditView);
+ delete this.preEditView;
+ }
+ return this;
+ },
+
+ // private
+ setActiveView: function(id) {
+ var l = this.layout;
+ l.setActiveItem(id);
+
+ if (id == this.id + '-edit') {
+ this.getTopToolbar().hide();
+ this.doLayout();
+ }
+ else {
+ l.activeItem.refresh();
+ this.getTopToolbar().show();
+ this.updateNavState();
+ }
+ this.activeView = l.activeItem;
+ this.fireViewChange();
+ },
+
+ // private
+ fireViewChange: function() {
+ var info = null,
+ view = this.layout.activeItem;
+
+ if (view.getViewBounds) {
+ vb = view.getViewBounds();
+ info = {
+ activeDate: view.getStartDate(),
+ viewStart: vb.start,
+ viewEnd: vb.end
+ };
+ };
+ this.fireEvent('viewchange', this, view, info);
+ },
+
+ // private
+ updateNavState: function() {
+ if (this.showNavBar !== false) {
+ var item = this.layout.activeItem,
+ suffix = item.id.split(this.id + '-')[1];
+
+ var btn = Ext.getCmp(this.id + '-tb-' + suffix);
+ btn.toggle(true);
+ }
+ },
+
+ /**
+ * Sets the start date for the currently-active calendar view.
+ * @param {Date} dt
+ */
+ setStartDate: function(dt) {
+ this.layout.activeItem.setStartDate(dt, true);
+ this.updateNavState();
+ this.fireViewChange();
+ },
+
+ // private
+ showWeek: function(dt) {
+ this.setActiveView(this.id + '-week');
+ this.setStartDate(dt);
+ },
+
+ // private
+ onPrevClick: function() {
+ this.startDate = this.layout.activeItem.movePrev();
+ this.updateNavState();
+ this.fireViewChange();
+ },
+
+ // private
+ onNextClick: function() {
+ this.startDate = this.layout.activeItem.moveNext();
+ this.updateNavState();
+ this.fireViewChange();
+ },
+
+ // private
+ onDayClick: function() {
+ this.setActiveView(this.id + '-day');
+ },
+
+ // private
+ onWeekClick: function() {
+ this.setActiveView(this.id + '-week');
+ },
+
+ // private
+ onMonthClick: function() {
+ this.setActiveView(this.id + '-month');
+ },
+
+ /**
+ * Return the calendar view that is currently active, which will be a subclass of
+ * {@link Ext.calendar.CalendarView CalendarView}.
+ * @return {Ext.calendar.CalendarView} The active view
+ */
+ getActiveView: function() {
+ return this.layout.activeItem;
+ }
+});
+
+Ext.reg('calendarpanel', Ext.calendar.CalendarPanel);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff