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: rootURL + '/roojs1/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
 444             //Roo.log('set Cell Class');
 445             cell.title = "";
 446             var t = d.getTime();
 447
 448             //Roo.log(d);
 449
 450             cell.dateValue = t;
 451             if(t == today){
 452                 cell.className += " fc-today";
 453                 cell.className += " fc-state-highlight";
 454                 cell.title = cal.todayText;
 455             }
 456             if(t == sel){
 457                 // disable highlight in other month..
 458                 //cell.className += " fc-state-highlight";
 459
 460             }
 461             // disabling
 462             if(t < min) {
 463                 cell.className = " fc-state-disabled";
 464                 cell.title = cal.minText;
 465                 return;
 466             }
 467             if(t > max) {
 468                 cell.className = " fc-state-disabled";
 469                 cell.title = cal.maxText;
 470                 return;
 471             }
 472             if(ddays){
 473                 if(ddays.indexOf(d.getDay()) != -1){
 474                     cell.title = ddaysText;
 475                     cell.className = " fc-state-disabled";
 476                 }
 477             }
 478             if(ddMatch && format){
 479                 var fvalue = d.dateFormat(format);
 480                 if(ddMatch.test(fvalue)){
 481                     cell.title = ddText.replace("%0", fvalue);
 482                     cell.className = " fc-state-disabled";
 483                 }
 484             }
 485
 486             if (!cell.initialClassName) {
 487                 cell.initialClassName = cell.dom.className;
 488             }
 489
 490             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
 491         };
 492
 493         var i = 0;
 494
 495         for(; i < startingPos; i++) {
 496             textEls[i].innerHTML = (++prevStart);
 497             d.setDate(d.getDate()+1);
 498
 499             cells[i].className = "fc-past fc-other-month";
 500             setCellClass(this, cells[i]);
 501         }
 502
 503         var intDay = 0;
 504
 505         for(; i < days; i++){
 506             intDay = i - startingPos + 1;
 507             textEls[i].innerHTML = (intDay);
 508             d.setDate(d.getDate()+1);
 509
 510             cells[i].className = ''; // "x-date-active";
 511             setCellClass(this, cells[i]);
 512         }
 513         var extraDays = 0;
 514
 515         for(; i < 42; i++) {
 516             textEls[i].innerHTML = (++extraDays);
 517             d.setDate(d.getDate()+1);
 518
 519             cells[i].className = "fc-future fc-other-month";
 520             setCellClass(this, cells[i]);
 521         }
 522
 523         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
 524
 525         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
 526
 527         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
 528         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
 529
 530         if(totalRows != 6){
 531             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
 532             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
 533         }
 534
 535         this.fireEvent('monthchange', this, date);
 536
 537
 538         /*
 539         if(!this.internalRender){
 540             var main = this.el.dom.firstChild;
 541             var w = main.offsetWidth;
 542             this.el.setWidth(w + this.el.getBorderWidth("lr"));
 543             Roo.fly(main).setWidth(w);
 544             this.internalRender = true;
 545             // opera does not respect the auto grow header center column
 546             // then, after it gets a width opera refuses to recalculate
 547             // without a second pass
 548             if(Roo.isOpera && !this.secondPass){
 549                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
 550                 this.secondPass = true;
 551                 this.update.defer(10, this, [date]);
 552             }
 553         }
 554         */
 555
 556     },
 557
 558     findCell : function(dt) {
 559         dt = dt.clearTime().getTime();
 560         var ret = false;
 561         this.cells.each(function(c){
 562             //Roo.log("check " +c.dateValue + '?=' + dt);
 563             if(c.dateValue == dt){
 564                 ret = c;
 565                 return false;
 566             }
 567             return true;
 568         });
 569
 570         return ret;
 571     },
 572
 573     findCells : function(ev) {
 574         var s = ev.start.clone().clearTime().getTime();
 575        // Roo.log(s);
 576         var e= ev.end.clone().clearTime().getTime();
 577        // Roo.log(e);
 578         var ret = [];
 579         this.cells.each(function(c){
 580              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
 581
 582             if(c.dateValue > e){
 583                 return ;
 584             }
 585             if(c.dateValue < s){
 586                 return ;
 587             }
 588             ret.push(c);
 589         });
 590
 591         return ret;
 592     },
 593
 594 //    findBestRow: function(cells)
 595 //    {
 596 //        var ret = 0;
 597 //
 598 //        for (var i =0 ; i < cells.length;i++) {
 599 //            ret  = Math.max(cells[i].rows || 0,ret);
 600 //        }
 601 //        return ret;
 602 //
 603 //    },
 604
 605
 606     addItem : function(ev)
 607     {
 608         // look for vertical location slot in
 609         var cells = this.findCells(ev);
 610
 611 //        ev.row = this.findBestRow(cells);
 612
 613         // work out the location.
 614
 615         var crow = false;
 616         var rows = [];
 617         for(var i =0; i < cells.length; i++) {
 618             cells[i].row = (typeof(cells[i].row) == 'undefined') ? 1 : (cells[i].row + 1);
 619             if (!crow) {
 620                 crow = {
 621                     start : cells[i],
 622                     end :  cells[i]
 623                 };
 624                 continue;
 625             }
 626             if (crow.start.getY() == cells[i].getY()) {
 627                 // on same row.
 628                 crow.end = cells[i];
 629                 continue;
 630             }
 631             // different row.
 632             rows.push(crow);
 633             crow = {
 634                 start: cells[i],
 635                 end : cells[i]
 636             };
 637
 638         }
 639
 640         rows.push(crow);
 641         ev.els = [];
 642         ev.rows = rows;
 643         ev.cells = cells;
 644
 645 //        if((typeof(cells[0].events) == 'undefined')){
 646 //            cells[0].events = [];
 647 //        }
 648 //
 649 //        cells[0].events.push(ev);
 650 //        ev.rendered = false;
 651 //        for (var i = 0; i < cells.length;i++) {
 652 //            cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
 653 //
 654 //        }
 655
 656         this.calevents.push(ev);
 657     },
 658
 659     clearEvents: function() {
 660
 661         if(!this.calevents){
 662             return;
 663         }
 664
 665         Roo.each(this.cells.elements, function(c){
 666             c.rows = [];
 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         // first make sure there is enough space..
 687         this.cells.each(function(c) {
 688 //            c.rows = [];
 689             c.more = [];
 690         });
 691
 692         for (var e = 0; e < this.calevents.length; e++) {
 693
 694             var ev = this.calevents[e];
 695             var cells = ev.cells;
 696             var rows = ev.rows;
 697
 698             for(var i = 0; i < cells.length; i++){
 699
 700                 var cbox = this.cells.item(this.cells.indexOf(cells[i]));
 701
 702                 if(cells.length < 2 && cbox.rows.length > 3){
 703                     cbox.more.push(ev);
 704                     continue;
 705                 }
 706
 707                 cbox.rows.push(ev);
 708             }
 709         }
 710
 711         var _this = this;
 712
 713         this.cells.each(function(c) {
 714             if(c.more.length && c.more.length == 1){
 715                 c.rows.push(c.more.pop());
 716             }
 717
 718             var r = (c.more.length) ? c.rows.length + 1 : c.rows.length;
 719             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, r * 20));
 720
 721
 722             for (var e = 0; e < c.rows.length; e++){
 723                 var ev = c.rows[e];
 724
 725                 if(ev.rendered){
 726                     continue;
 727                 }
 728
 729                 var cells = ev.cells;
 730                 var rows = ev.rows;
 731
 732                 for(var i = 0; i < rows.length; i++) {
 733
 734                     // how many rows should it span..
 735
 736                     var  cfg = {
 737                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
 738                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
 739
 740                         unselectable : "on",
 741                         cn : [
 742                             {
 743                                 cls: 'fc-event-inner',
 744                                 cn : [
 745     //                                {
 746     //                                  tag:'span',
 747     //                                  cls: 'fc-event-time',
 748     //                                  html : cells.length > 1 ? '' : ev.time
 749     //                                },
 750                                     {
 751                                       tag:'span',
 752                                       cls: 'fc-event-title',
 753                                       html : String.format('{0}', ev.title)
 754                                     }
 755
 756
 757                                 ]
 758                             },
 759                             {
 760                                 cls: 'ui-resizable-handle ui-resizable-e',
 761                                 html : '&nbsp;&nbsp;&nbsp'
 762                             }
 763
 764                         ]
 765                     };
 766
 767                     if (i == 0) {
 768                         cfg.cls += ' fc-event-start';
 769                     }
 770                     if ((i+1) == rows.length) {
 771                         cfg.cls += ' fc-event-end';
 772                     }
 773
 774                     var ctr = _this.el.select('.fc-event-container',true).first();
 775                     var cg = ctr.createChild(cfg);
 776
 777                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
 778                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
 779
 780                     cg.setXY([sbox.x +2, sbox.y +(e * 20)]);
 781                     cg.setWidth(ebox.right - sbox.x -2);
 782
 783                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
 784                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
 785                     cg.on('click', _this.onEventClick, _this, ev);
 786
 787                     ev.els.push(cg);
 788
 789                     ev.rendered = true;
 790                 }
 791
 792             }
 793
 794
 795             if(c.more.length){
 796                 var  cfg = {
 797                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
 798                     style : 'position: absolute',
 799                     unselectable : "on",
 800                     cn : [
 801                         {
 802                             cls: 'fc-event-inner',
 803                             cn : [
 804                                 {
 805                                   tag:'span',
 806                                   cls: 'fc-event-title',
 807                                   html : 'More'
 808                                 }
 809
 810
 811                             ]
 812                         },
 813                         {
 814                             cls: 'ui-resizable-handle ui-resizable-e',
 815                             html : '&nbsp;&nbsp;&nbsp'
 816                         }
 817
 818                     ]
 819                 };
 820
 821                 var ctr = _this.el.select('.fc-event-container',true).first();
 822                 var cg = ctr.createChild(cfg);
 823
 824                 var sbox = c.select('.fc-day-content',true).first().getBox();
 825                 var ebox = c.select('.fc-day-content',true).first().getBox();
 826                 //Roo.log(cg);
 827                 cg.setXY([sbox.x +2, sbox.y +(c.rows.length * 20)]);
 828                 cg.setWidth(ebox.right - sbox.x -2);
 829
 830                 cg.on('click', _this.onMoreEventClick, _this, c.more);
 831
 832             }
 833
 834         });
 835
 836
 837
 838     },
 839
 840     onEventEnter: function (e, el,event,d) {
 841         this.fireEvent('evententer', this, el, event);
 842     },
 843
 844     onEventLeave: function (e, el,event,d) {
 845         this.fireEvent('eventleave', this, el, event);
 846     },
 847
 848     onEventClick: function (e, el,event,d) {
 849         this.fireEvent('eventclick', this, el, event);
 850     },
 851
 852     onMonthChange: function () {
 853         this.store.load();
 854     },
 855
 856     onMoreEventClick: function(e, el, more)
 857     {
 858         var _this = this;
 859
 860         this.calpopover.placement = 'right';
 861         this.calpopover.setTitle('More');
 862
 863         this.calpopover.setContent('');
 864
 865         var ctr = this.calpopover.el.select('.popover-content', true).first();
 866
 867         Roo.each(more, function(m){
 868             var cfg = {
 869                 cls : 'fc-event-hori fc-event-draggable',
 870                 html : m.title
 871             }
 872             var cg = ctr.createChild(cfg);
 873
 874             cg.on('click', _this.onEventClick, _this, m);
 875         });
 876
 877         this.calpopover.show(el);
 878
 879
 880     },
 881
 882     onLoad: function ()
 883     {
 884         this.calevents = [];
 885         var cal = this;
 886
 887         if(this.store.getCount() > 0){
 888             this.store.data.each(function(d){
 889                cal.addItem({
 890                     id : d.data.id,
 891                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
 892                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
 893                     time : d.data.start_time,
 894                     title : d.data.title,
 895                     description : d.data.description,
 896                     venue : d.data.venue
 897                 });
 898             });
 899         }
 900
 901         this.renderEvents();
 902
 903         if(this.calevents.length && this.loadMask){
 904             this.maskEl.hide();
 905         }
 906     },
 907
 908     onBeforeLoad: function()
 909     {
 910         this.clearEvents();
 911         if(this.loadMask){
 912             this.maskEl.show();
 913         }
 914     }
 915 });
 916
 917
 918