[CLOSED] CalendarPanel: background color of time slots

  1. #1

    [CLOSED] CalendarPanel: background color of time slots

    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?
    Last edited by Daniil; Jun 18, 2012 at 5:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Unfortunately, we have no such examples.

    I think you again should deal with Calendar views templates.
  3. #3
    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);
            }
        });

Similar Threads

  1. Replies: 2
    Last Post: Mar 28, 2012, 1:39 PM
  2. [CLOSED] CalendarPanel: Is it possible to set the height for the time row?
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 28, 2011, 1:34 PM
  3. Replies: 3
    Last Post: Apr 27, 2011, 3:54 PM
  4. Replies: 4
    Last Post: Apr 25, 2011, 8:35 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Posting Permissions