git.roojs.org Git - roojs1/blob - roojs-calendar-debug.js

   1 /*
   2  * - LGPL
   3  *
   4  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
  16  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
  17  * @cfg {string} dataId cutomer id
  18  * @cfg {string} name Specifies name attribute
  19  * @cfg {string} tooltip  Text for the tooltip
  20  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
  21  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
  22
  23  * @constructor
  24  * Do not use directly - it does not do anything..
  25  * @param {Object} config The config object
  26  */
  27
  28
  29
  30 Roo.bootstrap.Component = function(config){
  31     Roo.bootstrap.Component.superclass.constructor.call(this, config);
  32
  33     this.addEvents({
  34         /**
  35          * @event childrenrendered
  36          * Fires when the children have been rendered..
  37          * @param {Roo.bootstrap.Component} this
  38          */
  39         "childrenrendered" : true
  40
  41
  42     });
  43
  44
  45 };
  46
  47 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
  48
  49
  50     allowDomMove : false, // to stop relocations in parent onRender...
  51
  52     cls : false,
  53
  54     style : false,
  55
  56     autoCreate : false,
  57
  58     tooltip : null,
  59     /**
  60      * Initialize Events for the element
  61      */
  62     initEvents : function() { },
  63
  64     xattr : false,
  65
  66     parentId : false,
  67
  68     can_build_overlaid : true,
  69
  70     container_method : false,
  71
  72     dataId : false,
  73
  74     name : false,
  75
  76     parent: function() {
  77         // returns the parent component..
  78         return Roo.ComponentMgr.get(this.parentId)
  79
  80
  81     },
  82
  83     // private
  84     onRender : function(ct, position)
  85     {
  86        // Roo.log("Call onRender: " + this.xtype);
  87
  88         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  89
  90         if(this.el){
  91             if (this.el.attr('xtype')) {
  92                 this.el.attr('xtypex', this.el.attr('xtype'));
  93                 this.el.dom.removeAttribute('xtype');
  94
  95                 this.initEvents();
  96             }
  97
  98             return;
  99         }
 100
 101
 102
 103         var cfg = Roo.apply({},  this.getAutoCreate());
 104
 105         cfg.id = this.id || Roo.id();
 106
 107         // fill in the extra attributes
 108         if (this.xattr && typeof(this.xattr) =='object') {
 109             for (var i in this.xattr) {
 110                 cfg[i] = this.xattr[i];
 111             }
 112         }
 113
 114         if(this.dataId){
 115             cfg.dataId = this.dataId;
 116         }
 117
 118         if (this.cls) {
 119             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
 120         }
 121
 122         if (this.style) { // fixme needs to support more complex style data.
 123             cfg.style = this.style;
 124         }
 125
 126         if(this.name){
 127             cfg.name = this.name;
 128         }
 129
 130         this.el = ct.createChild(cfg, position);
 131
 132         if (this.tooltip) {
 133             this.tooltipEl().attr('tooltip', this.tooltip);
 134         }
 135
 136         if(this.tabIndex !== undefined){
 137             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 138         }
 139
 140         this.initEvents();
 141
 142     },
 143     /**
 144      * Fetch the element to add children to
 145      * @return {Roo.Element} defaults to this.el
 146      */
 147     getChildContainer : function()
 148     {
 149         return this.el;
 150     },
 151     /**
 152      * Fetch the element to display the tooltip on.
 153      * @return {Roo.Element} defaults to this.el
 154      */
 155     tooltipEl : function()
 156     {
 157         return this.el;
 158     },
 159     /**
 160      * This is really a wrapper for addxtypeChild
 161      * it handles stuff relating to flexy:foreach / flexy:if
 162      * = some of our projects use a flat rendering of the output, and try and overlay it with dynamic data.
 163      *  -- this is a bit of a nightmare... and is even more confusing to debug..
 164      *
 165      *
 166      *
 167      */
 168     addxtype  : function(tree,cntr)
 169     {
 170         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 171
 172         var cn = Roo.factory(tree); // this is posibly the first of two times that the ctor get's called...
 173         cn.parentType = this.xtype; //??
 174         cn.parentId = this.id;
 175         if (typeof(cn.container_method) == 'string') {
 176             cntr = cn.container_method;
 177         }
 178
 179
 180         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
 181
 182         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
 183
 184         var build_from_html =  Roo.XComponent.build_from_html;
 185
 186         var is_body  = (tree.xtype == 'Body') ;
 187
 188         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
 189
 190         var self_cntr_el = Roo.get(this[cntr](false));
 191
 192         // do not try and build conditional elements
 193         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
 194             return false;
 195         }
 196
 197         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
 198             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
 199                 //return this.addxtypeChild(tree,cntr, is_body);
 200                 return this.addxtypeChild(tree, cntr, is_body);
 201             }
 202
 203             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
 204
 205             if(echild){
 206                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
 207             }
 208
 209             Roo.log('skipping render');
 210             return cn;
 211
 212         }
 213
 214         var ret = false;
 215         if (!build_from_html) {
 216             return false;
 217         }
 218
 219         // this i think handles overlaying multiple children of the same type
 220         // with the sam eelement.. - which might be buggy..
 221         while (true) {
 222             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 223
 224             if (!echild) {
 225                 break;
 226             }
 227
 228             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
 229                 break;
 230             }
 231
 232             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
 233         }
 234
 235         return ret;
 236     },
 237     /**
 238      * add a child to this element
 239      *   - turn the child.cfg into a child_instance
 240      *   - call child_instance.render( this { getContainerMethod()} )
 241      *   - loop through the children, and call addxtype.. (reall this) on newly created child.
 242      *
 243      */
 244
 245     addxtypeChild : function (tree, cntr, is_body)
 246     {
 247         Roo.debug && Roo.log('addxtypeChild:' + cntr);
 248         var cn = this;
 249         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 250
 251
 252         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
 253                     (typeof(tree['flexy:foreach']) != 'undefined');
 254
 255
 256
 257         skip_children = false;
 258         // render the element if it's not BODY.
 259         if (!is_body) {
 260
 261             // if parent was disabled, then do not try and create the children..
 262             if(!this[cntr](true)){
 263                 tree.items = [];
 264                 return tree;
 265             }
 266
 267             cn = Roo.factory(tree);
 268
 269             cn.parentType = this.xtype; //??
 270             cn.parentId = this.id;
 271
 272             var build_from_html =  Roo.XComponent.build_from_html;
 273
 274
 275             // does the container contain child eleemnts with 'xtype' attributes.
 276             // that match this xtype..
 277             // note - when we render we create these as well..
 278             // so we should check to see if body has xtype set.
 279             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
 280
 281                 var self_cntr_el = Roo.get(this[cntr](false));
 282                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 283                 if (echild) {
 284                     //Roo.log(Roo.XComponent.build_from_html);
 285                     //Roo.log("got echild:");
 286                     //Roo.log(echild);
 287                 }
 288                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
 289                 // and are not displayed -this causes this to use up the wrong element when matching.
 290                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
 291
 292
 293                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
 294                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
 295
 296
 297
 298                     cn.el = echild;
 299                   //  Roo.log("GOT");
 300                     //echild.dom.removeAttribute('xtype');
 301                 } else {
 302                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
 303                     Roo.debug && Roo.log(self_cntr_el);
 304                     Roo.debug && Roo.log(echild);
 305                     Roo.debug && Roo.log(cn);
 306                 }
 307             }
 308
 309
 310
 311             // if object has flexy:if - then it may or may not be rendered.
 312             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
 313                 // skip a flexy if element.
 314                 Roo.debug && Roo.log('skipping render');
 315                 Roo.debug && Roo.log(tree);
 316                 if (!cn.el) {
 317                     Roo.debug && Roo.log('skipping all children');
 318                     skip_children = true;
 319                 }
 320
 321              } else {
 322
 323                 // actually if flexy:foreach is found, we really want to create
 324                 // multiple copies here...
 325                 //Roo.log('render');
 326                 //Roo.log(this[cntr]());
 327                 // some elements do not have render methods.. like the layouts...
 328                 /*
 329                 if(this[cntr](true) === false){
 330                     cn.items = [];
 331                     return cn;
 332                 }
 333                 */
 334                 cn.render && cn.render(this[cntr](true));
 335
 336              }
 337             // then add the element..
 338         }
 339
 340
 341
 342
 343
 344         cn.addxtypeChildren(tree.items, skip_children);
 345         delete tree.items;
 346         return cn;
 347     },
 348
 349     /**
 350      *  add a number of children to this object,
 351      *     which in turn calls render...
 352      *
 353      */
 354
 355     addxtypeChildren: function(child_array, skip_children)
 356     {
 357         var nitems = [];
 358         if (!child_array || !child_array.length ) {
 359             this.items = nitems;
 360             return;
 361         }
 362
 363         for(var i =0;i < child_array.length;i++) {
 364             if (skip_children) {
 365                 break;
 366             }
 367             //  Roo.log(['add child', items[i]]);
 368             nitems.push(this.addxtype(Roo.apply({}, child_array[i])));
 369         }
 370         this.items = nitems;
 371
 372         this.fireEvent('childrenrendered', this);
 373
 374     },
 375
 376
 377
 378
 379
 380
 381     /**
 382      * xAddChildren - the 'sub-compentized' version of the above idea..
 383      */
 384     xAddChildren: function(child_array, skip_children)
 385     {
 386         var nitems = [];
 387         if (!child_array || !child_array.length ) {
 388             this.items = nitems;
 389             return;
 390         }
 391
 392         for(var i =0;i < child_array.length;i++) {
 393             if (skip_children) {
 394                 break;
 395             }
 396             //  Roo.log(['add child', items[i]]);
 397             nitems.push(this.xAdd(Roo.apply({}, child_array[i])));
 398         }
 399         this.items = nitems;
 400
 401         this.fireEvent('childrenrendered', this);
 402
 403     },
 404
 405
 406     /**
 407      * add a child to this element
 408      *   - turn the child.cfg into a child_instance
 409      *   - call child_instance.render( this { getContainerMethod()} )
 410      *   - loop through the children, and call addxtype.. (reall this) on newly created child.
 411      *
 412      *
 413      *
 414      */
 415
 416     xAdd : function (tree, cntr, is_body)
 417     {
 418         Roo.debug && Roo.log('xadd:' + cntr);
 419
 420         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 421
 422         var parent_ctnr = this[cntr](true);
 423         if(parent_ctnr === false){
 424             return false; // getChildContainer an return false explicitly to block children being added?
 425         }
 426         if(!parent_ctnr ){
 427             throw new Exception("could not find parent Container for item");
 428         }
 429
 430         var cn = Roo.factory(tree);
 431         // at this point items[] array may be set..
 432         // constructors should not really be building their children?
 433         cn.parentType = this.xtype; //??
 434         cn.parentId = this.id;
 435
 436
 437         cn.render && cn.render(parent_ctnr);
 438
 439         cn.xAddChildren(tree.items);
 440         delete tree.items; // not really needed?
 441         return cn;
 442     },
 443
 444
 445     /**
 446      * Set the element that will be used to show or hide
 447      */
 448     setVisibilityEl : function(el)
 449     {
 450         this.visibilityEl = el;
 451     },
 452
 453      /**
 454      * Get the element that will be used to show or hide
 455      */
 456     getVisibilityEl : function()
 457     {
 458         if (typeof(this.visibilityEl) == 'object') {
 459             return this.visibilityEl;
 460         }
 461
 462         if (typeof(this.visibilityEl) == 'string') {
 463             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
 464         }
 465
 466         return this.getEl();
 467     },
 468
 469     /**
 470      * Show a component - removes 'hidden' class
 471      */
 472     show : function()
 473     {
 474         if(!this.getVisibilityEl()){
 475             return;
 476         }
 477
 478         this.getVisibilityEl().removeClass(['hidden','d-none']);
 479
 480         this.fireEvent('show', this);
 481
 482
 483     },
 484     /**
 485      * Hide a component - adds 'hidden' class
 486      */
 487     hide: function()
 488     {
 489         if(!this.getVisibilityEl()){
 490             return;
 491         }
 492
 493         this.getVisibilityEl().addClass(['hidden','d-none']);
 494
 495         this.fireEvent('hide', this);
 496
 497     }
 498 });
 499
 500  /*
 501  * - LGPL
 502  *
 503  * based on jquery fullcalendar
 504  *
 505  */
 506
 507 Roo.bootstrap = Roo.bootstrap || {};
 508 /**
 509  * @class Roo.bootstrap.Calendar
 510  * @extends Roo.bootstrap.Component
 511  * Bootstrap Calendar class
 512  * @cfg {Boolean} loadMask (true|false) default false
 513  * @cfg {Object} header generate the user specific header of the calendar, default false
 514
 515  * @constructor
 516  * Create a new Container
 517  * @param {Object} config The config object
 518  */
 519
 520
 521
 522 Roo.bootstrap.Calendar = function(config){
 523     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
 524      this.addEvents({
 525         /**
 526              * @event select
 527              * Fires when a date is selected
 528              * @param {DatePicker} this
 529              * @param {Date} date The selected date
 530              */
 531         'select': true,
 532         /**
 533              * @event monthchange
 534              * Fires when the displayed month changes
 535              * @param {DatePicker} this
 536              * @param {Date} date The selected month
 537              */
 538         'monthchange': true,
 539         /**
 540              * @event evententer
 541              * Fires when mouse over an event
 542              * @param {Calendar} this
 543              * @param {event} Event
 544              */
 545         'evententer': true,
 546         /**
 547              * @event eventleave
 548              * Fires when the mouse leaves an
 549              * @param {Calendar} this
 550              * @param {event}
 551              */
 552         'eventleave': true,
 553         /**
 554              * @event eventclick
 555              * Fires when the mouse click an
 556              * @param {Calendar} this
 557              * @param {event}
 558              */
 559         'eventclick': true
 560
 561     });
 562
 563 };
 564
 565 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
 566
 567      /**
 568      * @cfg {Number} startDay
 569      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
 570      */
 571     startDay : 0,
 572
 573     loadMask : false,
 574
 575     header : false,
 576
 577     getAutoCreate : function(){
 578
 579
 580         var fc_button = function(name, corner, style, content ) {
 581             return Roo.apply({},{
 582                 tag : 'span',
 583                 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
 584                          (corner.length ?
 585                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
 586                             ''
 587                         ),
 588                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
 589                 unselectable: 'on'
 590             });
 591         };
 592
 593         var header = {};
 594
 595         if(!this.header){
 596             header = {
 597                 tag : 'table',
 598                 cls : 'fc-header',
 599                 style : 'width:100%',
 600                 cn : [
 601                     {
 602                         tag: 'tr',
 603                         cn : [
 604                             {
 605                                 tag : 'td',
 606                                 cls : 'fc-header-left',
 607                                 cn : [
 608                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
 609                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
 610                                     { tag: 'span', cls: 'fc-header-space' },
 611                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
 612
 613
 614                                 ]
 615                             },
 616
 617                             {
 618                                 tag : 'td',
 619                                 cls : 'fc-header-center',
 620                                 cn : [
 621                                     {
 622                                         tag: 'span',
 623                                         cls: 'fc-header-title',
 624                                         cn : {
 625                                             tag: 'H2',
 626                                             html : 'month / year'
 627                                         }
 628                                     }
 629
 630                                 ]
 631                             },
 632                             {
 633                                 tag : 'td',
 634                                 cls : 'fc-header-right',
 635                                 cn : [
 636                               /*      fc_button('month', 'left', '', 'month' ),
 637                                     fc_button('week', '', '', 'week' ),
 638                                     fc_button('day', 'right', '', 'day' )
 639                                 */
 640
 641                                 ]
 642                             }
 643
 644                         ]
 645                     }
 646                 ]
 647             };
 648         }
 649
 650         header = this.header;
 651
 652
 653         var cal_heads = function() {
 654             var ret = [];
 655             // fixme - handle this.
 656
 657             for (var i =0; i < Date.dayNames.length; i++) {
 658                 var d = Date.dayNames[i];
 659                 ret.push({
 660                     tag: 'th',
 661                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
 662                     html : d.substring(0,3)
 663                 });
 664
 665             }
 666             ret[0].cls += ' fc-first';
 667             ret[6].cls += ' fc-last';
 668             return ret;
 669         };
 670         var cal_cell = function(n) {
 671             return  {
 672                 tag: 'td',
 673                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
 674                 cn : [
 675                     {
 676                         cn : [
 677                             {
 678                                 cls: 'fc-day-number',
 679                                 html: 'D'
 680                             },
 681                             {
 682                                 cls: 'fc-day-content',
 683
 684                                 cn : [
 685                                      {
 686                                         style: 'position: relative;' // height: 17px;
 687                                     }
 688                                 ]
 689                             }
 690
 691
 692                         ]
 693                     }
 694                 ]
 695
 696             }
 697         };
 698         var cal_rows = function() {
 699
 700             var ret = [];
 701             for (var r = 0; r < 6; r++) {
 702                 var row= {
 703                     tag : 'tr',
 704                     cls : 'fc-week',
 705                     cn : []
 706                 };
 707
 708                 for (var i =0; i < Date.dayNames.length; i++) {
 709                     var d = Date.dayNames[i];
 710                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
 711
 712                 }
 713                 row.cn[0].cls+=' fc-first';
 714                 row.cn[0].cn[0].style = 'min-height:90px';
 715                 row.cn[6].cls+=' fc-last';
 716                 ret.push(row);
 717
 718             }
 719             ret[0].cls += ' fc-first';
 720             ret[4].cls += ' fc-prev-last';
 721             ret[5].cls += ' fc-last';
 722             return ret;
 723
 724         };
 725
 726         var cal_table = {
 727             tag: 'table',
 728             cls: 'fc-border-separate',
 729             style : 'width:100%',
 730             cellspacing  : 0,
 731             cn : [
 732                 {
 733                     tag: 'thead',
 734                     cn : [
 735                         {
 736                             tag: 'tr',
 737                             cls : 'fc-first fc-last',
 738                             cn : cal_heads()
 739                         }
 740                     ]
 741                 },
 742                 {
 743                     tag: 'tbody',
 744                     cn : cal_rows()
 745                 }
 746
 747             ]
 748         };
 749
 750          var cfg = {
 751             cls : 'fc fc-ltr',
 752             cn : [
 753                 header,
 754                 {
 755                     cls : 'fc-content',
 756                     style : "position: relative;",
 757                     cn : [
 758                         {
 759                             cls : 'fc-view fc-view-month fc-grid',
 760                             style : 'position: relative',
 761                             unselectable : 'on',
 762                             cn : [
 763                                 {
 764                                     cls : 'fc-event-container',
 765                                     style : 'position:absolute;z-index:8;top:0;left:0;'
 766                                 },
 767                                 cal_table
 768                             ]
 769                         }
 770                     ]
 771
 772                 }
 773            ]
 774
 775         };
 776
 777
 778
 779         return cfg;
 780     },
 781
 782
 783     initEvents : function()
 784     {
 785         if(!this.store){
 786             throw "can not find store for calendar";
 787         }
 788
 789         var mark = {
 790             tag: "div",
 791             cls:"x-dlg-mask",
 792             style: "text-align:center",
 793             cn: [
 794                 {
 795                     tag: "div",
 796                     style: "background-color:white;width:50%;margin:250 auto",
 797                     cn: [
 798                         {
 799                             tag: "img",
 800                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
 801                         },
 802                         {
 803                             tag: "span",
 804                             html: "Loading"
 805                         }
 806
 807                     ]
 808                 }
 809             ]
 810         };
 811         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
 812
 813         var size = this.el.select('.fc-content', true).first().getSize();
 814         this.maskEl.setSize(size.width, size.height);
 815         this.maskEl.enableDisplayMode("block");
 816         if(!this.loadMask){
 817             this.maskEl.hide();
 818         }
 819
 820         this.store = Roo.factory(this.store, Roo.data);
 821         this.store.on('load', this.onLoad, this);
 822         this.store.on('beforeload', this.onBeforeLoad, this);
 823
 824         this.resize();
 825
 826         this.cells = this.el.select('.fc-day',true);
 827         //Roo.log(this.cells);
 828         this.textNodes = this.el.query('.fc-day-number');
 829         this.cells.addClassOnOver('fc-state-hover');
 830
 831         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
 832         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
 833         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
 834         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
 835
 836         this.on('monthchange', this.onMonthChange, this);
 837
 838         this.update(new Date().clearTime());
 839     },
 840
 841     resize : function() {
 842         var sz  = this.el.getSize();
 843
 844         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
 845         this.el.select('.fc-day-content div',true).setHeight(34);
 846     },
 847
 848
 849     // private
 850     showPrevMonth : function(e){
 851         this.update(this.activeDate.add("mo", -1));
 852     },
 853     showToday : function(e){
 854         this.update(new Date().clearTime());
 855     },
 856     // private
 857     showNextMonth : function(e){
 858         this.update(this.activeDate.add("mo", 1));
 859     },
 860
 861     // private
 862     showPrevYear : function(){
 863         this.update(this.activeDate.add("y", -1));
 864     },
 865
 866     // private
 867     showNextYear : function(){
 868         this.update(this.activeDate.add("y", 1));
 869     },
 870
 871
 872    // private
 873     update : function(date)
 874     {
 875         var vd = this.activeDate;
 876         this.activeDate = date;
 877 //        if(vd && this.el){
 878 //            var t = date.getTime();
 879 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
 880 //                Roo.log('using add remove');
 881 //
 882 //                this.fireEvent('monthchange', this, date);
 883 //
 884 //                this.cells.removeClass("fc-state-highlight");
 885 //                this.cells.each(function(c){
 886 //                   if(c.dateValue == t){
 887 //                       c.addClass("fc-state-highlight");
 888 //                       setTimeout(function(){
 889 //                            try{c.dom.firstChild.focus();}catch(e){}
 890 //                       }, 50);
 891 //                       return false;
 892 //                   }
 893 //                   return true;
 894 //                });
 895 //                return;
 896 //            }
 897 //        }
 898
 899         var days = date.getDaysInMonth();
 900
 901         var firstOfMonth = date.getFirstDateOfMonth();
 902         var startingPos = firstOfMonth.getDay()-this.startDay;
 903
 904         if(startingPos < this.startDay){
 905             startingPos += 7;
 906         }
 907
 908         var pm = date.add(Date.MONTH, -1);
 909         var prevStart = pm.getDaysInMonth()-startingPos;
 910 //
 911         this.cells = this.el.select('.fc-day',true);
 912         this.textNodes = this.el.query('.fc-day-number');
 913         this.cells.addClassOnOver('fc-state-hover');
 914
 915         var cells = this.cells.elements;
 916         var textEls = this.textNodes;
 917
 918         Roo.each(cells, function(cell){
 919             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
 920         });
 921
 922         days += startingPos;
 923
 924         // convert everything to numbers so it's fast
 925         var day = 86400000;
 926         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
 927         //Roo.log(d);
 928         //Roo.log(pm);
 929         //Roo.log(prevStart);
 930
 931         var today = new Date().clearTime().getTime();
 932         var sel = date.clearTime().getTime();
 933         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
 934         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
 935         var ddMatch = this.disabledDatesRE;
 936         var ddText = this.disabledDatesText;
 937         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
 938         var ddaysText = this.disabledDaysText;
 939         var format = this.format;
 940
 941         var setCellClass = function(cal, cell){
 942             cell.row = 0;
 943             cell.events = [];
 944             cell.more = [];
 945             //Roo.log('set Cell Class');
 946             cell.title = "";
 947             var t = d.getTime();
 948
 949             //Roo.log(d);
 950
 951             cell.dateValue = t;
 952             if(t == today){
 953                 cell.className += " fc-today";
 954                 cell.className += " fc-state-highlight";
 955                 cell.title = cal.todayText;
 956             }
 957             if(t == sel){
 958                 // disable highlight in other month..
 959                 //cell.className += " fc-state-highlight";
 960
 961             }
 962             // disabling
 963             if(t < min) {
 964                 cell.className = " fc-state-disabled";
 965                 cell.title = cal.minText;
 966                 return;
 967             }
 968             if(t > max) {
 969                 cell.className = " fc-state-disabled";
 970                 cell.title = cal.maxText;
 971                 return;
 972             }
 973             if(ddays){
 974                 if(ddays.indexOf(d.getDay()) != -1){
 975                     cell.title = ddaysText;
 976                     cell.className = " fc-state-disabled";
 977                 }
 978             }
 979             if(ddMatch && format){
 980                 var fvalue = d.dateFormat(format);
 981                 if(ddMatch.test(fvalue)){
 982                     cell.title = ddText.replace("%0", fvalue);
 983                     cell.className = " fc-state-disabled";
 984                 }
 985             }
 986
 987             if (!cell.initialClassName) {
 988                 cell.initialClassName = cell.dom.className;
 989             }
 990
 991             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
 992         };
 993
 994         var i = 0;
 995
 996         for(; i < startingPos; i++) {
 997             textEls[i].innerHTML = (++prevStart);
 998             d.setDate(d.getDate()+1);
 999
1000             cells[i].className = "fc-past fc-other-month";
1001             setCellClass(this, cells[i]);
1002         }
1003
1004         var intDay = 0;
1005
1006         for(; i < days; i++){
1007             intDay = i - startingPos + 1;
1008             textEls[i].innerHTML = (intDay);
1009             d.setDate(d.getDate()+1);
1010
1011             cells[i].className = ''; // "x-date-active";
1012             setCellClass(this, cells[i]);
1013         }
1014         var extraDays = 0;
1015
1016         for(; i < 42; i++) {
1017             textEls[i].innerHTML = (++extraDays);
1018             d.setDate(d.getDate()+1);
1019
1020             cells[i].className = "fc-future fc-other-month";
1021             setCellClass(this, cells[i]);
1022         }
1023
1024         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
1025
1026         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
1027
1028         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
1029         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
1030
1031         if(totalRows != 6){
1032             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
1033             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
1034         }
1035
1036         this.fireEvent('monthchange', this, date);
1037
1038
1039         /*
1040         if(!this.internalRender){
1041             var main = this.el.dom.firstChild;
1042             var w = main.offsetWidth;
1043             this.el.setWidth(w + this.el.getBorderWidth("lr"));
1044             Roo.fly(main).setWidth(w);
1045             this.internalRender = true;
1046             // opera does not respect the auto grow header center column
1047             // then, after it gets a width opera refuses to recalculate
1048             // without a second pass
1049             if(Roo.isOpera && !this.secondPass){
1050                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
1051                 this.secondPass = true;
1052                 this.update.defer(10, this, [date]);
1053             }
1054         }
1055         */
1056
1057     },
1058
1059     findCell : function(dt) {
1060         dt = dt.clearTime().getTime();
1061         var ret = false;
1062         this.cells.each(function(c){
1063             //Roo.log("check " +c.dateValue + '?=' + dt);
1064             if(c.dateValue == dt){
1065                 ret = c;
1066                 return false;
1067             }
1068             return true;
1069         });
1070
1071         return ret;
1072     },
1073
1074     findCells : function(ev) {
1075         var s = ev.start.clone().clearTime().getTime();
1076        // Roo.log(s);
1077         var e= ev.end.clone().clearTime().getTime();
1078        // Roo.log(e);
1079         var ret = [];
1080         this.cells.each(function(c){
1081              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
1082
1083             if(c.dateValue > e){
1084                 return ;
1085             }
1086             if(c.dateValue < s){
1087                 return ;
1088             }
1089             ret.push(c);
1090         });
1091
1092         return ret;
1093     },
1094
1095 //    findBestRow: function(cells)
1096 //    {
1097 //        var ret = 0;
1098 //
1099 //        for (var i =0 ; i < cells.length;i++) {
1100 //            ret  = Math.max(cells[i].rows || 0,ret);
1101 //        }
1102 //        return ret;
1103 //
1104 //    },
1105
1106
1107     addItem : function(ev)
1108     {
1109         // look for vertical location slot in
1110         var cells = this.findCells(ev);
1111
1112 //        ev.row = this.findBestRow(cells);
1113
1114         // work out the location.
1115
1116         var crow = false;
1117         var rows = [];
1118         for(var i =0; i < cells.length; i++) {
1119
1120             cells[i].row = cells[0].row;
1121
1122             if(i == 0){
1123                 cells[i].row = cells[i].row + 1;
1124             }
1125
1126             if (!crow) {
1127                 crow = {
1128                     start : cells[i],
1129                     end :  cells[i]
1130                 };
1131                 continue;
1132             }
1133             if (crow.start.getY() == cells[i].getY()) {
1134                 // on same row.
1135                 crow.end = cells[i];
1136                 continue;
1137             }
1138             // different row.
1139             rows.push(crow);
1140             crow = {
1141                 start: cells[i],
1142                 end : cells[i]
1143             };
1144
1145         }
1146
1147         rows.push(crow);
1148         ev.els = [];
1149         ev.rows = rows;
1150         ev.cells = cells;
1151
1152         cells[0].events.push(ev);
1153
1154         this.calevents.push(ev);
1155     },
1156
1157     clearEvents: function() {
1158
1159         if(!this.calevents){
1160             return;
1161         }
1162
1163         Roo.each(this.cells.elements, function(c){
1164             c.row = 0;
1165             c.events = [];
1166             c.more = [];
1167         });
1168
1169         Roo.each(this.calevents, function(e) {
1170             Roo.each(e.els, function(el) {
1171                 el.un('mouseenter' ,this.onEventEnter, this);
1172                 el.un('mouseleave' ,this.onEventLeave, this);
1173                 el.remove();
1174             },this);
1175         },this);
1176
1177         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
1178             e.remove();
1179         });
1180
1181     },
1182
1183     renderEvents: function()
1184     {
1185         var _this = this;
1186
1187         this.cells.each(function(c) {
1188
1189             if(c.row < 5){
1190                 return;
1191             }
1192
1193             var ev = c.events;
1194
1195             var r = 4;
1196             if(c.row != c.events.length){
1197                 r = 4 - (4 - (c.row - c.events.length));
1198             }
1199
1200             c.events = ev.slice(0, r);
1201             c.more = ev.slice(r);
1202
1203             if(c.more.length && c.more.length == 1){
1204                 c.events.push(c.more.pop());
1205             }
1206
1207             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
1208
1209         });
1210
1211         this.cells.each(function(c) {
1212
1213             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
1214
1215
1216             for (var e = 0; e < c.events.length; e++){
1217                 var ev = c.events[e];
1218                 var rows = ev.rows;
1219
1220                 for(var i = 0; i < rows.length; i++) {
1221
1222                     // how many rows should it span..
1223
1224                     var  cfg = {
1225                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
1226                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
1227
1228                         unselectable : "on",
1229                         cn : [
1230                             {
1231                                 cls: 'fc-event-inner',
1232                                 cn : [
1233     //                                {
1234     //                                  tag:'span',
1235     //                                  cls: 'fc-event-time',
1236     //                                  html : cells.length > 1 ? '' : ev.time
1237     //                                },
1238                                     {
1239                                       tag:'span',
1240                                       cls: 'fc-event-title',
1241                                       html : String.format('{0}', ev.title)
1242                                     }
1243
1244
1245                                 ]
1246                             },
1247                             {
1248                                 cls: 'ui-resizable-handle ui-resizable-e',
1249                                 html : '&nbsp;&nbsp;&nbsp'
1250                             }
1251
1252                         ]
1253                     };
1254
1255                     if (i == 0) {
1256                         cfg.cls += ' fc-event-start';
1257                     }
1258                     if ((i+1) == rows.length) {
1259                         cfg.cls += ' fc-event-end';
1260                     }
1261
1262                     var ctr = _this.el.select('.fc-event-container',true).first();
1263                     var cg = ctr.createChild(cfg);
1264
1265                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
1266                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
1267
1268                     var r = (c.more.length) ? 1 : 0;
1269                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
1270                     cg.setWidth(ebox.right - sbox.x -2);
1271
1272                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
1273                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
1274                     cg.on('click', _this.onEventClick, _this, ev);
1275
1276                     ev.els.push(cg);
1277
1278                 }
1279
1280             }
1281
1282
1283             if(c.more.length){
1284                 var  cfg = {
1285                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
1286                     style : 'position: absolute',
1287                     unselectable : "on",
1288                     cn : [
1289                         {
1290                             cls: 'fc-event-inner',
1291                             cn : [
1292                                 {
1293                                   tag:'span',
1294                                   cls: 'fc-event-title',
1295                                   html : 'More'
1296                                 }
1297
1298
1299                             ]
1300                         },
1301                         {
1302                             cls: 'ui-resizable-handle ui-resizable-e',
1303                             html : '&nbsp;&nbsp;&nbsp'
1304                         }
1305
1306                     ]
1307                 };
1308
1309                 var ctr = _this.el.select('.fc-event-container',true).first();
1310                 var cg = ctr.createChild(cfg);
1311
1312                 var sbox = c.select('.fc-day-content',true).first().getBox();
1313                 var ebox = c.select('.fc-day-content',true).first().getBox();
1314                 //Roo.log(cg);
1315                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
1316                 cg.setWidth(ebox.right - sbox.x -2);
1317
1318                 cg.on('click', _this.onMoreEventClick, _this, c.more);
1319
1320             }
1321
1322         });
1323
1324
1325
1326     },
1327
1328     onEventEnter: function (e, el,event,d) {
1329         this.fireEvent('evententer', this, el, event);
1330     },
1331
1332     onEventLeave: function (e, el,event,d) {
1333         this.fireEvent('eventleave', this, el, event);
1334     },
1335
1336     onEventClick: function (e, el,event,d) {
1337         this.fireEvent('eventclick', this, el, event);
1338     },
1339
1340     onMonthChange: function () {
1341         this.store.load();
1342     },
1343
1344     onMoreEventClick: function(e, el, more)
1345     {
1346         var _this = this;
1347
1348         this.calpopover.placement = 'right';
1349         this.calpopover.setTitle('More');
1350
1351         this.calpopover.setContent('');
1352
1353         var ctr = this.calpopover.el.select('.popover-content', true).first();
1354
1355         Roo.each(more, function(m){
1356             var cfg = {
1357                 cls : 'fc-event-hori fc-event-draggable',
1358                 html : m.title
1359             };
1360             var cg = ctr.createChild(cfg);
1361
1362             cg.on('click', _this.onEventClick, _this, m);
1363         });
1364
1365         this.calpopover.show(el);
1366
1367
1368     },
1369
1370     onLoad: function ()
1371     {
1372         this.calevents = [];
1373         var cal = this;
1374
1375         if(this.store.getCount() > 0){
1376             this.store.data.each(function(d){
1377                cal.addItem({
1378                     id : d.data.id,
1379                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
1380                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
1381                     time : d.data.start_time,
1382                     title : d.data.title,
1383                     description : d.data.description,
1384                     venue : d.data.venue
1385                 });
1386             });
1387         }
1388
1389         this.renderEvents();
1390
1391         if(this.calevents.length && this.loadMask){
1392             this.maskEl.hide();
1393         }
1394     },
1395
1396     onBeforeLoad: function()
1397     {
1398         this.clearEvents();
1399         if(this.loadMask){
1400             this.maskEl.show();
1401         }
1402     }
1403 });
1404
1405
1406  /*
1407  * - LGPL
1408  *
1409  * based on jquery fullcalendar
1410  *
1411  */
1412
1413
1414 /**
1415  * @class Roo.Calendar
1416  * @extends Roo.Component
1417  * Bootstrap Calendar class
1418
1419  * @constructor
1420  * Create a new Container
1421  * @param {Object} config The config object
1422  */
1423
1424 Roo.CalendarPanel = function(config){
1425
1426     Roo.log("cal panel ctr");
1427
1428     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
1429         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
1430
1431     //this.wrapper.dom.appendChild(grid.getGridEl().dom);
1432
1433     Roo.CalendarPanel.superclass.constructor.call(this, this.wrapper, config);
1434
1435     Roo.log(this.el);
1436
1437     if(this.toolbar){
1438         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
1439     }
1440     // xtype created footer. - not sure if will work as we normally have to render first..
1441     if (this.footer && !this.footer.el && this.footer.xtype) {
1442
1443         //this.footer.container = this.grid.getView().getFooterPanel(true);
1444         //this.footer.dataSource = this.grid.dataSource;
1445         //this.footer = Roo.factory(this.footer, Roo);
1446
1447     }
1448     this.view = new Roo.calendar.View(Roo.apply({
1449         skipNavHeader : true,
1450         skipMonthHeader : false
1451
1452     },config));
1453
1454
1455     this.on('activate', function()
1456     {
1457         Roo.log('activate');
1458
1459         //console.log('render tree');
1460         this.render();
1461     },this);
1462
1463     this.addEvents({
1464         /**
1465              * @event select
1466              * Fires when a date is selected
1467              * @param {DatePicker} this
1468              * @param {Date} date The selected date
1469              */
1470         'select': true,
1471         /**
1472              * @event monthchange
1473              * Fires when the displayed month changes
1474              * @param {DatePicker} this
1475              * @param {Date} date The selected month
1476              */
1477         'monthchange': true,
1478         /**
1479              * @event evententer
1480              * Fires when mouse over an event
1481              * @param {Calendar} this
1482              * @param {event} Event
1483              */
1484         'evententer': true,
1485         /**
1486              * @event eventleave
1487              * Fires when the mouse leaves an
1488              * @param {Calendar} this
1489              * @param {event}
1490              */
1491         'eventleave': true,
1492         /**
1493              * @event eventclick
1494              * Fires when the mouse click an
1495              * @param {Calendar} this
1496              * @param {event}
1497              */
1498         'eventclick': true,
1499         /**
1500              * @event rendered
1501              * Fires when the grid is rendered
1502              * @param {Calendar} this
1503
1504              */
1505         'rendered': true
1506
1507
1508     });
1509     this.relayEvents(this.view, ["select","monthchange","evententer","eventleave","rendered"]);
1510
1511     //this.grid = grid;
1512     //this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
1513 };
1514
1515
1516 Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
1517
1518
1519     render : function()
1520     {
1521         var ct = this.el.appendChild(document.createElement("div"));
1522         this.onRender(this.el, false)
1523     },
1524
1525     onRender : function(ct, position)
1526     {
1527         if (this.rendered) {
1528             return;
1529         }
1530         this.rendered = true;
1531
1532         Roo.log("render calendar");
1533
1534
1535         //Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1536
1537
1538         var cfg = Roo.apply({},  this.view.getAutoCreate());
1539         cfg.id = Roo.id();
1540
1541         // fill in the extra attributes
1542         if (this.xattr && typeof(this.xattr) =='object') {
1543             for (var i in this.xattr) {
1544                 cfg[i] = this.xattr[i];
1545             }
1546         }
1547
1548         if(this.dataId){
1549             cfg.dataId = this.dataId;
1550         }
1551
1552         if (this.cls) {
1553             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
1554         }
1555
1556         if (this.style) { // fixme needs to support more complex style data.
1557             cfg.style = this.style;
1558         }
1559
1560         if(this.name){
1561             cfg.name = this.name;
1562         }
1563
1564         this.view.el =  ct.createChild(cfg, position);
1565
1566         //if(this.tabIndex !== undefined){
1567         //    this.el.dom.setAttribute('tabIndex', this.tabIndex);
1568         //}
1569
1570
1571         this.view.initEvents();
1572         this.fireEvent('rendered');
1573     }
1574
1575
1576
1577
1578 });
1579
1580