/**
* A base class for an event widget. A default implementation is provided
* by {@link Ext.calendar.Event}. This class should be extended to
* provide a custom implementation.
* @abstract
*/
Ext.define('Ext.calendar.EventBase', {
extend: 'Ext.Gadget',
config: {
//<locale>
/**
* @cfg {String} defaultTitle
* The default title to use when one is not specified.
*/
defaultTitle: '(New Event)',
//</locale>
/**
* @cfg {Date} endDate
* The end date for this event (as UTC). Will be set automatically if
* a {@link #model} is passed. May be set independently
* of any attached {@link #model}.
*/
endDate: null,
/**
* @cfg {String} mode
* The display mode for this event. Possible options are:
* - `weekspan`
* - `weekinline`
* - `day`
*/
mode: null,
/**
* @cfg {Ext.calendar.model.EventBase} model
* A backing model for this widget.
*/
model: null,
/**
* @cfg {Ext.calendar.theme.Palette} palette
* A color palette for this event.
*/
palette: null,
/**
* @cfg {Boolean} resize
* `true` to allow this event to be resized via the UI.
*/
resize: false,
/**
* @cfg {Date} startDate
* The start date for this event (as UTC). Will be set automatically if
* a {@link #model} is passed. May be set independently
* of any attached {@link #model}.
*/
startDate: null,
/**
* @cfg {String} title
* The title for this event. Will be set automatically if
* a {@link #model} is passed.
*/
title: '',
/**
* @inheritdoc
*/
touchAction: {
panX: false,
panY: false
},
/**
* @cfg {Ext.calendar.view.Base} view
* The view for this event.
*/
view: null
},
/**
* Clone this event to be used as a proxy for a drag.
* @return {Ext.calendar.EventBase} The event.
*/
cloneForProxy: function() {
var T = this.self;
return new T(this.config);
},
updateModel: function(model) {
var me = this,
dom;
if (model) {
me.setStartDate(model.getStartDate());
me.setEndDate(model.getEndDate());
me.setTitle(model.getTitle());
dom = me.element.dom;
dom.setAttribute('data-eventId', model.id);
dom.setAttribute('data-calendarId', model.getCalendarId());
}
},
updateResize: function(resize) {
this.toggleCls(this.$allowResizeCls, resize);
},
privates: {
$allowResizeCls: Ext.baseCSSPrefix + 'calendar-event-resizable'
}
});
/**
* 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());
}
}
}
});
/**
* A base class for the calendar view.
*
* @private
*/
Ext.define('Ext.calendar.AbstractList', {
extend: 'Ext.view.View',
updateNavigationModel: function(navigationModel, oldNavigationModel) {
navigationModel.focusCls = '';
},
onItemClick: function(record, item, index, e) {
this.callParent([
record,
item,
index,
e
]);
this.handleItemTap(record);
}
});
/**
* A simple view for displaying a list of calendars.
*/
Ext.define('Ext.calend
