The source code

    /*!
     * Ext JS Library 3.3.1
     * Copyright(c) 2006-2010 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    /**
     * @class Ext.calendar.MonthView
     * @extends Ext.calendar.CalendarView
     * Displays a calendar view by month. This class does not usually need ot be used directly as you can
     * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including
     * the month view.
     * @constructor
     * @param {Object} config The config object
     */
    Ext.calendar.MonthView = Ext.extend(Ext.calendar.CalendarView, {
        /**
         * @cfg {Boolean} showTime
         * True to display the current time in today's box in the calendar, false to not display it (defautls to true)
         */
        showTime: true,
        /**
         * @cfg {Boolean} showTodayText
         * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)
         */
        showTodayText: true,
        /**
         * @cfg {String} todayText
         * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')
         */
        todayText: 'Today',
        /**
         * @cfg {Boolean} showHeader
         * True to display a header beneath the navigation bar containing the week names above each week's column, false not to
         * show it and instead display the week names in the first row of days in the calendar (defaults to false).
         */
        showHeader: false,
        /**
         * @cfg {Boolean} showWeekLinks
         * True to display an extra column before the first day in the calendar that links to the {@link Ext.calendar.WeekView view}
         * for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week
         * number depending on the value of {@link #showWeekNumbers}.
         */
        showWeekLinks: false,
        /**
         * @cfg {Boolean} showWeekNumbers
         * True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false).
         * Note that if {@link #showWeekLinks} is false this config will have no affect even if true.
         */
        showWeekNumbers: false,
        /**
         * @cfg {String} weekLinkOverClass
         * The CSS class name applied when the mouse moves over a week link element (only applies when {@link #showWeekLinks} is true,
         * defaults to 'ext-week-link-over').
         */
        weekLinkOverClass: 'ext-week-link-over',

        //private properties -- do not override:
        daySelector: '.ext-cal-day',
        moreSelector: '.ext-cal-ev-more',
        weekLinkSelector: '.ext-cal-week-link',
        weekCount: -1,
        // defaults to auto by month
        dayCount: 7,
        moreElIdDelimiter: '-more-',
        weekLinkIdDelimiter: 'ext-cal-week-',

        // private
        initComponent: function() {
            Ext.calendar.MonthView.superclass.initComponent.call(this);
            this.addEvents({
                /**
                 * @event dayclick
                 * Fires after the user clicks within the view container and not on an event element
                 * @param {Ext.calendar.MonthView} this
                 * @param {Date} dt The date/time that was clicked on
                 * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the
                 * MonthView always return true for this param.
                 * @param {Ext.Element} el The Element that was clicked on
                 */
                dayclick: true,
                /**
                 * @event weekclick
                 * Fires after the user clicks within a week link (when {@link #showWeekLinks is true)
                 * @param {Ext.calendar.MonthView} this
                 * @param {Date} dt The start date of the week that was clicked on
                 */
                weekclick: true,
                // inherited docs
                dayover: true,
                // inherited docs
                dayout: true
            });
        },

        // private
        initDD: function() {
            var cfg = {
                view: this,
                createText: this.ddCreateEventText,
                moveText: this.ddMoveEventText,
                ddGroup: 'MonthViewDD'
            };

            this.dragZone = new Ext.calendar.DragZone(this.el, cfg);
            this.dropZone = new Ext.calendar.DropZone(this.el, cfg);
        },

        // private
        onDestroy: function() {
            Ext.destroy(this.ddSelector);
            Ext.destroy(this.dragZone);
            Ext.destroy(this.dropZone);
            Ext.calendar.MonthView.superclass.onDestroy.call(this);
        },

        // private
        afterRender: function() {
            if (!this.tpl) {
                this.tpl = new Ext.calendar.MonthViewTemplate({
                    id: this.id,
                    showTodayText: this.showTodayText,
                    todayText: this.todayText,
                    showTime: this.showTime,
                    showHeader: this.showHeader,
                    showWeekLinks: this.showWeekLinks,
                    showWeekNumbers: this.showWeekNumbers
                });
            }
            this.tpl.compile();
            this.addClass('ext-cal-monthview ext-cal-ct');

            Ext.calendar.MonthView.superclass.afterRender.call(this);
        },

        // private
        onResize: function() {
            if (this.monitorResize) {
                this.maxEventsPerDay = this.getMaxEventsPerDay();
                this.refresh();
            }
        },

        // private
        forceSize: function() {
            // Compensate for the week link gutter width if visible
            if (this.showWeekLinks && this.el && this.el.child) {
                var hd = this.el.select('.ext-cal-hd-days-tbl'),
                bgTbl = this.el.select('.ext-cal-bg-tbl'),
                evTbl = this.el.select('.ext-cal-evt-tbl'),
                wkLinkW = this.el.child('.ext-cal-week-link').getWidth(),
                w = this.el.getWidth() - wkLinkW;

                hd.setWidth(w);
                bgTbl.setWidth(w);
                evTbl.setWidth(w);
            }
            Ext.calendar.MonthView.superclass.forceSize.call(this);
        },

        //private
        initClock: function() {
            if (Ext.fly(this.id + '-clock') !== null) {
                this.prevClockDay = new Date().getDay();
                if (this.clockTask) {
                    Ext.TaskMgr.stop(this.clockTask);
                }
                this.clockTask = Ext.TaskMgr.start({
                    run: function() {
                        var el = Ext.fly(this.id + '-clock'),
                        t = new Date();

                        if (t.getDay() == this.prevClockDay) {
                            if (el) {
                                el.update(t.format('g:i a'));
                            }
                        }
                        else {
                            this.prevClockDay = t.getDay();
                            this.moveTo(t);
                        }
                    },
                    scope: this,
                    interval: 1000
                });
            }
        },

        // inherited docs
        getEventBodyMarkup: function() {
            if (!this.eventBodyMarkup) {
                this.eventBodyMarkup = ['{Title}',
                '',
                ' ',
                '',
                '',
                ' ',
                '',
                '',
                ' ',
                '',
                '',
                ' ',
                ''
                ].join('');
            }
            return this.eventBodyMarkup;
        },

        // inherited docs
        getEventTemplate: function() {
            if (!this.eventTpl) {
                var tpl,
                body = this.getEventBodyMarkup();

                tpl = !(Ext.isIE || Ext.isOpera) ?
                new Ext.XTemplate(
                '',
                body,
                ''
                )
                : new Ext.XTemplate(
                '',
                '',
                '',
                '',
                '',
                '',
                '',
                '',
                body,
                '',
                '',
                '',
                '',
                ''
                );
                tpl.compile();
                this.eventTpl = tpl;
            }
            return this.eventTpl;
        },

        // private
        getTemplateEventData: function(evt) {
            var M = Ext.calendar.EventMappings,
            selector = this.getEventSelectorCls(evt[M.EventId.name]),
            title = evt[M.Title.name];

            return Ext.applyIf({
                _selectorCls: selector,
                _colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?
                evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),
                _elId: selector + '-' + evt._weekIndex,
                _isRecurring: evt.Recurrence && evt.Recurrence != '',
                _isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',
                Title: (evt[M.IsAllDay.name] ? '': evt[M.StartDate.name].format('g:ia ')) + (!title || title.length == 0 ? '(No title)': title)
            },
            evt);
        },

        // private
        refresh: function() {
            if (this.detailPanel) {
                this.detailPanel.hide();
            }
            Ext.calendar.MonthView.superclass.refresh.call(this);

            if (this.showTime !== false) {
                this.initClock();
            }
        },

        // private
        renderItems: function() {
            Ext.calendar.WeekEventRenderer.render({
                eventGrid: this.allDayOnly ? this.allDayGrid: this.eventGrid,
                viewStart: this.viewStart,
                tpl: this.getEventTemplate(),
                maxEventsPerDay: this.maxEventsPerDay,
                id: this.id,
                templateDataFn: this.getTemplateEventData.createDelegate(this),
                evtMaxCount: this.evtMaxCount,
                weekCount: this.weekCount,
                dayCount: this.dayCount
            });
            this.fireEvent('eventsrendered', this);
        },

        // private
        getDayEl: function(dt) {
            return Ext.get(this.getDayId(dt));
        },

        // private
        getDayId: function(dt) {
            if (Ext.isDate(dt)) {
                dt = dt.format('Ymd');
            }
            return this.id + this.dayElIdDelimiter + dt;
        },

        // private
        getWeekIndex: function(dt) {
            var el = this.getDayEl(dt).up('.ext-cal-wk-ct');
            return parseInt(el.id.split('-wk-')[1], 10);
        },

        // private
        getDaySize: function(contentOnly) {
            var box = this.el.getBox(),
            w = box.width / this.dayCount,
            h = box.height / this.getWeekCount();

            if (contentOnly) {
                var hd = this.el.select('.ext-cal-dtitle').first().parent('tr');
                h = hd ? h - hd.getHeight(true) : h;
            }
            return {
                height: h,
                width: w
            };
        },

        // private
        getEventHeight: function() {
            if (!this.eventHeight) {
                var evt = this.el.select('.ext-cal-evt').first();
                this.eventHeight = evt ? evt.parent('tr').getHeight() : 18;
            }
            return this.eventHeight;
        },

        // private
        getMaxEventsPerDay: function() {
            var dayHeight = this.getDaySize(true).height,
                h = this.getEventHeight(),
                max = Math.max(Math.floor((dayHeight - h) / h), 0);

            return max;
        },

        // private
        getDayAt: function(x, y) {
            var box = this.el.getBox(),
                daySize = this.getDaySize(),
                dayL = Math.floor(((x - box.x) / daySize.width)),
                dayT = Math.floor(((y - box.y) / daySize.height)),
                days = (dayT * 7) + dayL,
                dt = this.viewStart.add(Date.DAY, days);
            return {
                date: dt,
                el: this.getDayEl(dt)
            };
        },

        // inherited docs
        moveNext: function() {
            return this.moveMonths(1);
        },

        // inherited docs
        movePrev: function() {
            return this.moveMonths( - 1);
        },

        // private
        onInitDrag: function() {
            Ext.calendar.MonthView.superclass.onInitDrag.call(this);
            Ext.select(this.daySelector).removeClass(this.dayOverClass);
            if (this.detailPanel) {
                this.detailPanel.hide();
            }
        },

        // private
        onMoreClick: function(dt) {
            if (!this.detailPanel) {
                this.detailPanel = new Ext.Panel({
                    id: this.id + '-details-panel',
                    title: dt.format('F j'),
                    layout: 'fit',
                    floating: true,
                    renderTo: Ext.getBody(),
                    tools: [{
                        id: 'close',
                        handler: function(e, t, p) {
                            p.hide();
                        }
                    }],
                    items: {
                        xtype: 'monthdaydetailview',
                        id: this.id + '-details-view',
                        date: dt,
                        view: this,
                        store: this.store,
                        listeners: {
                            'eventsrendered': this.onDetailViewUpdated.createDelegate(this)
                        }
                    }
                });
            }
            else {
                this.detailPanel.setTitle(dt.format('F j'));
            }
            this.detailPanel.getComponent(this.id + '-details-view').update(dt);
        },

        // private
        onDetailViewUpdated: function(view, dt, numEvents) {
            var p = this.detailPanel,
            frameH = p.getFrameHeight(),
            evtH = this.getEventHeight(),
            bodyH = frameH + (numEvents * evtH) + 3,
            dayEl = this.getDayEl(dt),
            box = dayEl.getBox();

            p.updateBox(box);
            p.setHeight(bodyH);
            p.setWidth(Math.max(box.width, 220));
            p.show();
            p.getPositionEl().alignTo(dayEl, 't-t?');
        },

        // private
        onHide: function() {
            Ext.calendar.MonthView.superclass.onHide.call(this);
            if (this.detailPanel) {
                this.detailPanel.hide();
            }
        },

        // private
        onClick: function(e, t) {
            if (this.detailPanel) {
                this.detailPanel.hide();
            }
            if (Ext.calendar.MonthView.superclass.onClick.apply(this, arguments)) {
                // The superclass handled the click already so exit
                return;
            }
            if (this.dropZone) {
                this.dropZone.clearShims();
            }
            var el = e.getTarget(this.weekLinkSelector, 3),
                dt,
                parts;
            if (el) {
                dt = el.id.split(this.weekLinkIdDelimiter)[1];
                this.fireEvent('weekclick', this, Date.parseDate(dt, 'Ymd'));
                return;
            }
            el = e.getTarget(this.moreSelector, 3);
            if (el) {
                dt = el.id.split(this.moreElIdDelimiter)[1];
                this.onMoreClick(Date.parseDate(dt, 'Ymd'));
                return;
            }
            el = e.getTarget('td', 3);
            if (el) {
                if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {
                    parts = el.id.split(this.dayElIdDelimiter);
                    dt = parts[parts.length - 1];

                    this.fireEvent('dayclick', this, Date.parseDate(dt, 'Ymd'), false, Ext.get(this.getDayId(dt)));
                    return;
                }
            }
        },

        // private
        handleDayMouseEvent: function(e, t, type) {
            var el = e.getTarget(this.weekLinkSelector, 3, true);
            if (el) {
                el[type == 'over' ? 'addClass': 'removeClass'](this.weekLinkOverClass);
                return;
            }
            Ext.calendar.MonthView.superclass.handleDayMouseEvent.apply(this, arguments);
        }
    });

    Ext.reg('monthview', Ext.calendar.MonthView);