examples/calendar/src/templates/MonthViewTemplate.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.calendar.MonthViewTemplate\r
   9  * @extends Ext.XTemplate\r
  10  * <p>This is the template used to render the {@link Ext.calendar.MonthView MonthView}. Internally this class defers to an\r
  11  * instance of {@link Ext.calerndar.BoxLayoutTemplate} to handle the inner layout rendering and adds containing elements around\r
  12  * that to form the month view.</p> \r
  13  * <p>This template is automatically bound to the underlying event store by the \r
  14  * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>\r
  15  * @constructor\r
  16  * @param {Object} config The config object\r
  17  */\r
  18 Ext.calendar.MonthViewTemplate = function(config){\r
  19     \r
  20     Ext.apply(this, config);\r
  21     \r
  22     this.weekTpl = new Ext.calendar.BoxLayoutTemplate(config);\r
  23     this.weekTpl.compile();\r
  24     \r
  25     var weekLinkTpl = this.showWeekLinks ? '<div class="ext-cal-week-link-hd">&nbsp;</div>' : '';\r
  26     \r
  27     Ext.calendar.MonthViewTemplate.superclass.constructor.call(this,\r
  28         '<div class="ext-cal-inner-ct {extraClasses}">',\r
  29             '<div class="ext-cal-hd-ct ext-cal-month-hd">',\r
  30                 weekLinkTpl,\r
  31                 '<table class="ext-cal-hd-days-tbl" cellpadding="0" cellspacing="0">',\r
  32                     '<tbody>',\r
  33                         '<tr>',\r
  34                             '<tpl for="days">',\r
  35                                 '<th class="ext-cal-hd-day{[xindex==1 ? " ext-cal-day-first" : ""]}" title="{.:date("l, F j, Y")}">{.:date("D")}</th>',\r
  36                             '</tpl>',\r
  37                         '</tr>',\r
  38                     '</tbody>',\r
  39                 '</table>',\r
  40             '</div>',\r
  41             '<div class="ext-cal-body-ct">{weeks}</div>',\r
  42         '</div>'\r
  43     );\r
  44 };\r
  45 \r
  46 Ext.extend(Ext.calendar.MonthViewTemplate, Ext.XTemplate, {\r
  47     // private\r
  48     applyTemplate : function(o){\r
  49         var days = [],\r
  50             weeks = this.weekTpl.apply(o),\r
  51             dt = o.viewStart;\r
  52         \r
  53         for(var i = 0; i < 7; i++){\r
  54             days.push(dt.add(Date.DAY, i));\r
  55         }\r
  56         \r
  57         var extraClasses = this.showHeader === true ? '' : 'ext-cal-noheader';\r
  58         if(this.showWeekLinks){\r
  59             extraClasses += ' ext-cal-week-links';\r
  60         }\r
  61         \r
  62         return Ext.calendar.MonthViewTemplate.superclass.applyTemplate.call(this, {\r
  63             days: days,\r
  64             weeks: weeks,\r
  65             extraClasses: extraClasses \r
  66         });\r
  67     }\r
  68 });\r
  69 \r
  70 Ext.calendar.MonthViewTemplate.prototype.apply = Ext.calendar.MonthViewTemplate.prototype.applyTemplate;\r