[CLOSED] CalendarPanel: override DayBody template

[supera]

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.

"<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);
        }
    });

[Daniil]

Hi,

I've not got what you are trying to achieve. Could you clarify the requirement with a draft?

[supera]

Hi Daniil!

I want format the calendarPanel as Outlook Calendar...

1 - Hour font size major time font size.
2 - The hour line divisor more detached of time line divisor.

[Daniil]

Be careful with the override and callParent methods.

The callParent method calls the "previous" constructor that you override, not the parent one of the initial class.

Please see the example how to achieve your requirements.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <style type="text/css">
        .minutes {
            padding-left: 3px;
            position: relative;
            top: -7px;
        }
        
        .ext-cal-bg-row {
            text-align: center;
        }
        
        .ext-cal-day-time-inner {
            padding-top: 15px;
            font-size: 15px;
        }
        
        <%--The hour line divisor more detached of time line divisor.--%>
        .ext-cal-dayview .ext-cal-bg-row-div {
            border-top: 2px solid gray;
        }
    </style>

    <script type="text/javascript">
        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">',
                                                    '<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>'
                ]);
            },

            // private
            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, 'H'));
                    dt = Ext.calendar.util.Date.add(dt, {hours: 1});
                }
        
                return this.applyOut({
                    days: days,
                    dayCount: days.length,
                    times: times
                }, []).join('');
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
        
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:CalendarPanel runat="server" ActiveIndex="0">
                <EventStore runat="server" />
            </ext:CalendarPanel>
        </Items>
    </ext:Viewport>
</body>
</html>

[supera]

Hi Daniil!

Works very fine!

Thanks a lot for the code and the warning!