examples/calendar/src/templates/BoxLayoutTemplate.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.calendar.BoxLayoutTemplate
   9  * @extends Ext.XTemplate
  10  * <p>This is the template used to render calendar views based on small day boxes within a non-scrolling container (currently
  11  * the {@link Ext.calendar.MonthView MonthView} and the all-day headers for {@link Ext.calendar.DayView DayView} and
  12  * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the
  13  * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
  14  * @constructor
  15  * @param {Object} config The config object
  16  */
  17 Ext.calendar.BoxLayoutTemplate = function(config){
  18
  19     Ext.apply(this, config);
  20
  21     var weekLinkTpl = this.showWeekLinks ? '<div id="{weekLinkId}" class="ext-cal-week-link">{weekNum}</div>' : '';
  22
  23     Ext.calendar.BoxLayoutTemplate.superclass.constructor.call(this,
  24         '<tpl for="weeks">',
  25             '<div id="{[this.id]}-wk-{[xindex-1]}" class="ext-cal-wk-ct" style="top:{[this.getRowTop(xindex, xcount)]}%; height:{[this.getRowHeight(xcount)]}%;">',
  26                 weekLinkTpl,
  27                 '<table class="ext-cal-bg-tbl" cellpadding="0" cellspacing="0">',
  28                     '<tbody>',
  29                         '<tr>',
  30                             '<tpl for=".">',
  31                                  '<td id="{[this.id]}-day-{date:date("Ymd")}" class="{cellCls}">&nbsp;</td>',
  32                             '</tpl>',
  33                         '</tr>',
  34                     '</tbody>',
  35                 '</table>',
  36                 '<table class="ext-cal-evt-tbl" cellpadding="0" cellspacing="0">',
  37                     '<tbody>',
  38                         '<tr>',
  39                             '<tpl for=".">',
  40                                 '<td id="{[this.id]}-ev-day-{date:date("Ymd")}" class="{titleCls}"><div>{title}</div></td>',
  41                             '</tpl>',
  42                         '</tr>',
  43                     '</tbody>',
  44                 '</table>',
  45             '</div>',
  46         '</tpl>', {
  47             getRowTop: function(i, ln){
  48                 return ((i-1)*(100/ln));
  49             },
  50             getRowHeight: function(ln){
  51                 return 100/ln;
  52             }
  53         }
  54     );
  55 };
  56
  57 Ext.extend(Ext.calendar.BoxLayoutTemplate, Ext.XTemplate, {
  58     // private
  59     applyTemplate : function(o){
  60
  61         Ext.apply(this, o);
  62
  63         var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
  64             weeks = [[]],
  65             today = new Date().clearTime(),
  66             dt = this.viewStart.clone(),
  67             thisMonth = this.startDate.getMonth();
  68
  69         for(; w < this.weekCount || this.weekCount == -1; w++){
  70             if(dt > this.viewEnd){
  71                 break;
  72             }
  73             weeks[w] = [];
  74
  75             for(var d = 0; d < this.dayCount; d++){
  76                 isToday = dt.getTime() === today.getTime();
  77                 showMonth = first || (dt.getDate() == 1);
  78                 prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
  79                 nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
  80
  81                 if(dt.getDay() == 1){
  82                     // The ISO week format 'W' is relative to a Monday week start. If we
  83                     // make this check on Sunday the week number will be off.
  84                     weeks[w].weekNum = this.showWeekNumbers ? dt.format('W') : '&nbsp;';
  85                     weeks[w].weekLinkId = 'ext-cal-week-'+dt.format('Ymd');
  86                 }
  87
  88                 if(showMonth){
  89                     if(isToday){
  90                         title = this.getTodayText();
  91                     }
  92                     else{
  93                         title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
  94                     }
  95                 }
  96                 else{
  97                     var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
  98                     title = isToday ? this.getTodayText() : dt.format(dayFmt);
  99                 }
 100
 101                 weeks[w].push({
 102                     title: title,
 103                     date: dt.clone(),
 104                     titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
 105                         (w==0 ? ' ext-cal-dtitle-first' : '') +
 106                         (prevMonth ? ' ext-cal-dtitle-prev' : '') +
 107                         (nextMonth ? ' ext-cal-dtitle-next' : ''),
 108                     cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
 109                         (d==0 ? ' ext-cal-day-first' : '') +
 110                         (prevMonth ? ' ext-cal-day-prev' : '') +
 111                         (nextMonth ? ' ext-cal-day-next' : '')
 112                 });
 113                 dt = dt.add(Date.DAY, 1);
 114                 first = false;
 115             }
 116         }
 117
 118         return Ext.calendar.BoxLayoutTemplate.superclass.applyTemplate.call(this, {
 119             weeks: weeks
 120         });
 121     },
 122
 123     // private
 124     getTodayText : function(){
 125         var dt = new Date().format('l, F j, Y'),
 126             todayText = this.showTodayText !== false ? this.todayText : '',
 127             timeText = this.showTime !== false ? ' <span id="'+this.id+'-clock" class="ext-cal-dtitle-time">' +
 128                     new Date().format('g:i a') + '</span>' : '',
 129             separator = todayText.length > 0 || timeText.length > 0 ? ' &mdash; ' : '';
 130
 131         if(this.dayCount == 1){
 132             return dt + separator + todayText + timeText;
 133         }
 134         fmt = this.weekCount == 1 ? 'D j' : 'j';
 135         return todayText.length > 0 ? todayText + timeText : new Date().format(fmt) + timeText;
 136     }
 137 });
 138
 139 Ext.calendar.BoxLayoutTemplate.prototype.apply = Ext.calendar.BoxLayoutTemplate.prototype.applyTemplate;