[CLOSED] ext:CalendarPanel: How to customize the 2.x version of CalendarPanel week numbers

  1. #1

    [CLOSED] ext:CalendarPanel: How to customize the 2.x version of CalendarPanel week numbers

    Hi

    In version 1.x,
    can override Ext.calendar.BoxLayoutTemplate achieve the purpose.
    How to do in version 2.x.

    Any advice? TIA.
    Last edited by Daniil; Mar 19, 2013 at 5:16 AM. Reason: [CLOSED]
  2. #2
    Hi @capbarbell,

    Welcome to the Ext.NET forums.

    I am not sure what "week numbers" you are talking about. Could you clarify?

    Also posting a solution (maybe, just a link) for v1 will be good.
  3. #3
    Hi Daniil,

    I want to change the week number of the calendar(please refer to image attachment). And the 1.x code for this purpose is as follows.

    Please take a look and be advised. TIA

            Ext.calendar.BoxLayoutTemplate.override({
                applyTemplate: function (o) {
                    Ext.apply(this, o);
                    var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
    weeks = [[]],
    today = new Date().clearTime(),
    dt = this.viewStart.clone(),
    thisMonth = this.startDate.getMonth();
                    for (; w < this.weekCount || this.weekCount == -1; w++) {
                        if (dt > this.viewEnd) {
                            break;
                        }
                        weeks[w] = [];
                        for (var d = 0; d < this.dayCount; d++) {
                            isToday = Ext.calendar.Date.equalDates(dt, today);
                            showMonth = first || (dt.getDate() == 1);
                            prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
                            nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
                            if (dt.getDay() == 1) {
                                // The ISO week format 'W' is relative to a Monday week start. If we
                                // make this check on Sunday the week number will be off.
                                weeks[w].weekNum = this.showWeekNumbers ? dt.format('W') : '&nbsp;';
                                weeks[w].weekLinkId = 'ext-cal-week-' + dt.format('Ymd');
                            }
                            if (showMonth) {
                                if (isToday) {
                                    title = this.getTodayText();
                                }
                                else {
                                    //title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
                                    title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'j' : 'j'));
                                }
                            }
                            else {
                                var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
                                title = isToday ? this.getTodayText() : dt.format(dayFmt);
                            }
                            weeks[w].push({
                                title: title,
                                date: dt.clone(),
                                titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
    (w == 0 ? ' ext-cal-dtitle-first' : '') +
    (prevMonth ? ' ext-cal-dtitle-prev' : '') +
    (nextMonth ? ' ext-cal-dtitle-next' : ''),
                                cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
    (d == 0 ? ' ext-cal-day-first' : '') +
    (prevMonth ? ' ext-cal-day-prev' : '') +
    (nextMonth ? ' ext-cal-day-next' : '')
                            });
                            dt.setHours(1);
                            dt = dt.add(Date.HOUR, 26);
                            first = false;
                        }
                    }
                    return Ext.calendar.BoxLayoutTemplate.superclass.applyTemplate.call(this, {
                        weeks: weeks
                    });
                }
            });
    Click image for larger version. 

Name:	calendar.GIF 
Views:	51 
Size:	93.4 KB 
ID:	5839
    Last edited by capbarbell; Mar 18, 2013 at 4:17 AM.
  4. #4
    Thank you.

    Here is a solution.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.calendar.template.DayBody.override({
                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
                        });
                    }
    
                    dt = Ext.Date.clearTime(new Date('5/26/1972'));
    
                    for (i = 0; i < 24; i++) {
                        times.push(Ext.Date.format(dt, 'G')); // was 'ga'
                        dt = Ext.calendar.util.Date.add(dt, {
                            hours: 1
                        });
                    }
    
                    return this.applyOut({
                        days: days,
                        dayCount: days.length,
                        times: times
                    }, []).join('');
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server" ActiveIndex="1">
                        <EventStore runat="server" />
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 18, 2013 at 7:42 AM.
  5. #5
    I misunderstood the requirement.

    Well, in Ext.NET v2 you aslo need to override the BoxLayout's constructor or/and applyTemplate accordingly actual formatting that you need.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.calendar.template.BoxLayout.override({
                constructor: function(config){
                    Ext.apply(this, config);
    
                    var weekLinkTpl = this.showWeekLinks ? '<div id="{weekLinkId}" class="ext-cal-week-link">{weekNum}</div>' : '';
                    
                    this.callParent([
                        '<tpl for="weeks">',
                            '<div id="{[this.id]}-wk-{[xindex-1]}" class="ext-cal-wk-ct" style="top:{[this.getRowTop(xindex, xcount)]}%; height:{[this.getRowHeight(xcount)]}%;">',
                                weekLinkTpl,
                                '<table class="ext-cal-bg-tbl" cellpadding="0" cellspacing="0">',
                                    '<tbody>',
                                        '<tr>',
                                            '<tpl for=".">',
                                                 '<td id="{[this.id]}-day-{date:date("Ymd")}" class="{cellCls}">&#160;</td>',
                                            '</tpl>',
                                        '</tr>',
                                    '</tbody>',
                                '</table>',
                                '<table class="ext-cal-evt-tbl" cellpadding="0" cellspacing="0">',
                                    '<tbody>',
                                        '<tr>',
                                            '<tpl for=".">',
                                                '<td id="{[this.id]}-ev-day-{date:date("Ymd")}" class="{titleCls}"><div>{title}</div></td>',
                                            '</tpl>',
                                        '</tr>',
                                    '</tbody>',
                                '</table>',
                            '</div>',
                        '</tpl>', 
                        {
                            getRowTop: function(i, ln){
                                return ((i-1)*(100/ln));
                            },
                            getRowHeight: function(ln){
                                return 100/ln;
                            }
                        }
                    ]);
                },
    
                applyTemplate : function(o){
                    Ext.apply(this, o);
            
                    var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
                        weeks = [[]],
                        today = Ext.calendar.util.Date.today(),
                        dt = Ext.Date.clone(this.viewStart),
                        thisMonth = this.startDate.getMonth();
            
                    for(; w < this.weekCount || this.weekCount == -1; w++){
                        if(dt > this.viewEnd){
                            break;
                        }
                        weeks[w] = [];
                
                        for(var d = 0; d < this.dayCount; d++){                
                            isToday = Ext.calendar.util.Date.equalDates(dt, today);
                            showMonth = first || (dt.getDate() == 1);
                            prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
                            nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
                    
                            if(dt.getDay() == 1){
                                // The ISO week format 'W' is relative to a Monday week start. If we
                                // make this check on Sunday the week number will be off.
                                weeks[w].weekNum = this.showWeekNumbers ? Ext.Date.format(dt, 'W') : '&#160;';
                                weeks[w].weekLinkId = 'ext-cal-week-'+Ext.Date.format(dt, 'Ymd');
                            }
                    
                            if(showMonth){
                                if(isToday){
                                    title = this.getTodayText();
                                }
                                else{
                                    title = Ext.Date.format(dt, this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
                                }
                            }
                            else{
                                var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
                                title = isToday ? this.getTodayText() : Ext.Date.format(dt, dayFmt);
                            }
                    
                            weeks[w].push({
                                title: title,
                                date: Ext.Date.clone(dt),
                                titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') + 
                                    (w==0 ? ' ext-cal-dtitle-first' : '') +
                                    (prevMonth ? ' ext-cal-dtitle-prev' : '') + 
                                    (nextMonth ? ' ext-cal-dtitle-next' : ''),
                                cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') + 
                                    (d==0 ? ' ext-cal-day-first' : '') +
                                    (prevMonth ? ' ext-cal-day-prev' : '') +
                                    (nextMonth ? ' ext-cal-day-next' : '')
                            });                
                            dt.setHours(1);
                            dt = Ext.calendar.util.Date.add(dt, {hours: 26});
                            first = false;
                        }
                    }
            
                    return this.applyOut({
                        weeks: weeks
                    }, []).join('');
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                        <EventStore runat="server" />
                        <MonthView runat="server" ShowWeekLinks="true" ShowWeekNumbers="true" />
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    Hi Daniil,

    Thanks very much.
    I have solved my problem.

Similar Threads

  1. CalendarPanel version 2. the ext
    By ruben in forum 2.x Help
    Replies: 4
    Last Post: Apr 19, 2013, 5:35 AM
  2. How to customize CalendarPanel EventWindow?
    By ozlem in forum 2.x Help
    Replies: 10
    Last Post: Mar 04, 2013, 7:44 AM
  3. [CLOSED] CalendarPanel - First day of the week
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 11, 2012, 5:51 PM
  4. How to Customize Time in CalendarPanel
    By dotnet in forum 1.x Help
    Replies: 0
    Last Post: Mar 17, 2011, 5:34 PM
  5. Will version 0.6pre be available this week?
    By breakthen in forum Open Discussions
    Replies: 0
    Last Post: Sep 17, 2008, 7:03 AM

Tags for this Thread

Posting Permissions