/** * Represents an event on a calendar view. */Ext.define('Ext.calendar.Event', { extend: 'Ext.calendar.EventBase', xtype: 'calendar-event', config: { //<locale> /** * @cfg {String} timeFormat * A display format for the time. */ timeFormat: 'H:i' //</locale> }, smallSize: 60, getElementConfig: function() { var cfg = this.callParent(); cfg.cls = Ext.baseCSSPrefix + 'calendar-event'; cfg.children = [{ cls: Ext.baseCSSPrefix + 'calendar-event-inner', reference: 'innerElement', children: [{ cls: Ext.baseCSSPrefix + 'calendar-event-time', reference: 'timeElement', children: [{ tag: 'span', reference: 'startElement', cls: Ext.baseCSSPrefix + 'calendar-event-time-start' }, { tag: 'span', html: ' - ', reference: 'separatorElement', cls: Ext.baseCSSPrefix + 'calendar-event-time-separator' }, { tag: 'span', reference: 'endElement', cls: Ext.baseCSSPrefix + 'calendar-event-time-end' }] }, { reference: 'titleElement', tag: 'span', cls: Ext.baseCSSPrefix + 'calendar-event-title' }, { cls: Ext.baseCSSPrefix + 'calendar-event-resizer', reference: 'resizerElement' }] }]; return cfg; }, updateEndDate: function(date) { this.endElement.dom.innerHTML = this.displayDate(date); this.calculateSize(); }, updateMode: function(mode) { var me = this; me.addCls(this.modes[mode]); if (mode === 'weekinline' || mode === 'weekspan') { me.addCls(me.$inlineTitleCls); } }, updatePalette: function(palette) { var inner = this.innerElement.dom.style, mode = this.getMode(); if (mode === 'weekspan' || mode === 'day') { inner.backgroundColor = palette.primary; inner.color = palette.secondary; if (mode === 'day') { this.element.dom.style.borderColor = palette.border; } } else { inner.color = palette.primary; } }, updateStartDate: function(date) { this.startElement.dom.innerHTML = this.displayDate(date); this.calculateSize(); }, updateTitle: function(title) { title = title || this.getDefaultTitle(); this.titleElement.dom.innerHTML = Ext.String.htmlEncode(title); }, privates: { $inlineTitleCls: Ext.baseCSSPrefix + 'calendar-event-inline-title', modes: { day: Ext.baseCSSPrefix + 'calendar-event-day', weekspan: Ext.baseCSSPrefix + 'calendar-event-week-span', weekinline: Ext.baseCSSPrefix + 'calendar-event-week-inline' }, calculateSize: function() { var me = this, start = me.getStartDate(), end = me.getEndDate(), ms = me.getView().MS_TO_MINUTES, isDay = me.getMode() === 'day', small; if (!isDay || (start && end)) { small = !isDay || ((end - start) <= me.smallSize * ms); me.element.toggleCls(me.$inlineTitleCls, small); } }, displayDate: function(d) { var D = Ext.Date; if (d) { d = this.getView().utcToLocal(d); return Ext.Date.format(d, this.getTimeFormat()); } } }});