PDA

View Full Version : [CLOSED] CalendarPanel: background color of time slots



supera
Jun 18, 2012, 2:48 PM
Hi!

I wish paint with diferente colors the background of time slots in CalendarPanel.

For example:

00:00 to 07:00 --> gray
08:00 to 12:00 --> light blue
13:00 to 18:00 --> light red
19:00 to 23:00 --> light yellow

I wish too insert a row divisor in 12:00 and 18:00 as separator of turns

Its possible? There are any example?

Daniil
Jun 18, 2012, 2:54 PM
Hi,

Unfortunately, we have no such examples.

I think you again should deal with Calendar views templates.

supera
Jun 18, 2012, 4:40 PM
Hi Daniil!

I changed the template and insert a second CSS class in div of time row with a row index... and in css I'm formating the background color.
Works very fine!
Thanks a lot.



Ext.calendar.template.DayBody.override({
constructor: function (config) {
Ext.apply(this, config);
Ext.calendar.template.DayBody.superclass.construct or([
'<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 ext-cal-bg-row-{[xindex]}">',
'<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">{.}<span class="minutes">00</span></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'));
times.push(Ext.Date.format(dt, 'H'));
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);
}
});