May 21, 2012, 8:14 PM
[CLOSED] CalendarPanel: override DayBody template
Hi!
I wish override dayBody template, for day view, in CalendarPanel
I wish separate the 'hour' and 'time' of slot with a 'div'! But I can not do this.
I wish override dayBody template, for day view, in CalendarPanel
I wish separate the 'hour' and 'time' of slot with a 'div'! But I can not do this.
"<div class="ext-cal-day-time-inner-Hour">{.:date("H")}</div><div class="ext-cal-day-time-inner-Time">{.:date("i")}</div>
I'm trying this:Ext.calendar.template.DayBody.override({
constructor: function(config){
Ext.apply(this, config);
this.callParent([
'<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 class="ext-cal-day-time-inner-Hour">{.:date("H")}</div><div class="ext-cal-day-time-inner-Time">{.:date("i")}</div></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>'
]);
},
applyTemplate: function (o) {
this.today = Ext.calendar.util.Date.today();
this.dayCount = this.dayCount || 1;
var i = 0,
days = [],
dt = Ext.Date.clone(o.viewStart),
times = [];
for (; i < this.dayCount; i++) {
days[i] = Ext.calendar.util.Date.add(dt, { days: i });
}
// use a fixed DST-safe date so times don't get skipped on DST boundaries
dt = Ext.Date.clearTime(new Date('5/26/1972'));
for (i = 0; i < 24; i++) {
//times.push(Ext.Date.format(dt, 'ga'));
times.push(Ext.Date.format(dt, 'H:i'));
dt = Ext.calendar.util.Date.add(dt, { hours: 1 });
}
return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
},
apply: function(values) {
return this.applyTemplate.apply(this, arguments);
}
});
Last edited by Daniil; May 22, 2012 at 5:39 PM.
Reason: [CLOSED]