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     findStartCell : function(ev) {
 606         var s = ev.start.clone().clearTime().getTime();
 607
 608         var ret = false;
 609         this.cells.each(function(c){
 610              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
 611
 612             if(c.dateValue != s){
 613                 return ;
 614             }
 615             ret = c;
 616         });
 617
 618         return ret;
 619     },
 620
 621     addItem : function(ev)
 622     {
 623         Roo.log(ev);
 624         // look for vertical location slot in
 625         var cells = this.findCells(ev);
 626
 627 //        ev.row = this.findBestRow(cells);
 628
 629         // work out the location.
 630
 631         var crow = false;
 632         var rows = [];
 633         for(var i =0; i < cells.length; i++) {
 634             if (!crow) {
 635                 crow = {
 636                     start : cells[i],
 637                     end :  cells[i]
 638                 };
 639                 continue;
 640             }
 641             if (crow.start.getY() == cells[i].getY()) {
 642                 // on same row.
 643                 crow.end = cells[i];
 644                 continue;
 645             }
 646             // different row.
 647             rows.push(crow);
 648             crow = {
 649                 start: cells[i],
 650                 end : cells[i]
 651             };
 652
 653         }
 654
 655         rows.push(crow);
 656         ev.els = [];
 657         ev.rows = rows;
 658         ev.cells = cells;
 659         ev.rendered = false;
 660 //        for (var i = 0; i < cells.length;i++) {
 661 //            cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
 662 //
 663 //        }
 664
 665         this.calevents.push(ev);
 666     },
 667
 668     clearEvents: function() {
 669
 670         if(!this.calevents){
 671             return;
 672         }
 673
 674         Roo.each(this.cells.elements, function(c){
 675             c.rows = [];
 676             c.more = [];
 677         });
 678
 679         Roo.each(this.calevents, function(e) {
 680             Roo.each(e.els, function(el) {
 681                 el.un('mouseenter' ,this.onEventEnter, this);
 682                 el.un('mouseleave' ,this.onEventLeave, this);
 683                 el.remove();
 684             },this);
 685         },this);
 686
 687         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
 688             e.remove();
 689         });
 690
 691     },
 692
 693     renderEvents: function()
 694     {
 695         // first make sure there is enough space..
 696         this.cells.each(function(c) {
 697             c.rows = [];
 698             c.more = [];
 699         });
 700
 701         for (var e = 0; e < this.calevents.length; e++) {
 702
 703             var ev = this.calevents[e];
 704             var cells = ev.cells;
 705             var rows = ev.rows;
 706
 707             for(var i = 0; i < cells.length; i++){
 708
 709                 var cbox = this.cells.item(this.cells.indexOf(cells[i]));
 710
 711                 if(cells.length < 2 && cbox.rows.length > 3){
 712                     cbox.more.push(ev);
 713                     continue;
 714                 }
 715
 716                 cbox.rows.push(ev);
 717             }
 718         }
 719
 720         var _this = this;
 721
 722         this.cells.each(function(c) {
 723             if(c.more.length && c.more.length == 1){
 724                 c.rows.push(c.more.pop());
 725             }
 726
 727             var r = (c.more.length) ? c.rows.length + 1 : c.rows.length;
 728             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, r * 20));
 729
 730
 731             for (var e = 0; e < c.rows.length; e++){
 732                 var ev = c.rows[e];
 733
 734                 if(ev.rendered){
 735                     continue;
 736                 }
 737
 738                 var cells = ev.cells;
 739                 var rows = ev.rows;
 740
 741                 for(var i = 0; i < rows.length; i++) {
 742
 743                     // how many rows should it span..
 744
 745                     var  cfg = {
 746                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
 747                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
 748
 749                         unselectable : "on",
 750                         cn : [
 751                             {
 752                                 cls: 'fc-event-inner',
 753                                 cn : [
 754     //                                {
 755     //                                  tag:'span',
 756     //                                  cls: 'fc-event-time',
 757     //                                  html : cells.length > 1 ? '' : ev.time
 758     //                                },
 759                                     {
 760                                       tag:'span',
 761                                       cls: 'fc-event-title',
 762                                       html : String.format('{0}', ev.title)
 763                                     }
 764
 765
 766                                 ]
 767                             },
 768                             {
 769                                 cls: 'ui-resizable-handle ui-resizable-e',
 770                                 html : '&nbsp;&nbsp;&nbsp'
 771                             }
 772
 773                         ]
 774                     };
 775
 776                     if (i == 0) {
 777                         cfg.cls += ' fc-event-start';
 778                     }
 779                     if ((i+1) == rows.length) {
 780                         cfg.cls += ' fc-event-end';
 781                     }
 782
 783                     var ctr = _this.el.select('.fc-event-container',true).first();
 784                     var cg = ctr.createChild(cfg);
 785
 786                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
 787                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
 788
 789                     cg.setXY([sbox.x +2, sbox.y +(e * 20)]);
 790                     cg.setWidth(ebox.right - sbox.x -2);
 791
 792                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
 793                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
 794                     cg.on('click', _this.onEventClick, _this, ev);
 795
 796                     ev.els.push(cg);
 797
 798                     ev.rendered = true;
 799                 }
 800
 801             }
 802
 803
 804             if(c.more.length){
 805                 var  cfg = {
 806                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
 807                     style : 'position: absolute',
 808                     unselectable : "on",
 809                     cn : [
 810                         {
 811                             cls: 'fc-event-inner',
 812                             cn : [
 813                                 {
 814                                   tag:'span',
 815                                   cls: 'fc-event-title',
 816                                   html : 'More'
 817                                 }
 818
 819
 820                             ]
 821                         },
 822                         {
 823                             cls: 'ui-resizable-handle ui-resizable-e',
 824                             html : '&nbsp;&nbsp;&nbsp'
 825                         }
 826
 827                     ]
 828                 };
 829
 830                 var ctr = _this.el.select('.fc-event-container',true).first();
 831                 var cg = ctr.createChild(cfg);
 832
 833                 var sbox = c.select('.fc-day-content',true).first().getBox();
 834                 var ebox = c.select('.fc-day-content',true).first().getBox();
 835                 //Roo.log(cg);
 836                 cg.setXY([sbox.x +2, sbox.y +(c.rows.length * 20)]);
 837                 cg.setWidth(ebox.right - sbox.x -2);
 838
 839                 cg.on('click', _this.onMoreEventClick, _this, c.more);
 840
 841             }
 842
 843         });
 844
 845
 846
 847     },
 848
 849     onEventEnter: function (e, el,event,d) {
 850         this.fireEvent('evententer', this, el, event);
 851     },
 852
 853     onEventLeave: function (e, el,event,d) {
 854         this.fireEvent('eventleave', this, el, event);
 855     },
 856
 857     onEventClick: function (e, el,event,d) {
 858         this.fireEvent('eventclick', this, el, event);
 859     },
 860
 861     onMonthChange: function () {
 862         this.store.load();
 863     },
 864
 865     onMoreEventClick: function(e, el, more)
 866     {
 867         var _this = this;
 868
 869         this.calpopover.placement = 'right';
 870         this.calpopover.setTitle('More');
 871
 872         this.calpopover.setContent('');
 873
 874         var ctr = this.calpopover.el.select('.popover-content', true).first();
 875
 876         Roo.each(more, function(m){
 877             var cfg = {
 878                 cls : 'fc-event-hori fc-event-draggable',
 879                 html : m.title
 880             }
 881             var cg = ctr.createChild(cfg);
 882
 883             cg.on('click', _this.onEventClick, _this, m);
 884         });
 885
 886         this.calpopover.show(el);
 887
 888
 889     },
 890
 891     onLoad: function ()
 892     {
 893         this.calevents = [];
 894         var cal = this;
 895
 896         if(this.store.getCount() > 0){
 897             this.store.data.each(function(d){
 898                cal.addItem({
 899                     id : d.data.id,
 900                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
 901                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
 902                     time : d.data.start_time,
 903                     title : d.data.title,
 904                     description : d.data.description,
 905                     venue : d.data.venue
 906                 });
 907             });
 908         }
 909
 910         this.renderEvents();
 911
 912         if(this.calevents.length && this.loadMask){
 913             this.maskEl.hide();
 914         }
 915     },
 916
 917     onBeforeLoad: function()
 918     {
 919         this.clearEvents();
 920         if(this.loadMask){
 921             this.maskEl.show();
 922         }
 923     }
 924 });
 925
 926
 927