git.roojs.org Git - roojs1/blob - Roo/CalendarPanel.js

   1 /*
   2  * - LGPL
   3  *
   4  * based on jquery fullcalendar
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.Calendar
  11  * @extends Roo.Component
  12  * Bootstrap Calendar class
  13
  14  * @constructor
  15  * Create a new Container
  16  * @param {Object} config The config object
  17  */
  18
  19 Roo.CalendarPanel = function(config){
  20
  21     Roo.log("cal panel ctr");
  22
  23     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
  24         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
  25
  26     //this.wrapper.dom.appendChild(grid.getGridEl().dom);
  27
  28     Roo.CalendarPanel.superclass.constructor.call(this, this.wrapper, config);
  29
  30     Roo.log(this.el);
  31
  32     if(this.toolbar){
  33         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
  34     }
  35     // xtype created footer. - not sure if will work as we normally have to render first..
  36     if (this.footer && !this.footer.el && this.footer.xtype) {
  37
  38         //this.footer.container = this.grid.getView().getFooterPanel(true);
  39         //this.footer.dataSource = this.grid.dataSource;
  40         //this.footer = Roo.factory(this.footer, Roo);
  41
  42     }
  43     this.view = new Roo.calendar.View(Roo.apply({
  44         skipNavHeader : true,
  45         skipMonthHeader : true
  46
  47     },config));
  48
  49
  50     this.on('activate', function()
  51     {
  52         Roo.log('activate');
  53
  54         //console.log('render tree');
  55         this.render();
  56     },this);
  57
  58     this.addEvents({
  59         /**
  60              * @event select
  61              * Fires when a date is selected
  62              * @param {DatePicker} this
  63              * @param {Date} date The selected date
  64              */
  65         'select': true,
  66         /**
  67              * @event monthchange
  68              * Fires when the displayed month changes
  69              * @param {DatePicker} this
  70              * @param {Date} date The selected month
  71              */
  72         'monthchange': true,
  73         /**
  74              * @event evententer
  75              * Fires when mouse over an event
  76              * @param {Calendar} this
  77              * @param {event} Event
  78              */
  79         'evententer': true,
  80         /**
  81              * @event eventleave
  82              * Fires when the mouse leaves an
  83              * @param {Calendar} this
  84              * @param {event}
  85              */
  86         'eventleave': true,
  87         /**
  88              * @event eventclick
  89              * Fires when the mouse click an
  90              * @param {Calendar} this
  91              * @param {event}
  92              */
  93         'eventclick': true,
  94         /**
  95              * @event rendered
  96              * Fires when the grid is rendered
  97              * @param {Calendar} this
  98
  99              */
 100         'rendered': true
 101
 102
 103     });
 104     this.relayEvents(this.view, ["select","monthchange","evententer","eventleave","rendered"]);
 105
 106     //this.grid = grid;
 107     //this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
 108 };
 109
 110
 111 Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
 112
 113
 114     render : function()
 115     {
 116         var ct = this.el.appendChild(document.createElement("div"));
 117         this.onRender(this.el, false)
 118     },
 119
 120     onRender : function(ct, position)
 121     {
 122         if (this.rendered) {
 123             return;
 124         }
 125         this.rendered = true;
 126
 127         Roo.log("render calendar");
 128
 129
 130         //Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
 131
 132
 133         var cfg = Roo.apply({},  this.view.getAutoCreate());
 134         cfg.id = Roo.id();
 135
 136         // fill in the extra attributes
 137         if (this.xattr && typeof(this.xattr) =='object') {
 138             for (var i in this.xattr) {
 139                 cfg[i] = this.xattr[i];
 140             }
 141         }
 142
 143         if(this.dataId){
 144             cfg.dataId = this.dataId;
 145         }
 146
 147         if (this.cls) {
 148             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
 149         }
 150
 151         if (this.style) { // fixme needs to support more complex style data.
 152             cfg.style = this.style;
 153         }
 154
 155         if(this.name){
 156             cfg.name = this.name;
 157         }
 158
 159         this.view.el =  ct.createChild(cfg, position);
 160
 161         if(this.tabIndex !== undefined){
 162             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 163         }
 164
 165
 166         this.view.initEvents();
 167         this.fireEvent('rendered');
 168     }
 169
 170
 171
 172
 173 });
 174
 175
 176
 177 Roo.each([
 178     'getAutoCreate',
 179     'initEvents',
 180     'resize',
 181     'showPrevMonth',
 182     'showToday',
 183     'showNextMonth',
 184     'showPrevYear',
 185     'showNextYear',
 186     'update',
 187     'findCell',
 188     'findCells',
 189     'findBestRow',
 190     'addItem',
 191     'clearEvents',
 192     'renderEvents',
 193     'onEventEnter',
 194     'onEventLeave',
 195     'onEventClick',
 196     'onMonthChange',
 197     'onLoad'
 198
 199
 200 ], function(p) {
 201     Roo.log('add' + p);
 202     Roo.CalendarPanel.prototype[p] = Roo.bootstrap.Calendar.prototype[p];
 203
 204 });