Ext.define('Ext.calendar.view.Month', {
extend: 'Ext.calendar.view.AbstractCalendar',
alias: 'widget.monthview',
requires: [
'Ext.XTemplate',
'Ext.calendar.template.Month',
'Ext.calendar.util.WeekEventRenderer',
'Ext.calendar.view.MonthDayDetail'
],
showTime: true,
showTodayText: true,
todayText: 'Today',
showHeader: false,
showWeekLinks: false,
showWeekNumbers: false,
weekLinkOverClass: 'ext-week-link-over',
daySelector: '.ext-cal-day',
moreSelector: '.ext-cal-ev-more',
weekLinkSelector: '.ext-cal-week-link',
weekCount: -1,
dayCount: 7,
moreElIdDelimiter: '-more-',
weekLinkIdDelimiter: 'ext-cal-week-',
initComponent: function() {
this.callParent(arguments);
this.addEvents({
dayclick: true,
weekclick: true,
dayover: true,
dayout: true
});
},
initDD: function() {
var cfg = {
view: this,
createText: this.ddCreateEventText,
moveText: this.ddMoveEventText,
ddGroup: 'MonthViewDD'
};
this.dragZone = new Ext.calendar.dd.DragZone(this.el, cfg);
this.dropZone = new Ext.calendar.dd.DropZone(this.el, cfg);
},
onDestroy: function() {
Ext.destroy(this.ddSelector);
Ext.destroy(this.dragZone);
Ext.destroy(this.dropZone);
this.callParent(arguments);
},
afterRender: function() {
if (!this.tpl) {
this.tpl = new Ext.calendar.template.Month({
id: this.id,
showTodayText: this.showTodayText,
todayText: this.todayText,
showTime: this.showTime,
showHeader: this.showHeader,
showWeekLinks: this.showWeekLinks,
showWeekNumbers: this.showWeekNumbers
});
}
this.tpl.compile();
this.addCls('ext-cal-monthview ext-cal-ct');
this.callParent(arguments);
},
onResize: function() {
if (this.monitorResize) {
this.maxEventsPerDay = this.getMaxEventsPerDay();
this.refresh();
}
},
forceSize: function() {
if(this.showWeekLinks && this.el){
var hd = this.el.down('.ext-cal-hd-days-tbl'),
bgTbl = this.el.select('.ext-cal-bg-tbl'),
evTbl = this.el.select('.ext-cal-evt-tbl'),
wkLinkW = this.el.down('.ext-cal-week-link').getWidth(),
w = this.el.getWidth()-wkLinkW;
hd.setWidth(w);
bgTbl.setWidth(w);
evTbl.setWidth(w);
}
this.callParent(arguments);
},
initClock: function() {
if (Ext.fly(this.id + '-clock') !== null) {
this.prevClockDay = new Date().getDay();
if (this.clockTask) {
Ext.TaskManager.stop(this.clockTask);
}
this.clockTask = Ext.TaskManager.start({
run: function() {
var el = Ext.fly(this.id + '-clock'),
t = new Date();
if (t.getDay() == this.prevClockDay) {
if (el) {
el.update(Ext.Date.format(t, 'g:i a'));
}
}
else {
this.prevClockDay = t.getDay();
this.moveTo(t);
}
},
scope: this,
interval: 1000
});
}
},
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;
},
getEventTemplate: function() {
if (!this.eventTpl) {
var tpl,
body = this.getEventBodyMarkup();
tpl = !(Ext.isIE || Ext.isOpera) ?
new Ext.XTemplate(
'<div id="{_elId}" class="{_selectorCls} {_colorCls} {spanCls} ext-cal-evt ext-cal-evr">',
body,
'</div>'
)
: new Ext.XTemplate(
'<tpl if="_renderAsAllDay">',
'<div id="{_elId}" class="{_selectorCls} {spanCls} {_colorCls} ext-cal-evt ext-cal-evo">',
'<div class="ext-cal-evm">',
'<div class="ext-cal-evi">',
'</tpl>',
'<tpl if="!_renderAsAllDay">',
'<div id="{_elId}" class="{_selectorCls} {_colorCls} ext-cal-evt ext-cal-evr">',
'</tpl>',
body,
'<tpl if="_renderAsAllDay">',
'</div>',
'</div>',
'</tpl>',
'</div>'
);
tpl.compile();
this.eventTpl = tpl;
}
return this.eventTpl;
},
getTemplateEventData: function(evt) {
var M = Ext.calendar.data.EventMappings,
selector = this.getEventSelectorCls(evt[M.EventId.name]),
title = evt[M.Title.name];
return Ext.applyIf({
_selectorCls: selector,
_colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?
evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),
_elId: selector + '-' + evt._weekIndex,
_isRecurring: evt.Recurrence && evt.Recurrence != '',
_isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',
Title: (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)' : title)
},
evt);
},
refresh: function() {
if (this.detailPanel) {
this.detailPanel.hide();
}
this.callParent(arguments);
if (this.showTime !== false) {
this.initClock();
}
},
renderItems: function() {
Ext.calendar.util.WeekEventRenderer.render({
eventGrid: this.allDayOnly ? this.allDayGrid: this.eventGrid,
viewStart: this.viewStart,
tpl: this.getEventTemplate(),
maxEventsPerDay: this.maxEventsPerDay,
id: this.id,
templateDataFn: Ext.bind(this.getTemplateEventData, this),
evtMaxCount: this.evtMaxCount,
weekCount: this.weekCount,
dayCount: this.dayCount
});
this.fireEvent('eventsrendered', this);
},
getDayEl: function(dt) {
return Ext.get(this.getDayId(dt));
},
getDayId: function(dt) {
if (Ext.isDate(dt)) {
dt = Ext.Date.format(dt, 'Ymd');
}
return this.id + this.dayElIdDelimiter + dt;
},
getWeekIndex: function(dt) {
var el = this.getDayEl(dt).up('.ext-cal-wk-ct');
return parseInt(el.id.split('-wk-')[1], 10);
},
getDaySize: function(contentOnly) {
var box = this.el.getBox(),
w = box.width / this.dayCount,
h = box.height / this.getWeekCount();
if (contentOnly) {
var hd = this.el.select('.ext-cal-dtitle').first().parent('tr');
h = hd ? h - hd.getHeight(true) : h;
}
return {
height: h,
width: w
};
},
getEventHeight: function() {
if (!this.eventHeight) {
var evt = this.el.select('.ext-cal-evt').first();
this.eventHeight = evt ? evt.parent('tr').getHeight() : 18;
}
return this.eventHeight;
},
getMaxEventsPerDay: function() {
var dayHeight = this.getDaySize(true).height,
h = this.getEventHeight(),
max = Math.max(Math.floor((dayHeight - h) / h), 0);
return max;
},
getDayAt: function(x, y) {
var box = this.el.getBox(),
daySize = this.getDaySize(),
dayL = Math.floor(((x - box.x) / daySize.width)),
dayT = Math.floor(((y - box.y) / daySize.height)),
days = (dayT * 7) + dayL,
dt = Ext.calendar.util.Date.add(this.viewStart, {days: days});
return {
date: dt,
el: this.getDayEl(dt)
};
},
moveNext: function() {
return this.moveMonths(1);
},
movePrev: function() {
return this.moveMonths( - 1);
},
onInitDrag: function() {
this.callParent(arguments);
Ext.select(this.daySelector).removeCls(this.dayOverClass);
if (this.detailPanel) {
this.detailPanel.hide();
}
},
onMoreClick: function(dt) {
if (!this.detailPanel) {
this.detailPanel = Ext.create('Ext.Panel', {
id: this.id + '-details-panel',
title: Ext.Date.format(dt, 'F j'),
layout: 'fit',
floating: true,
renderTo: Ext.getBody(),
tools: [{
type: 'close',
handler: function(e, t, p) {
p.ownerCt.hide();
}
}],
items: {
xtype: 'monthdaydetailview',
id: this.id + '-details-view',
date: dt,
view: this,
store: this.store,
listeners: {
'eventsrendered': Ext.bind(this.onDetailViewUpdated, this)
}
}
});
}
else {
this.detailPanel.setTitle(Ext.Date.format(dt, 'F j'));
}
this.detailPanel.getComponent(this.id + '-details-view').update(dt);
},
onDetailViewUpdated : function(view, dt, numEvents){
var p = this.detailPanel,
dayEl = this.getDayEl(dt),
box = dayEl.getBox();
p.setWidth(Math.max(box.width, 220));
p.show();
p.getPositionEl().alignTo(dayEl, 't-t?');
},
onHide: function() {
this.callParent(arguments);
if (this.detailPanel) {
this.detailPanel.hide();
}
},
onClick: function(e, t) {
if (this.detailPanel) {
this.detailPanel.hide();
}
if (Ext.calendar.view.Month.superclass.onClick.apply(this, arguments)) {
return;
}
if (this.dropZone) {
this.dropZone.clearShims();
}
var el = e.getTarget(this.weekLinkSelector, 3),
dt,
parts;
if (el) {
dt = el.id.split(this.weekLinkIdDelimiter)[1];
this.fireEvent('weekclick', this, Ext.Date.parseDate(dt, 'Ymd'));
return;
}
el = e.getTarget(this.moreSelector, 3);
if (el) {
dt = el.id.split(this.moreElIdDelimiter)[1];
this.onMoreClick(Ext.Date.parseDate(dt, 'Ymd'));
return;
}
el = e.getTarget('td', 3);
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, Ext.Date.parseDate(dt, 'Ymd'), false, Ext.get(this.getDayId(dt)));
return;
}
}
},
handleDayMouseEvent: function(e, t, type) {
var el = e.getTarget(this.weekLinkSelector, 3, true);
if (el) {
el[type == 'over' ? 'addCls': 'removeCls'](this.weekLinkOverClass);
return;
}
this.callParent(arguments);
}
});