Roo/CalendarPanel.js
authorAlan Knowles <alan@roojs.com>
Tue, 8 Apr 2014 12:36:48 +0000 (20:36 +0800)
committerAlan Knowles <alan@roojs.com>
Tue, 8 Apr 2014 12:36:48 +0000 (20:36 +0800)
Roo/CalendarPanel.js

index 2d187d1..f20e03c 100644 (file)
@@ -128,8 +128,235 @@ Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
     {
         
         Roo.log("render calendar");
+        var res = Roo.bootstrap.Calendar.prototype.getAutoCreate();
         
         
     }
     
+    
+    getAutoCreate : function(){
+        
+        
+        fc_button = function(name, corner, style, content ) {
+            return Roo.apply({},{
+                tag : 'span',
+                cls : 'fc-button fc-button-'+name+' fc-state-default ' + 
+                         (corner.length ?
+                            'fc-corner-' + corner.split(' ').join(' fc-corner-') :
+                            ''
+                        ),
+                html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
+                unselectable: 'on'
+            });
+        };
+        
+        var header = {
+            tag : 'table',
+            cls : 'fc-header',
+            style : 'width:100%',
+            cn : [
+                {
+                    tag: 'tr',
+                    cn : [
+                        {
+                            tag : 'td',
+                            cls : 'fc-header-left',
+                            cn : [
+                                fc_button('prev', 'left', 'arrow', '&#8249;' ),
+                                fc_button('next', 'right', 'arrow', '&#8250;' ),
+                                { tag: 'span', cls: 'fc-header-space' },
+                                fc_button('today', 'left right', '', 'today' )  // neds state disabled..
+                                
+                                
+                            ]
+                        },
+                        
+                        {
+                            tag : 'td',
+                            cls : 'fc-header-center',
+                            cn : [
+                                {
+                                    tag: 'span',
+                                    cls: 'fc-header-title',
+                                    cn : {
+                                        tag: 'H2',
+                                        html : 'month / year'
+                                    }
+                                }
+                                
+                            ]
+                        },
+                        {
+                            tag : 'td',
+                            cls : 'fc-header-right',
+                            cn : [
+                          /*      fc_button('month', 'left', '', 'month' ),
+                                fc_button('week', '', '', 'week' ),
+                                fc_button('day', 'right', '', 'day' )
+                            */    
+                                
+                            ]
+                        }
+                        
+                    ]
+                }
+            ]
+        };
+        
+       
+        var cal_heads = function() {
+            var ret = [];
+            // fixme - handle this.
+            
+            for (var i =0; i < Date.dayNames.length; i++) {
+                var d = Date.dayNames[i];
+                ret.push({
+                    tag: 'th',
+                    cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
+                    html : d.substring(0,3)
+                });
+                
+            }
+            ret[0].cls += ' fc-first';
+            ret[6].cls += ' fc-last';
+            return ret;
+        };
+        var cal_cell = function(n) {
+            return  {
+                tag: 'td',
+                cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
+                cn : [
+                    {
+                        cn : [
+                            {
+                                cls: 'fc-day-number',
+                                html: 'D'
+                            },
+                            {
+                                cls: 'fc-day-content',
+                             
+                                cn : [
+                                     {
+                                        style: 'position: relative;' // height: 17px;
+                                    }
+                                ]
+                            }
+                            
+                            
+                        ]
+                    }
+                ]
+                
+            }
+        };
+        var cal_rows = function() {
+            
+            var ret = []
+            for (var r = 0; r < 6; r++) {
+                var row= {
+                    tag : 'tr',
+                    cls : 'fc-week',
+                    cn : []
+                };
+                
+                for (var i =0; i < Date.dayNames.length; i++) {
+                    var d = Date.dayNames[i];
+                    row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
+
+                }
+                row.cn[0].cls+=' fc-first';
+                row.cn[0].cn[0].style = 'min-height:90px';
+                row.cn[6].cls+=' fc-last';
+                ret.push(row);
+                
+            }
+            ret[0].cls += ' fc-first';
+            ret[4].cls += ' fc-prev-last';
+            ret[5].cls += ' fc-last';
+            return ret;
+            
+        };
+        
+        var cal_table = {
+            tag: 'table',
+            cls: 'fc-border-separate',
+            style : 'width:100%',
+            cellspacing  : 0,
+            cn : [
+                { 
+                    tag: 'thead',
+                    cn : [
+                        { 
+                            tag: 'tr',
+                            cls : 'fc-first fc-last',
+                            cn : cal_heads()
+                        }
+                    ]
+                },
+                { 
+                    tag: 'tbody',
+                    cn : cal_rows()
+                }
+                  
+            ]
+        };
+         
+         var cfg = {
+            cls : 'fc fc-ltr',
+            cn : [
+                header,
+                {
+                    cls : 'fc-content',
+                    style : "position: relative;",
+                    cn : [
+                        {
+                            cls : 'fc-view fc-view-month fc-grid',
+                            style : 'position: relative',
+                            unselectable : 'on',
+                            cn : [
+                                {
+                                    cls : 'fc-event-container',
+                                    style : 'position:absolute;z-index:8;top:0;left:0;'
+                                },
+                                cal_table
+                            ]
+                        }
+                    ]
+    
+                }
+           ] 
+            
+        };
+        
+         
+        
+        return cfg;
+    },
+    
+    
+    initEvents : function()
+    {
+        if(!this.store){
+            throw "can not find store for combo";
+        }
+        
+        this.store = Roo.factory(this.store, Roo.data);
+        this.store.on('load', this.onLoad, this);
+        
+        this.resize();
+        this.cells = this.el.select('.fc-day',true);
+        
+        this.textNodes = this.el.query('.fc-day-number');
+        this.cells.addClassOnOver('fc-state-hover');
+        
+        this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
+        this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
+        this.el.select('.fc-button-today',true).on('click', this.showToday, this);
+        this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
+        
+        this.on('monthchange', this.onMonthChange, this);
+        
+        this.update(new Date().clearTime());
+    },
+    
 });