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
  44     this.on('activate', function()
  45     {
  46         Roo.log('activate');
  47         if (this.rendered) {
  48             return;
  49         }
  50         this.rendered = true;
  51         //console.log('render tree');
  52         this.render();
  53     },this);
  54
  55     this.addEvents({
  56         /**
  57              * @event select
  58              * Fires when a date is selected
  59              * @param {DatePicker} this
  60              * @param {Date} date The selected date
  61              */
  62         'select': true,
  63         /**
  64              * @event monthchange
  65              * Fires when the displayed month changes
  66              * @param {DatePicker} this
  67              * @param {Date} date The selected month
  68              */
  69         'monthchange': true,
  70         /**
  71              * @event evententer
  72              * Fires when mouse over an event
  73              * @param {Calendar} this
  74              * @param {event} Event
  75              */
  76         'evententer': true,
  77         /**
  78              * @event eventleave
  79              * Fires when the mouse leaves an
  80              * @param {Calendar} this
  81              * @param {event}
  82              */
  83         'eventleave': true,
  84         /**
  85              * @event eventclick
  86              * Fires when the mouse click an
  87              * @param {Calendar} this
  88              * @param {event}
  89              */
  90         'eventclick': true
  91
  92     });
  93
  94     //this.grid = grid;
  95     //this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
  96 };
  97
  98 Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
  99     getId : function(){
 100         return this.id;
 101     },
 102     /*
 103     setSize : function(width, height){
 104         if(!this.ignoreResize(width, height)){
 105             var grid = this.grid;
 106             var size = this.adjustForComponents(width, height);
 107             grid.getGridEl().setSize(size.width, size.height);
 108             grid.autoSize();
 109         }
 110     },
 111
 112     beforeSlide : function(){
 113         this.grid.getView().scroller.clip();
 114     },
 115
 116     afterSlide : function(){
 117         this.grid.getView().scroller.unclip();
 118     },
 119     */
 120     destroy : function(){
 121       //  this.grid.destroy();
 122        // delete this.grid;
 123          Roo.GridPanel.superclass.destroy.call(this);
 124     },
 125
 126
 127     render : function()
 128     {
 129
 130         Roo.log("render calendar");
 131         var res = Roo.bootstrap.Calendar.prototype.getAutoCreate();
 132
 133
 134     }
 135
 136
 137     getAutoCreate : function(){
 138
 139
 140         fc_button = function(name, corner, style, content ) {
 141             return Roo.apply({},{
 142                 tag : 'span',
 143                 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
 144                          (corner.length ?
 145                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
 146                             ''
 147                         ),
 148                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
 149                 unselectable: 'on'
 150             });
 151         };
 152
 153         var header = {
 154             tag : 'table',
 155             cls : 'fc-header',
 156             style : 'width:100%',
 157             cn : [
 158                 {
 159                     tag: 'tr',
 160                     cn : [
 161                         {
 162                             tag : 'td',
 163                             cls : 'fc-header-left',
 164                             cn : [
 165                                 fc_button('prev', 'left', 'arrow', '&#8249;' ),
 166                                 fc_button('next', 'right', 'arrow', '&#8250;' ),
 167                                 { tag: 'span', cls: 'fc-header-space' },
 168                                 fc_button('today', 'left right', '', 'today' )  // neds state disabled..
 169
 170
 171                             ]
 172                         },
 173
 174                         {
 175                             tag : 'td',
 176                             cls : 'fc-header-center',
 177                             cn : [
 178                                 {
 179                                     tag: 'span',
 180                                     cls: 'fc-header-title',
 181                                     cn : {
 182                                         tag: 'H2',
 183                                         html : 'month / year'
 184                                     }
 185                                 }
 186
 187                             ]
 188                         },
 189                         {
 190                             tag : 'td',
 191                             cls : 'fc-header-right',
 192                             cn : [
 193                           /*      fc_button('month', 'left', '', 'month' ),
 194                                 fc_button('week', '', '', 'week' ),
 195                                 fc_button('day', 'right', '', 'day' )
 196                             */
 197
 198                             ]
 199                         }
 200
 201                     ]
 202                 }
 203             ]
 204         };
 205
 206
 207         var cal_heads = function() {
 208             var ret = [];
 209             // fixme - handle this.
 210
 211             for (var i =0; i < Date.dayNames.length; i++) {
 212                 var d = Date.dayNames[i];
 213                 ret.push({
 214                     tag: 'th',
 215                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
 216                     html : d.substring(0,3)
 217                 });
 218
 219             }
 220             ret[0].cls += ' fc-first';
 221             ret[6].cls += ' fc-last';
 222             return ret;
 223         };
 224         var cal_cell = function(n) {
 225             return  {
 226                 tag: 'td',
 227                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
 228                 cn : [
 229                     {
 230                         cn : [
 231                             {
 232                                 cls: 'fc-day-number',
 233                                 html: 'D'
 234                             },
 235                             {
 236                                 cls: 'fc-day-content',
 237
 238                                 cn : [
 239                                      {
 240                                         style: 'position: relative;' // height: 17px;
 241                                     }
 242                                 ]
 243                             }
 244
 245
 246                         ]
 247                     }
 248                 ]
 249
 250             }
 251         };
 252         var cal_rows = function() {
 253
 254             var ret = []
 255             for (var r = 0; r < 6; r++) {
 256                 var row= {
 257                     tag : 'tr',
 258                     cls : 'fc-week',
 259                     cn : []
 260                 };
 261
 262                 for (var i =0; i < Date.dayNames.length; i++) {
 263                     var d = Date.dayNames[i];
 264                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
 265
 266                 }
 267                 row.cn[0].cls+=' fc-first';
 268                 row.cn[0].cn[0].style = 'min-height:90px';
 269                 row.cn[6].cls+=' fc-last';
 270                 ret.push(row);
 271
 272             }
 273             ret[0].cls += ' fc-first';
 274             ret[4].cls += ' fc-prev-last';
 275             ret[5].cls += ' fc-last';
 276             return ret;
 277
 278         };
 279
 280         var cal_table = {
 281             tag: 'table',
 282             cls: 'fc-border-separate',
 283             style : 'width:100%',
 284             cellspacing  : 0,
 285             cn : [
 286                 {
 287                     tag: 'thead',
 288                     cn : [
 289                         {
 290                             tag: 'tr',
 291                             cls : 'fc-first fc-last',
 292                             cn : cal_heads()
 293                         }
 294                     ]
 295                 },
 296                 {
 297                     tag: 'tbody',
 298                     cn : cal_rows()
 299                 }
 300
 301             ]
 302         };
 303
 304          var cfg = {
 305             cls : 'fc fc-ltr',
 306             cn : [
 307                 header,
 308                 {
 309                     cls : 'fc-content',
 310                     style : "position: relative;",
 311                     cn : [
 312                         {
 313                             cls : 'fc-view fc-view-month fc-grid',
 314                             style : 'position: relative',
 315                             unselectable : 'on',
 316                             cn : [
 317                                 {
 318                                     cls : 'fc-event-container',
 319                                     style : 'position:absolute;z-index:8;top:0;left:0;'
 320                                 },
 321                                 cal_table
 322                             ]
 323                         }
 324                     ]
 325
 326                 }
 327            ]
 328
 329         };
 330
 331
 332
 333         return cfg;
 334     },
 335
 336
 337     initEvents : function()
 338     {
 339         if(!this.store){
 340             throw "can not find store for combo";
 341         }
 342
 343         this.store = Roo.factory(this.store, Roo.data);
 344         this.store.on('load', this.onLoad, this);
 345
 346         this.resize();
 347         this.cells = this.el.select('.fc-day',true);
 348
 349         this.textNodes = this.el.query('.fc-day-number');
 350         this.cells.addClassOnOver('fc-state-hover');
 351
 352         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
 353         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
 354         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
 355         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
 356
 357         this.on('monthchange', this.onMonthChange, this);
 358
 359         this.update(new Date().clearTime());
 360     },
 361
 362 });