[CLOSED] CalendarPanel: background color of time slots

[supera]

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]

Hi,

Unfortunately, we have no such examples.

I think you again should deal with Calendar views templates.

[supera]

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.constructor([
                    '<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);
        }
    });