add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / calendar / src / view / Month.js

/**\r
 * @class Ext.calendar.view.Month\r
 * @extends Ext.calendar.CalendarView\r
 * <p>Displays a calendar view by month. This class does not usually need ot be used directly as you can\r
 * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including\r
 * the month view.</p>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.view.Month', {\r
    extend: 'Ext.calendar.view.AbstractCalendar',\r
    alias: 'widget.monthview',\r
    \r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.calendar.template.Month',\r
        'Ext.calendar.util.WeekEventRenderer',\r
        'Ext.calendar.view.MonthDayDetail'\r
    ],\r
    \r
    /**\r
     * @cfg {Boolean} showTime\r
     * True to display the current time in today's box in the calendar, false to not display it (defautls to true)\r
     */\r
    showTime: true,\r
    /**\r
     * @cfg {Boolean} showTodayText\r
     * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)\r
     */\r
    showTodayText: true,\r
    /**\r
     * @cfg {String} todayText\r
     * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')\r
     */\r
    todayText: 'Today',\r
    /**\r
     * @cfg {Boolean} showHeader\r
     * True to display a header beneath the navigation bar containing the week names above each week's column, false not to \r
     * show it and instead display the week names in the first row of days in the calendar (defaults to false).\r
     */\r
    showHeader: false,\r
    /**\r
     * @cfg {Boolean} showWeekLinks\r
     * True to display an extra column before the first day in the calendar that links to the {@link Ext.calendar.WeekView view}\r
     * for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week \r
     * number depending on the value of {@link #showWeekNumbers}.\r
     */\r
    showWeekLinks: false,\r
    /**\r
     * @cfg {Boolean} showWeekNumbers\r
     * True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false).\r
     * Note that if {@link #showWeekLinks} is false this config will have no affect even if true.\r
     */\r
    showWeekNumbers: false,\r
    /**\r
     * @cfg {String} weekLinkOverClass\r
     * The CSS class name applied when the mouse moves over a week link element (only applies when {@link #showWeekLinks} is true,\r
     * defaults to 'ext-week-link-over').\r
     */\r
    weekLinkOverClass: 'ext-week-link-over',\r
\r
    //private properties -- do not override:\r
    daySelector: '.ext-cal-day',\r
    moreSelector: '.ext-cal-ev-more',\r
    weekLinkSelector: '.ext-cal-week-link',\r
    weekCount: -1,\r
    // defaults to auto by month\r
    dayCount: 7,\r
    moreElIdDelimiter: '-more-',\r
    weekLinkIdDelimiter: 'ext-cal-week-',\r
\r
    // See EXTJSIV-11407.\r
    operaLT11: Ext.isOpera && (parseInt(Ext.operaVersion) < 11),\r
\r
    /**\r
     * @event dayclick\r
     * Fires after the user clicks within the view container and not on an event element\r
     * @param {Ext.calendar.view.Month} this\r
     * @param {Date} dt The date/time that was clicked on\r
     * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the \r
     * MonthView always return true for this param.\r
     * @param {Ext.core.Element} el The Element that was clicked on\r
     */\r
\r
    /**\r
     * @event weekclick\r
     * Fires after the user clicks within a week link (when {@link #showWeekLinks is true)\r
     * @param {Ext.calendar.view.Month} this\r
     * @param {Date} dt The start date of the week that was clicked on\r
     */\r
\r
    // inherited docs\r
    //dayover: true,\r
    // inherited docs\r
    //dayout: true\r
\r
    // private\r
    initDD: function() {\r
        var cfg = {\r
            view: this,\r
            createText: this.ddCreateEventText,\r
            moveText: this.ddMoveEventText,\r
            ddGroup: 'MonthViewDD'\r
        };\r
\r
        this.dragZone = new Ext.calendar.dd.DragZone(this.el, cfg);\r
        this.dropZone = new Ext.calendar.dd.DropZone(this.el, cfg);\r
    },\r
\r
    // private\r
    onDestroy: function() {\r
        Ext.destroy(this.ddSelector);\r
        Ext.destroy(this.dragZone);\r
        Ext.destroy(this.dropZone);\r
        \r
        this.callParent(arguments);\r
    },\r
\r
    // private\r
    afterRender: function() {\r
        if (!this.tpl) {\r
            this.tpl = new Ext.calendar.template.Month({\r
                id: this.id,\r
                showTodayText: this.showTodayText,\r
                todayText: this.todayText,\r
                showTime: this.showTime,\r
                showHeader: this.showHeader,\r
                showWeekLinks: this.showWeekLinks,\r
                showWeekNumbers: this.showWeekNumbers\r
            });\r
        }\r
        this.tpl.compile();\r
        this.addCls('ext-cal-monthview ext-cal-ct');\r
\r
        this.callParent(arguments);\r
    },\r
\r
    // private\r
    onResize: function() {\r
        var me = this;\r
        me.callParent(arguments);\r
        me.maxEventsPerDay = me.getMaxEventsPerDay();\r
        if (me.monitorResize) {\r
            me.refresh();\r
        }\r
    },\r
\r
    // private\r
    forceSize: function() {\r
        // Compensate for the week link gutter width if visible\r
        if(this.showWeekLinks && this.el){\r
            var hd = this.el.down('.ext-cal-hd-days-tbl'),\r
                bgTbl = this.el.select('.ext-cal-bg-tbl'),\r
                evTbl = this.el.select('.ext-cal-evt-tbl'),\r
                wkLinkW = this.el.down('.ext-cal-week-link').getWidth(),\r
                w = this.el.getWidth()-wkLinkW;\r
            \r
            hd.setWidth(w);\r
            bgTbl.setWidth(w);\r
            evTbl.setWidth(w);\r
        }\r
        this.callParent(arguments);\r
    },\r
\r
    //private\r
    initClock: function() {\r
        if (Ext.fly(this.id + '-clock') !== null) {\r
            this.prevClockDay = new Date().getDay();\r
            if (this.clockTask) {\r
                Ext.TaskManager.stop(this.clockTask);\r
            }\r
            this.clockTask = Ext.TaskManager.start({\r
                run: function() {\r
                    var el = Ext.fly(this.id + '-clock'),\r
                    t = new Date();\r
\r
                    if (t.getDay() == this.prevClockDay) {\r
                        if (el) {\r
                            el.update(Ext.Date.format(t, 'g:i a'));\r
                        }\r
                    }\r
                    else {\r
                        this.prevClockDay = t.getDay();\r
                        this.moveTo(t);\r
                    }\r
                },\r
                scope: this,\r
                interval: 1000\r
            });\r
        }\r
    },\r
\r
    // inherited docs\r
    getEventBodyMarkup: function() {\r
        if (!this.eventBodyMarkup) {\r
            this.eventBodyMarkup = ['{Title}',\r
            '<tpl if="_isReminder">',\r
                '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',\r
            '</tpl>',\r
            '<tpl if="_isRecurring">',\r
                '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',\r
            '</tpl>',\r
            '<tpl if="spanLeft">',\r
                '<i class="ext-cal-spl">&#160;</i>',\r
            '</tpl>',\r
            '<tpl if="spanRight">',\r
                '<i class="ext-cal-spr">&#160;</i>',\r
            '</tpl>'\r
            ].join('');\r
        }\r
        return this.eventBodyMarkup;\r
    },\r
\r
    // inherited docs\r
    getEventTemplate: function() {\r
        if (!this.eventTpl) {\r
            var tpl,\r
            body = this.getEventBodyMarkup();\r
\r
            tpl = !(Ext.isIE7m || this.operaLT11) ?\r
            new Ext.XTemplate(\r
                '<div id="{_elId}" class="{_selectorCls} {_colorCls} {spanCls} ext-cal-evt ext-cal-evr">',\r
                    body,\r
                '</div>'\r
            )\r
            : new Ext.XTemplate(\r
                '<tpl if="_renderAsAllDay">',\r
                    '<div id="{_elId}" class="{_selectorCls} {spanCls} {_colorCls} {_operaLT11} ext-cal-evo">',\r
                        '<div class="ext-cal-evm">',\r
                            '<div class="ext-cal-evi">',\r
                '</tpl>',\r
                '<tpl if="!_renderAsAllDay">',\r
                    '<div id="{_elId}" class="{_selectorCls} {_colorCls} {_operaLT11} ext-cal-evt ext-cal-evr">',\r
                '</tpl>',\r
                    body,\r
                '<tpl if="_renderAsAllDay">',\r
                            '</div>',\r
                        '</div>',\r
                '</tpl>',\r
                    '</div>'\r
            );\r
            tpl.compile();\r
            this.eventTpl = tpl;\r
        }\r
        return this.eventTpl;\r
    },\r
\r
    // private\r
    getTemplateEventData: function(evt) {\r
        var M = Ext.calendar.data.EventMappings,\r
        selector = this.getEventSelectorCls(evt[M.EventId.name]),\r
        title = evt[M.Title.name];\r
\r
        return Ext.applyIf({\r
            _selectorCls: selector,\r
            _colorCls: 'ext-color-' + (evt[M.CalendarId.name] ?\r
            evt[M.CalendarId.name] : 'default') + (evt._renderAsAllDay ? '-ad': ''),\r
            _elId: selector + '-' + evt._weekIndex,\r
            _isRecurring: evt.Recurrence && evt.Recurrence != '',\r
            _isReminder: evt[M.Reminder.name] && evt[M.Reminder.name] != '',\r
            Title: (evt[M.IsAllDay.name] ? '' : Ext.Date.format(evt[M.StartDate.name], 'g:ia ')) + (!title || title.length == 0 ? '(No title)' : title),\r
            _operaLT11: this.operaLT11 ? 'ext-operaLT11' : ''\r
        },\r
        evt);\r
    },\r
\r
    // private\r
    refresh: function() {\r
        if (this.detailPanel) {\r
            this.detailPanel.hide();\r
        }\r
        this.callParent(arguments);\r
\r
        if (this.showTime !== false) {\r
            this.initClock();\r
        }\r
    },\r
\r
    // private\r
    renderItems: function() {\r
        Ext.calendar.util.WeekEventRenderer.render({\r
            eventGrid: this.allDayOnly ? this.allDayGrid: this.eventGrid,\r
            viewStart: this.viewStart,\r
            tpl: this.getEventTemplate(),\r
            maxEventsPerDay: this.getMaxEventsPerDay(),\r
            id: this.id,\r
            templateDataFn: Ext.bind(this.getTemplateEventData, this),\r
            evtMaxCount: this.evtMaxCount,\r
            weekCount: this.weekCount,\r
            dayCount: this.dayCount\r
        });\r
        this.fireEvent('eventsrendered', this);\r
    },\r
\r
    // private\r
    getDayEl: function(dt) {\r
        return Ext.get(this.getDayId(dt));\r
    },\r
\r
    // private\r
    getDayId: function(dt) {\r
        if (Ext.isDate(dt)) {\r
            dt = Ext.Date.format(dt, 'Ymd');\r
        }\r
        return this.id + this.dayElIdDelimiter + dt;\r
    },\r
\r
    // private\r
    getWeekIndex: function(dt) {\r
        var el = this.getDayEl(dt).up('.ext-cal-wk-ct');\r
        return parseInt(el.id.split('-wk-')[1], 10);\r
    },\r
\r
    // private\r
    getDaySize : function(contentOnly){\r
        var box = this.el.getBox(),\r
            padding = this.getViewPadding(),\r
            w = (box.width - padding.width) / this.dayCount,\r
            h = (box.height - padding.height) / this.getWeekCount();\r
            \r
        if(contentOnly){\r
            // measure last row instead of first in case text wraps in first row\r
            var hd = this.el.select('.ext-cal-dtitle').last().parent('tr');\r
            h = hd ? h-hd.getHeight(true) : h;\r
        }\r
        return {height: h, width: w};\r
    },\r
    \r
    // private\r
    getEventHeight : function() {\r
        if (!this.eventHeight) {\r
            var evt = this.el.select('.ext-cal-evt').first();\r
            if(evt){\r
                this.eventHeight = evt.parent('td').getHeight();\r
            }\r
            else {\r
                return 16; // no events rendered, so try setting this.eventHeight again later\r
            }\r
        }\r
        return this.eventHeight;\r
    },\r
    \r
    // private\r
    getMaxEventsPerDay : function(){\r
        var dayHeight = this.getDaySize(true).height,\r
            eventHeight = this.getEventHeight(),\r
            max = Math.max(Math.floor((dayHeight - eventHeight) / eventHeight), 0);\r
        \r
        return max;\r
    },\r
    \r
    // private\r
    getViewPadding: function(sides) {\r
        var sides = sides || 'tlbr',\r
            top = sides.indexOf('t') > -1,\r
            left = sides.indexOf('l') > -1,\r
            right = sides.indexOf('r') > -1,\r
            height = this.showHeader && top ? this.el.select('.ext-cal-hd-days-tbl').first().getHeight() : 0,\r
            width = 0;\r
        \r
        if (this.isHeaderView) {\r
            if (left) {\r
                width = this.el.select('.ext-cal-gutter').first().getWidth();\r
            }\r
            if (right) {\r
                width += this.el.select('.ext-cal-gutter-rt').first().getWidth();\r
            }\r
        }\r
        else if (this.showWeekLinks && left) {\r
            width = this.el.select('.ext-cal-week-link').first().getWidth();\r
        }\r
        \r
        return {\r
            height: height,\r
            width: width\r
        }\r
    },\r
\r
    // private\r
    getDayAt: function(x, y) {\r
        var box = this.el.getBox(),\r
            daySize = this.getDaySize(),\r
            dayL = Math.floor(((x - box.x) / daySize.width)),\r
            dayT = Math.floor(((y - box.y) / daySize.height)),\r
            days = (dayT * 7) + dayL,\r
            dt = Ext.calendar.util.Date.add(this.viewStart, {days: days});\r
        return {\r
            date: dt,\r
            el: this.getDayEl(dt)\r
        };\r
    },\r
\r
    // inherited docs\r
    moveNext: function() {\r
        return this.moveMonths(1);\r
    },\r
\r
    // inherited docs\r
    movePrev: function() {\r
        return this.moveMonths( - 1);\r
    },\r
\r
    // private\r
    onInitDrag: function() {\r
        this.callParent(arguments);\r
        \r
        if (this.dayOverClass) {\r
            Ext.select(this.daySelector).removeCls(this.dayOverClass);\r
        }\r
        if (this.detailPanel) {\r
            this.detailPanel.hide();\r
        }\r
    },\r
\r
    // private\r
    onMoreClick: function(dt) {\r
        if (!this.detailPanel) {\r
            this.detailPanel = Ext.create('Ext.Panel', {\r
                id: this.id + '-details-panel',\r
                title: Ext.Date.format(dt, 'F j'),\r
                layout: 'fit',\r
                floating: true,\r
                renderTo: Ext.getBody(),\r
                tools: [{\r
                    type: 'close',\r
                    handler: function(e, t, p) {\r
                        p.ownerCt.hide();\r
                    }\r
                }],\r
                items: {\r
                    xtype: 'monthdaydetailview',\r
                    id: this.id + '-details-view',\r
                    date: dt,\r
                    view: this,\r
                    store: this.store,\r
                    listeners: {\r
                        'eventsrendered': Ext.bind(this.onDetailViewUpdated, this)\r
                    }\r
                }\r
            });\r
        }\r
        else {\r
            this.detailPanel.setTitle(Ext.Date.format(dt, 'F j'));\r
        }\r
        this.detailPanel.getComponent(this.id + '-details-view').update(dt);\r
    },\r
\r
    // private\r
    onDetailViewUpdated : function(view, dt, numEvents){\r
        var p = this.detailPanel,\r
            dayEl = this.getDayEl(dt),\r
            box = dayEl.getBox();\r
        \r
        p.setWidth(Math.max(box.width, 220));\r
        p.show();\r
        p.getEl().alignTo(dayEl, 't-t?');\r
    },\r
\r
    // private\r
    onHide: function() {\r
        this.callParent(arguments);\r
        \r
        if (this.detailPanel) {\r
            this.detailPanel.hide();\r
        }\r
    },\r
\r
    // private\r
    onClick: function(e, t) {\r
        if (this.detailPanel) {\r
            this.detailPanel.hide();\r
        }\r
        if (Ext.calendar.view.Month.superclass.onClick.apply(this, arguments)) {\r
            // The superclass handled the click already so exit\r
            return;\r
        }\r
        if (this.dropZone) {\r
            this.dropZone.clearShims();\r
        }\r
        var el = e.getTarget(this.weekLinkSelector, 3),\r
            dt,\r
            parts;\r
        if (el) {\r
            dt = el.id.split(this.weekLinkIdDelimiter)[1];\r
            this.fireEvent('weekclick', this, Ext.Date.parseDate(dt, 'Ymd'));\r
            return;\r
        }\r
        el = e.getTarget(this.moreSelector, 3);\r
        if (el) {\r
            dt = el.id.split(this.moreElIdDelimiter)[1];\r
            this.onMoreClick(Ext.Date.parseDate(dt, 'Ymd'));\r
            return;\r
        }\r
        el = e.getTarget('td', 3);\r
        if (el) {\r
            if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {\r
                parts = el.id.split(this.dayElIdDelimiter);\r
                dt = parts[parts.length - 1];\r
\r
                this.fireEvent('dayclick', this, Ext.Date.parseDate(dt, 'Ymd'), false, Ext.get(this.getDayId(dt)));\r
                return;\r
            }\r
        }\r
    },\r
\r
    // private\r
    handleDayMouseEvent: function(e, t, type) {\r
        var el = e.getTarget(this.weekLinkSelector, 3, true);\r
        if (el && this.weekLinkOverClass) {\r
            el[type == 'over' ? 'addCls': 'removeCls'](this.weekLinkOverClass);\r
            return;\r
        }\r
        this.callParent(arguments);\r
    }\r
});\r