extjs/examples/classic/calendar/src/template/DayBody.js

   1 /**
   2  * @class Ext.calendar.template.DayBody
   3  * @extends Ext.XTemplate
   4  * <p>This is the template used to render the scrolling body container used in {@link Ext.calendar.DayView DayView} and
   5  * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the
   6  * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
   7  * <p>Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate}
   8  * that internally creates an instance of this template along with a {@link Ext.calendar.DayHeaderTemplate}.</p>
   9  * @constructor
  10  * @param {Object} config The config object
  11  */
  12 Ext.define('Ext.calendar.template.DayBody', {
  13     extend: 'Ext.XTemplate',
  14     requires: [
  15         'Ext.calendar.util.Date'
  16     ],
  17
  18     constructor: function(config){
  19
  20         Ext.apply(this, config);
  21
  22         this.callParent([
  23             '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
  24                 '<tbody>',
  25                     '<tr height="1">',
  26                         '<td class="ext-cal-gutter"></td>',
  27                         '<td colspan="{dayCount}">',
  28                             '<div class="ext-cal-bg-rows">',
  29                                 '<div class="ext-cal-bg-rows-inner">',
  30                                     '<tpl for="times">',
  31                                         '<div class="ext-cal-bg-row">',
  32                                             '<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
  33                                         '</div>',
  34                                     '</tpl>',
  35                                 '</div>',
  36                             '</div>',
  37                         '</td>',
  38                     '</tr>',
  39                     '<tr>',
  40                         '<td class="ext-cal-day-times">',
  41                             '<tpl for="times">',
  42                                 '<div class="ext-cal-bg-row">',
  43                                     '<div class="ext-cal-day-time-inner">{.}</div>',
  44                                 '</div>',
  45                             '</tpl>',
  46                         '</td>',
  47                         '<tpl for="days">',
  48                             '<td class="ext-cal-day-col">',
  49                                 '<div class="ext-cal-day-col-inner">',
  50                                     '<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
  51                                 '</div>',
  52                             '</td>',
  53                         '</tpl>',
  54                     '</tr>',
  55                 '</tbody>',
  56             '</table>'
  57         ]);
  58     },
  59
  60     // private
  61     applyTemplate : function(o){
  62         this.today = Ext.calendar.util.Date.today();
  63         this.dayCount = this.dayCount || 1;
  64
  65         var i = 0,
  66             days = [],
  67             dt = Ext.Date.clone(o.viewStart),
  68             times = [];
  69
  70         for(; i<this.dayCount; i++){
  71             days[i] = Ext.calendar.util.Date.add(dt, {days: i});
  72         }
  73
  74         // use a fixed DST-safe date so times don't get skipped on DST boundaries
  75         dt = Ext.Date.clearTime(new Date('5/26/1972'));
  76
  77         for(i=0; i<24; i++){
  78             times.push(Ext.Date.format(dt, 'ga'));
  79             dt = Ext.calendar.util.Date.add(dt, {hours: 1});
  80         }
  81
  82         return this.applyOut({
  83             days: days,
  84             dayCount: days.length,
  85             times: times
  86         }, []).join('');
  87     },
  88
  89     apply: function(values) {
  90         return this.applyTemplate.apply(this, arguments);
  91     }
  92 });