X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/calendar/src/templates/MonthViewTemplate.js

diff --git a/examples/calendar/src/templates/MonthViewTemplate.js b/examples/calendar/src/templates/MonthViewTemplate.js
new file mode 100644
index 00000000..15da0639
--- /dev/null
+++ b/examples/calendar/src/templates/MonthViewTemplate.js
@@ -0,0 +1,70 @@
+/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.calendar.MonthViewTemplate
+ * @extends Ext.XTemplate
+ * <p>This is the template used to render the {@link Ext.calendar.MonthView MonthView}. Internally this class defers to an
+ * instance of {@link Ext.calerndar.BoxLayoutTemplate} to handle the inner layout rendering and adds containing elements around
+ * that to form the month view.</p> 
+ * <p>This template is automatically bound to the underlying event store by the 
+ * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.MonthViewTemplate = function(config){
+    
+    Ext.apply(this, config);
+    
+    this.weekTpl = new Ext.calendar.BoxLayoutTemplate(config);
+    this.weekTpl.compile();
+    
+    var weekLinkTpl = this.showWeekLinks ? '<div class="ext-cal-week-link-hd">&nbsp;</div>' : '';
+    
+    Ext.calendar.MonthViewTemplate.superclass.constructor.call(this,
+        '<div class="ext-cal-inner-ct {extraClasses}">',
+            '<div class="ext-cal-hd-ct ext-cal-month-hd">',
+                weekLinkTpl,
+                '<table class="ext-cal-hd-days-tbl" cellpadding="0" cellspacing="0">',
+                    '<tbody>',
+                        '<tr>',
+                            '<tpl for="days">',
+                                '<th class="ext-cal-hd-day{[xindex==1 ? " ext-cal-day-first" : ""]}" title="{.:date("l, F j, Y")}">{.:date("D")}</th>',
+                            '</tpl>',
+                        '</tr>',
+                    '</tbody>',
+                '</table>',
+            '</div>',
+            '<div class="ext-cal-body-ct">{weeks}</div>',
+        '</div>'
+    );
+};
+
+Ext.extend(Ext.calendar.MonthViewTemplate, Ext.XTemplate, {
+    // private
+    applyTemplate : function(o){
+        var days = [],
+            weeks = this.weekTpl.apply(o),
+            dt = o.viewStart;
+        
+        for(var i = 0; i < 7; i++){
+            days.push(dt.add(Date.DAY, i));
+        }
+        
+        var extraClasses = this.showHeader === true ? '' : 'ext-cal-noheader';
+        if(this.showWeekLinks){
+            extraClasses += ' ext-cal-week-links';
+        }
+        
+        return Ext.calendar.MonthViewTemplate.superclass.applyTemplate.call(this, {
+            days: days,
+            weeks: weeks,
+            extraClasses: extraClasses 
+        });
+    }
+});
+
+Ext.calendar.MonthViewTemplate.prototype.apply = Ext.calendar.MonthViewTemplate.prototype.applyTemplate;