add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / calendar / src / template / DayBody.js

/**\r
 * @class Ext.calendar.template.DayBody\r
 * @extends Ext.XTemplate\r
 * <p>This is the template used to render the scrolling body container used in {@link Ext.calendar.DayView DayView} and \r
 * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the \r
 * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>\r
 * <p>Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate}\r
 * that internally creates an instance of this template along with a {@link Ext.calendar.DayHeaderTemplate}.</p>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.template.DayBody', {\r
    extend: 'Ext.XTemplate',\r
    requires: [\r
        'Ext.calendar.util.Date'\r
    ],\r
    \r
    constructor: function(config){\r
        \r
        Ext.apply(this, config);\r
\r
        this.callParent([\r
            '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',\r
                '<tbody>',\r
                    '<tr height="1">',\r
                        '<td class="ext-cal-gutter"></td>',\r
                        '<td colspan="{dayCount}">',\r
                            '<div class="ext-cal-bg-rows">',\r
                                '<div class="ext-cal-bg-rows-inner">',\r
                                    '<tpl for="times">',\r
                                        '<div class="ext-cal-bg-row">',\r
                                            '<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',\r
                                        '</div>',\r
                                    '</tpl>',\r
                                '</div>',\r
                            '</div>',\r
                        '</td>',\r
                    '</tr>',\r
                    '<tr>',\r
                        '<td class="ext-cal-day-times">',\r
                            '<tpl for="times">',\r
                                '<div class="ext-cal-bg-row">',\r
                                    '<div class="ext-cal-day-time-inner">{.}</div>',\r
                                '</div>',\r
                            '</tpl>',\r
                        '</td>',\r
                        '<tpl for="days">',\r
                            '<td class="ext-cal-day-col">',\r
                                '<div class="ext-cal-day-col-inner">',\r
                                    '<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',\r
                                '</div>',\r
                            '</td>',\r
                        '</tpl>',\r
                    '</tr>',\r
                '</tbody>',\r
            '</table>'\r
        ]);\r
    },\r
\r
    // private\r
    applyTemplate : function(o){\r
        this.today = Ext.calendar.util.Date.today();\r
        this.dayCount = this.dayCount || 1;\r
        \r
        var i = 0,\r
            days = [],\r
            dt = Ext.Date.clone(o.viewStart),\r
            times = [];\r
            \r
        for(; i<this.dayCount; i++){\r
            days[i] = Ext.calendar.util.Date.add(dt, {days: i});\r
        }\r
\r
        // use a fixed DST-safe date so times don't get skipped on DST boundaries\r
        dt = Ext.Date.clearTime(new Date('5/26/1972'));\r
        \r
        for(i=0; i<24; i++){\r
            times.push(Ext.Date.format(dt, 'ga'));\r
            dt = Ext.calendar.util.Date.add(dt, {hours: 1});\r
        }\r
        \r
        return this.applyOut({\r
            days: days,\r
            dayCount: days.length,\r
            times: times\r
        }, []).join('');\r
    },\r
    \r
    apply: function(values) {\r
        return this.applyTemplate.apply(this, arguments);\r
    }\r
});