git.roojs.org Git - roojs1/blob - Roo/bootstrap/Calendar.js

   1 /*
   2  * - LGPL
   3  *
   4  * based on jquery fullcalendar
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Calendar
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Calendar class
  13  * @cfg {Boolean} loadMask (true|false) default false
  14  * @cfg {Object} header generate the user specific header of the calendar, default false
  15
  16  * @constructor
  17  * Create a new Container
  18  * @param {Object} config The config object
  19  */
  20
  21
  22
  23 Roo.bootstrap.Calendar = function(config){
  24     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
  25      this.addEvents({
  26         /**
  27              * @event select
  28              * Fires when a date is selected
  29              * @param {DatePicker} this
  30              * @param {Date} date The selected date
  31              */
  32         'select': true,
  33         /**
  34              * @event monthchange
  35              * Fires when the displayed month changes
  36              * @param {DatePicker} this
  37              * @param {Date} date The selected month
  38              */
  39         'monthchange': true,
  40         /**
  41              * @event evententer
  42              * Fires when mouse over an event
  43              * @param {Calendar} this
  44              * @param {event} Event
  45              */
  46         'evententer': true,
  47         /**
  48              * @event eventleave
  49              * Fires when the mouse leaves an
  50              * @param {Calendar} this
  51              * @param {event}
  52              */
  53         'eventleave': true,
  54         /**
  55              * @event eventclick
  56              * Fires when the mouse click an
  57              * @param {Calendar} this
  58              * @param {event}
  59              */
  60         'eventclick': true
  61
  62     });
  63
  64 };
  65
  66 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
  67
  68      /**
  69      * @cfg {Number} startDay
  70      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
  71      */
  72     startDay : 0,
  73
  74     loadMask : false,
  75
  76     header : false,
  77
  78     getAutoCreate : function(){
  79
  80
  81         var fc_button = function(name, corner, style, content ) {
  82             return Roo.apply({},{
  83                 tag : 'span',
  84                 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
  85                          (corner.length ?
  86                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
  87                             ''
  88                         ),
  89                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
  90                 unselectable: 'on'
  91             });
  92         };
  93
  94         var header = {};
  95
  96         if(!this.header){
  97             header = {
  98                 tag : 'table',
  99                 cls : 'fc-header',
 100                 style : 'width:100%',
 101                 cn : [
 102                     {
 103                         tag: 'tr',
 104                         cn : [
 105                             {
 106                                 tag : 'td',
 107                                 cls : 'fc-header-left',
 108                                 cn : [
 109                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
 110                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
 111                                     { tag: 'span', cls: 'fc-header-space' },
 112                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
 113
 114
 115                                 ]
 116                             },
 117
 118                             {
 119                                 tag : 'td',
 120                                 cls : 'fc-header-center',
 121                                 cn : [
 122                                     {
 123                                         tag: 'span',
 124                                         cls: 'fc-header-title',
 125                                         cn : {
 126                                             tag: 'H2',
 127                                             html : 'month / year'
 128                                         }
 129                                     }
 130
 131                                 ]
 132                             },
 133                             {
 134                                 tag : 'td',
 135                                 cls : 'fc-header-right',
 136                                 cn : [
 137                               /*      fc_button('month', 'left', '', 'month' ),
 138                                     fc_button('week', '', '', 'week' ),
 139                                     fc_button('day', 'right', '', 'day' )
 140                                 */
 141
 142                                 ]
 143                             }
 144
 145                         ]
 146                     }
 147                 ]
 148             };
 149         }
 150
 151         header = this.header;
 152
 153
 154         var cal_heads = function() {
 155             var ret = [];
 156             // fixme - handle this.
 157
 158             for (var i =0; i < Date.dayNames.length; i++) {
 159                 var d = Date.dayNames[i];
 160                 ret.push({
 161                     tag: 'th',
 162                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
 163                     html : d.substring(0,3)
 164                 });
 165
 166             }
 167             ret[0].cls += ' fc-first';
 168             ret[6].cls += ' fc-last';
 169             return ret;
 170         };
 171         var cal_cell = function(n) {
 172             return  {
 173                 tag: 'td',
 174                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
 175                 cn : [
 176                     {
 177                         cn : [
 178                             {
 179                                 cls: 'fc-day-number',
 180                                 html: 'D'
 181                             },
 182                             {
 183                                 cls: 'fc-day-content',
 184
 185                                 cn : [
 186                                      {
 187                                         style: 'position: relative;' // height: 17px;
 188                                     }
 189                                 ]
 190                             }
 191
 192
 193                         ]
 194                     }
 195                 ]
 196
 197             }
 198         };
 199         var cal_rows = function() {
 200
 201             var ret = [];
 202             for (var r = 0; r < 6; r++) {
 203                 var row= {
 204                     tag : 'tr',
 205                     cls : 'fc-week',
 206                     cn : []
 207                 };
 208
 209                 for (var i =0; i < Date.dayNames.length; i++) {
 210                     var d = Date.dayNames[i];
 211                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
 212
 213                 }
 214                 row.cn[0].cls+=' fc-first';
 215                 row.cn[0].cn[0].style = 'min-height:90px';
 216                 row.cn[6].cls+=' fc-last';
 217                 ret.push(row);
 218
 219             }
 220             ret[0].cls += ' fc-first';
 221             ret[4].cls += ' fc-prev-last';
 222             ret[5].cls += ' fc-last';
 223             return ret;
 224
 225         };
 226
 227         var cal_table = {
 228             tag: 'table',
 229             cls: 'fc-border-separate',
 230             style : 'width:100%',
 231             cellspacing  : 0,
 232             cn : [
 233                 {
 234                     tag: 'thead',
 235                     cn : [
 236                         {
 237                             tag: 'tr',
 238                             cls : 'fc-first fc-last',
 239                             cn : cal_heads()
 240                         }
 241                     ]
 242                 },
 243                 {
 244                     tag: 'tbody',
 245                     cn : cal_rows()
 246                 }
 247
 248             ]
 249         };
 250
 251          var cfg = {
 252             cls : 'fc fc-ltr',
 253             cn : [
 254                 header,
 255                 {
 256                     cls : 'fc-content',
 257                     style : "position: relative;",
 258                     cn : [
 259                         {
 260                             cls : 'fc-view fc-view-month fc-grid',
 261                             style : 'position: relative',
 262                             unselectable : 'on',
 263                             cn : [
 264                                 {
 265                                     cls : 'fc-event-container',
 266                                     style : 'position:absolute;z-index:8;top:0;left:0;'
 267                                 },
 268                                 cal_table
 269                             ]
 270                         }
 271                     ]
 272
 273                 }
 274            ]
 275
 276         };
 277
 278
 279
 280         return cfg;
 281     },
 282
 283
 284     initEvents : function()
 285     {
 286         if(!this.store){
 287             throw "can not find store for calendar";
 288         }
 289
 290         var mark = {
 291             tag: "div",
 292             cls:"x-dlg-mask",
 293             style: "text-align:center",
 294             cn: [
 295                 {
 296                     tag: "div",
 297                     style: "background-color:white;width:50%;margin:250 auto",
 298                     cn: [
 299                         {
 300                             tag: "img",
 301                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
 302                         },
 303                         {
 304                             tag: "span",
 305                             html: "Loading"
 306                         }
 307
 308                     ]
 309                 }
 310             ]
 311         };
 312         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
 313
 314         var size = this.el.select('.fc-content', true).first().getSize();
 315         this.maskEl.setSize(size.width, size.height);
 316         this.maskEl.enableDisplayMode("block");
 317         if(!this.loadMask){
 318             this.maskEl.hide();
 319         }
 320
 321         this.store = Roo.factory(this.store, Roo.data);
 322         this.store.on('load', this.onLoad, this);
 323         this.store.on('beforeload', this.onBeforeLoad, this);
 324
 325         this.resize();
 326
 327         this.cells = this.el.select('.fc-day',true);
 328         //Roo.log(this.cells);
 329         this.textNodes = this.el.query('.fc-day-number');
 330         this.cells.addClassOnOver('fc-state-hover');
 331
 332         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
 333         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
 334         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
 335         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
 336
 337         this.on('monthchange', this.onMonthChange, this);
 338
 339         this.update(new Date().clearTime());
 340     },
 341
 342     resize : function() {
 343         var sz  = this.el.getSize();
 344
 345         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
 346         this.el.select('.fc-day-content div',true).setHeight(34);
 347     },
 348
 349
 350     // private
 351     showPrevMonth : function(e){
 352         this.update(this.activeDate.add("mo", -1));
 353     },
 354     showToday : function(e){
 355         this.update(new Date().clearTime());
 356     },
 357     // private
 358     showNextMonth : function(e){
 359         this.update(this.activeDate.add("mo", 1));
 360     },
 361
 362     // private
 363     showPrevYear : function(){
 364         this.update(this.activeDate.add("y", -1));
 365     },
 366
 367     // private
 368     showNextYear : function(){
 369         this.update(this.activeDate.add("y", 1));
 370     },
 371
 372
 373    // private
 374     update : function(date)
 375     {
 376         var vd = this.activeDate;
 377         this.activeDate = date;
 378 //        if(vd && this.el){
 379 //            var t = date.getTime();
 380 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
 381 //                Roo.log('using add remove');
 382 //
 383 //                this.fireEvent('monthchange', this, date);
 384 //
 385 //                this.cells.removeClass("fc-state-highlight");
 386 //                this.cells.each(function(c){
 387 //                   if(c.dateValue == t){
 388 //                       c.addClass("fc-state-highlight");
 389 //                       setTimeout(function(){
 390 //                            try{c.dom.firstChild.focus();}catch(e){}
 391 //                       }, 50);
 392 //                       return false;
 393 //                   }
 394 //                   return true;
 395 //                });
 396 //                return;
 397 //            }
 398 //        }
 399
 400         var days = date.getDaysInMonth();
 401
 402         var firstOfMonth = date.getFirstDateOfMonth();
 403         var startingPos = firstOfMonth.getDay()-this.startDay;
 404
 405         if(startingPos < this.startDay){
 406             startingPos += 7;
 407         }
 408
 409         var pm = date.add(Date.MONTH, -1);
 410         var prevStart = pm.getDaysInMonth()-startingPos;
 411 //
 412         this.cells = this.el.select('.fc-day',true);
 413         this.textNodes = this.el.query('.fc-day-number');
 414         this.cells.addClassOnOver('fc-state-hover');
 415
 416         var cells = this.cells.elements;
 417         var textEls = this.textNodes;
 418
 419         Roo.each(cells, function(cell){
 420             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
 421         });
 422
 423         days += startingPos;
 424
 425         // convert everything to numbers so it's fast
 426         var day = 86400000;
 427         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
 428         //Roo.log(d);
 429         //Roo.log(pm);
 430         //Roo.log(prevStart);
 431
 432         var today = new Date().clearTime().getTime();
 433         var sel = date.clearTime().getTime();
 434         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
 435         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
 436         var ddMatch = this.disabledDatesRE;
 437         var ddText = this.disabledDatesText;
 438         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
 439         var ddaysText = this.disabledDaysText;
 440         var format = this.format;
 441
 442         var setCellClass = function(cal, cell){
 443             cell.row = 0;
 444             cell.events = [];
 445             cell.more = [];
 446             //Roo.log('set Cell Class');
 447             cell.title = "";
 448             var t = d.getTime();
 449
 450             //Roo.log(d);
 451
 452             cell.dateValue = t;
 453             if(t == today){
 454                 cell.className += " fc-today";
 455                 cell.className += " fc-state-highlight";
 456                 cell.title = cal.todayText;
 457             }
 458             if(t == sel){
 459                 // disable highlight in other month..
 460                 //cell.className += " fc-state-highlight";
 461
 462             }
 463             // disabling
 464             if(t < min) {
 465                 cell.className = " fc-state-disabled";
 466                 cell.title = cal.minText;
 467                 return;
 468             }
 469             if(t > max) {
 470                 cell.className = " fc-state-disabled";
 471                 cell.title = cal.maxText;
 472                 return;
 473             }
 474             if(ddays){
 475                 if(ddays.indexOf(d.getDay()) != -1){
 476                     cell.title = ddaysText;
 477                     cell.className = " fc-state-disabled";
 478                 }
 479             }
 480             if(ddMatch && format){
 481                 var fvalue = d.dateFormat(format);
 482                 if(ddMatch.test(fvalue)){
 483                     cell.title = ddText.replace("%0", fvalue);
 484                     cell.className = " fc-state-disabled";
 485                 }
 486             }
 487
 488             if (!cell.initialClassName) {
 489                 cell.initialClassName = cell.dom.className;
 490             }
 491
 492             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
 493         };
 494
 495         var i = 0;
 496
 497         for(; i < startingPos; i++) {
 498             textEls[i].innerHTML = (++prevStart);
 499             d.setDate(d.getDate()+1);
 500
 501             cells[i].className = "fc-past fc-other-month";
 502             setCellClass(this, cells[i]);
 503         }
 504
 505         var intDay = 0;
 506
 507         for(; i < days; i++){
 508             intDay = i - startingPos + 1;
 509             textEls[i].innerHTML = (intDay);
 510             d.setDate(d.getDate()+1);
 511
 512             cells[i].className = ''; // "x-date-active";
 513             setCellClass(this, cells[i]);
 514         }
 515         var extraDays = 0;
 516
 517         for(; i < 42; i++) {
 518             textEls[i].innerHTML = (++extraDays);
 519             d.setDate(d.getDate()+1);
 520
 521             cells[i].className = "fc-future fc-other-month";
 522             setCellClass(this, cells[i]);
 523         }
 524
 525         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
 526
 527         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
 528
 529         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
 530         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
 531
 532         if(totalRows != 6){
 533             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
 534             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
 535         }
 536
 537         this.fireEvent('monthchange', this, date);
 538
 539
 540         /*
 541         if(!this.internalRender){
 542             var main = this.el.dom.firstChild;
 543             var w = main.offsetWidth;
 544             this.el.setWidth(w + this.el.getBorderWidth("lr"));
 545             Roo.fly(main).setWidth(w);
 546             this.internalRender = true;
 547             // opera does not respect the auto grow header center column
 548             // then, after it gets a width opera refuses to recalculate
 549             // without a second pass
 550             if(Roo.isOpera && !this.secondPass){
 551                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
 552                 this.secondPass = true;
 553                 this.update.defer(10, this, [date]);
 554             }
 555         }
 556         */
 557
 558     },
 559
 560     findCell : function(dt) {
 561         dt = dt.clearTime().getTime();
 562         var ret = false;
 563         this.cells.each(function(c){
 564             //Roo.log("check " +c.dateValue + '?=' + dt);
 565             if(c.dateValue == dt){
 566                 ret = c;
 567                 return false;
 568             }
 569             return true;
 570         });
 571
 572         return ret;
 573     },
 574
 575     findCells : function(ev) {
 576         var s = ev.start.clone().clearTime().getTime();
 577        // Roo.log(s);
 578         var e= ev.end.clone().clearTime().getTime();
 579        // Roo.log(e);
 580         var ret = [];
 581         this.cells.each(function(c){
 582              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
 583
 584             if(c.dateValue > e){
 585                 return ;
 586             }
 587             if(c.dateValue < s){
 588                 return ;
 589             }
 590             ret.push(c);
 591         });
 592
 593         return ret;
 594     },
 595
 596 //    findBestRow: function(cells)
 597 //    {
 598 //        var ret = 0;
 599 //
 600 //        for (var i =0 ; i < cells.length;i++) {
 601 //            ret  = Math.max(cells[i].rows || 0,ret);
 602 //        }
 603 //        return ret;
 604 //
 605 //    },
 606
 607
 608     addItem : function(ev)
 609     {
 610         // look for vertical location slot in
 611         var cells = this.findCells(ev);
 612
 613 //        ev.row = this.findBestRow(cells);
 614
 615         // work out the location.
 616
 617         var crow = false;
 618         var rows = [];
 619         for(var i =0; i < cells.length; i++) {
 620
 621             cells[i].row = cells[0].row;
 622
 623             if(i == 0){
 624                 cells[i].row = cells[i].row + 1;
 625             }
 626
 627             if (!crow) {
 628                 crow = {
 629                     start : cells[i],
 630                     end :  cells[i]
 631                 };
 632                 continue;
 633             }
 634             if (crow.start.getY() == cells[i].getY()) {
 635                 // on same row.
 636                 crow.end = cells[i];
 637                 continue;
 638             }
 639             // different row.
 640             rows.push(crow);
 641             crow = {
 642                 start: cells[i],
 643                 end : cells[i]
 644             };
 645
 646         }
 647
 648         rows.push(crow);
 649         ev.els = [];
 650         ev.rows = rows;
 651         ev.cells = cells;
 652
 653         cells[0].events.push(ev);
 654
 655         this.calevents.push(ev);
 656     },
 657
 658     clearEvents: function() {
 659
 660         if(!this.calevents){
 661             return;
 662         }
 663
 664         Roo.each(this.cells.elements, function(c){
 665             c.row = 0;
 666             c.events = [];
 667             c.more = [];
 668         });
 669
 670         Roo.each(this.calevents, function(e) {
 671             Roo.each(e.els, function(el) {
 672                 el.un('mouseenter' ,this.onEventEnter, this);
 673                 el.un('mouseleave' ,this.onEventLeave, this);
 674                 el.remove();
 675             },this);
 676         },this);
 677
 678         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
 679             e.remove();
 680         });
 681
 682     },
 683
 684     renderEvents: function()
 685     {
 686         var _this = this;
 687
 688         this.cells.each(function(c) {
 689
 690             if(c.row < 5){
 691                 return;
 692             }
 693
 694             var ev = c.events;
 695
 696             var r = 4;
 697             if(c.row != c.events.length){
 698                 r = 4 - (4 - (c.row - c.events.length));
 699             }
 700
 701             c.events = ev.slice(0, r);
 702             c.more = ev.slice(r);
 703
 704             if(c.more.length && c.more.length == 1){
 705                 c.events.push(c.more.pop());
 706             }
 707
 708             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
 709
 710         });
 711
 712         this.cells.each(function(c) {
 713
 714             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
 715
 716
 717             for (var e = 0; e < c.events.length; e++){
 718                 var ev = c.events[e];
 719                 var rows = ev.rows;
 720
 721                 for(var i = 0; i < rows.length; i++) {
 722
 723                     // how many rows should it span..
 724
 725                     var  cfg = {
 726                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
 727                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
 728
 729                         unselectable : "on",
 730                         cn : [
 731                             {
 732                                 cls: 'fc-event-inner',
 733                                 cn : [
 734     //                                {
 735     //                                  tag:'span',
 736     //                                  cls: 'fc-event-time',
 737     //                                  html : cells.length > 1 ? '' : ev.time
 738     //                                },
 739                                     {
 740                                       tag:'span',
 741                                       cls: 'fc-event-title',
 742                                       html : String.format('{0}', ev.title)
 743                                     }
 744
 745
 746                                 ]
 747                             },
 748                             {
 749                                 cls: 'ui-resizable-handle ui-resizable-e',
 750                                 html : '&nbsp;&nbsp;&nbsp'
 751                             }
 752
 753                         ]
 754                     };
 755
 756                     if (i == 0) {
 757                         cfg.cls += ' fc-event-start';
 758                     }
 759                     if ((i+1) == rows.length) {
 760                         cfg.cls += ' fc-event-end';
 761                     }
 762
 763                     var ctr = _this.el.select('.fc-event-container',true).first();
 764                     var cg = ctr.createChild(cfg);
 765
 766                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
 767                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
 768
 769                     var r = (c.more.length) ? 1 : 0;
 770                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
 771                     cg.setWidth(ebox.right - sbox.x -2);
 772
 773                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
 774                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
 775                     cg.on('click', _this.onEventClick, _this, ev);
 776
 777                     ev.els.push(cg);
 778
 779                 }
 780
 781             }
 782
 783
 784             if(c.more.length){
 785                 var  cfg = {
 786                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
 787                     style : 'position: absolute',
 788                     unselectable : "on",
 789                     cn : [
 790                         {
 791                             cls: 'fc-event-inner',
 792                             cn : [
 793                                 {
 794                                   tag:'span',
 795                                   cls: 'fc-event-title',
 796                                   html : 'More'
 797                                 }
 798
 799
 800                             ]
 801                         },
 802                         {
 803                             cls: 'ui-resizable-handle ui-resizable-e',
 804                             html : '&nbsp;&nbsp;&nbsp'
 805                         }
 806
 807                     ]
 808                 };
 809
 810                 var ctr = _this.el.select('.fc-event-container',true).first();
 811                 var cg = ctr.createChild(cfg);
 812
 813                 var sbox = c.select('.fc-day-content',true).first().getBox();
 814                 var ebox = c.select('.fc-day-content',true).first().getBox();
 815                 //Roo.log(cg);
 816                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
 817                 cg.setWidth(ebox.right - sbox.x -2);
 818
 819                 cg.on('click', _this.onMoreEventClick, _this, c.more);
 820
 821             }
 822
 823         });
 824
 825
 826
 827     },
 828
 829     onEventEnter: function (e, el,event,d) {
 830         this.fireEvent('evententer', this, el, event);
 831     },
 832
 833     onEventLeave: function (e, el,event,d) {
 834         this.fireEvent('eventleave', this, el, event);
 835     },
 836
 837     onEventClick: function (e, el,event,d) {
 838         this.fireEvent('eventclick', this, el, event);
 839     },
 840
 841     onMonthChange: function () {
 842         this.store.load();
 843     },
 844
 845     onMoreEventClick: function(e, el, more)
 846     {
 847         var _this = this;
 848
 849         this.calpopover.placement = 'right';
 850         this.calpopover.setTitle('More');
 851
 852         this.calpopover.setContent('');
 853
 854         var ctr = this.calpopover.el.select('.popover-content', true).first();
 855
 856         Roo.each(more, function(m){
 857             var cfg = {
 858                 cls : 'fc-event-hori fc-event-draggable',
 859                 html : m.title
 860             };
 861             var cg = ctr.createChild(cfg);
 862
 863             cg.on('click', _this.onEventClick, _this, m);
 864         });
 865
 866         this.calpopover.show(el);
 867
 868
 869     },
 870
 871     onLoad: function ()
 872     {
 873         this.calevents = [];
 874         var cal = this;
 875
 876         if(this.store.getCount() > 0){
 877             this.store.data.each(function(d){
 878                cal.addItem({
 879                     id : d.data.id,
 880                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
 881                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
 882                     time : d.data.start_time,
 883                     title : d.data.title,
 884                     description : d.data.description,
 885                     venue : d.data.venue
 886                 });
 887             });
 888         }
 889
 890         this.renderEvents();
 891
 892         if(this.calevents.length && this.loadMask){
 893             this.maskEl.hide();
 894         }
 895     },
 896
 897     onBeforeLoad: function()
 898     {
 899         this.clearEvents();
 900         if(this.loadMask){
 901             this.maskEl.show();
 902         }
 903     }
 904 });
 905
 906
 907