[1.1] How to remove month names in calendar panel

  1. #1

    [1.1] How to remove month names in calendar panel

    Hi,

    Is there a way to remove the labels that appear at the beginning of each month on calendar panel's monthview?

    I am attaching an image with the labels marked with a red circle.

    Thanks in advanced
    Attached Thumbnails Click image for larger version. 

Name:	Calendar.jpg 
Views:	248 
Size:	38.9 KB 
ID:	3814  
  2. #2
    No one? :P
  3. #3
    Well, I guess no one has a simple solution so I tried to override some templates to see if I can do it.

    Can you help me to see why this code doesn't do what I need?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="TPCompras.WebForm2" %>
    <%@ 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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
     
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            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
                    });
                }
    
    
            });
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
                <Items>
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                        <EventStore ID="EventStore1" runat="server" />
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Regards
  4. #4
    Hi,

    You are on the right direction.

    The problem is the fact that the old applyTemplate function is still used, because there is:
    Ext.calendar.BoxLayoutTemplate.prototype.apply = Ext.calendar.BoxLayoutTemplate.prototype.applyTemplate;
    So, add it after your overrode.

    Example
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.calendar.BoxLayoutTemplate.override({
            applyTemplate : function (o) {
                //your override
            }
        });
    
        Ext.calendar.BoxLayoutTemplate.prototype.apply = Ext.calendar.BoxLayoutTemplate.prototype.applyTemplate;
    </script>
    You might be also interested in this thread.
    http://forums.ext.net/showthread.php?16853
    Last edited by Daniil; Feb 09, 2012 at 8:51 AM.
  5. #5
    Great!. Thank you very much Daniil, I knew I was missing something. Now is working correctly.

    Regards

Similar Threads

  1. Replies: 5
    Last Post: Jul 12, 2016, 2:28 AM
  2. [CLOSED] Cropped Calendar month details panel
    By ppqrnd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 5:37 AM
  3. [CLOSED] How to remove items from calendar
    By egvt in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 08, 2012, 2:56 PM
  4. Replies: 1
    Last Post: Jul 07, 2011, 8:34 PM
  5. [CLOSED] calendar month view
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: May 02, 2011, 3:42 PM

Tags for this Thread

Posting Permissions