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     xAdd : function (tree, cntr, is_body)
 415     {
 416         Roo.debug && Roo.log('xadd:' + cntr);
 417
 418         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 419
 420         var parent_ctnr = this[cntr](true);
 421         if(parent_ctnr === false){
 422             return false; // getChildContainer an return false explicitly to block children being added?
 423         }
 424         if(!parent_ctnr ){
 425             throw new Exception("could not find parent Container for item");
 426         }
 427
 428         var cn = Roo.factory(tree);
 429         // at this point items[] array may be set..
 430         // constructors should not really be building their children?
 431         cn.parentType = this.xtype; //??
 432         cn.parentId = this.id;
 433
 434
 435         cn.render && cn.render(parent_ctnr);
 436
 437         cn.xAddChildren(tree.items || cn.items);
 438         delete tree.items; // not really needed?
 439         return cn;
 440     },
 441
 442
 443     /**
 444      * Set the element that will be used to show or hide
 445      */
 446     setVisibilityEl : function(el)
 447     {
 448         this.visibilityEl = el;
 449     },
 450
 451      /**
 452      * Get the element that will be used to show or hide
 453      */
 454     getVisibilityEl : function()
 455     {
 456         if (typeof(this.visibilityEl) == 'object') {
 457             return this.visibilityEl;
 458         }
 459
 460         if (typeof(this.visibilityEl) == 'string') {
 461             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
 462         }
 463
 464         return this.getEl();
 465     },
 466
 467     /**
 468      * Show a component - removes 'hidden' class
 469      */
 470     show : function()
 471     {
 472         if(!this.getVisibilityEl()){
 473             return;
 474         }
 475
 476         this.getVisibilityEl().removeClass(['hidden','d-none']);
 477
 478         this.fireEvent('show', this);
 479
 480
 481     },
 482     /**
 483      * Hide a component - adds 'hidden' class
 484      */
 485     hide: function()
 486     {
 487         if(!this.getVisibilityEl()){
 488             return;
 489         }
 490
 491         this.getVisibilityEl().addClass(['hidden','d-none']);
 492
 493         this.fireEvent('hide', this);
 494
 495     }
 496 });
 497
 498  /*
 499  * - LGPL
 500  *
 501  * based on jquery fullcalendar
 502  *
 503  */
 504
 505 Roo.bootstrap = Roo.bootstrap || {};
 506 /**
 507  * @class Roo.bootstrap.Calendar
 508  * @extends Roo.bootstrap.Component
 509  * Bootstrap Calendar class
 510  * @cfg {Boolean} loadMask (true|false) default false
 511  * @cfg {Object} header generate the user specific header of the calendar, default false
 512
 513  * @constructor
 514  * Create a new Container
 515  * @param {Object} config The config object
 516  */
 517
 518
 519
 520 Roo.bootstrap.Calendar = function(config){
 521     Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
 522      this.addEvents({
 523         /**
 524              * @event select
 525              * Fires when a date is selected
 526              * @param {DatePicker} this
 527              * @param {Date} date The selected date
 528              */
 529         'select': true,
 530         /**
 531              * @event monthchange
 532              * Fires when the displayed month changes
 533              * @param {DatePicker} this
 534              * @param {Date} date The selected month
 535              */
 536         'monthchange': true,
 537         /**
 538              * @event evententer
 539              * Fires when mouse over an event
 540              * @param {Calendar} this
 541              * @param {event} Event
 542              */
 543         'evententer': true,
 544         /**
 545              * @event eventleave
 546              * Fires when the mouse leaves an
 547              * @param {Calendar} this
 548              * @param {event}
 549              */
 550         'eventleave': true,
 551         /**
 552              * @event eventclick
 553              * Fires when the mouse click an
 554              * @param {Calendar} this
 555              * @param {event}
 556              */
 557         'eventclick': true
 558
 559     });
 560
 561 };
 562
 563 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
 564
 565      /**
 566      * @cfg {Number} startDay
 567      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
 568      */
 569     startDay : 0,
 570
 571     loadMask : false,
 572
 573     header : false,
 574
 575     getAutoCreate : function(){
 576
 577
 578         var fc_button = function(name, corner, style, content ) {
 579             return Roo.apply({},{
 580                 tag : 'span',
 581                 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
 582                          (corner.length ?
 583                             'fc-corner-' + corner.split(' ').join(' fc-corner-') :
 584                             ''
 585                         ),
 586                 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
 587                 unselectable: 'on'
 588             });
 589         };
 590
 591         var header = {};
 592
 593         if(!this.header){
 594             header = {
 595                 tag : 'table',
 596                 cls : 'fc-header',
 597                 style : 'width:100%',
 598                 cn : [
 599                     {
 600                         tag: 'tr',
 601                         cn : [
 602                             {
 603                                 tag : 'td',
 604                                 cls : 'fc-header-left',
 605                                 cn : [
 606                                     fc_button('prev', 'left', 'arrow', '&#8249;' ),
 607                                     fc_button('next', 'right', 'arrow', '&#8250;' ),
 608                                     { tag: 'span', cls: 'fc-header-space' },
 609                                     fc_button('today', 'left right', '', 'today' )  // neds state disabled..
 610
 611
 612                                 ]
 613                             },
 614
 615                             {
 616                                 tag : 'td',
 617                                 cls : 'fc-header-center',
 618                                 cn : [
 619                                     {
 620                                         tag: 'span',
 621                                         cls: 'fc-header-title',
 622                                         cn : {
 623                                             tag: 'H2',
 624                                             html : 'month / year'
 625                                         }
 626                                     }
 627
 628                                 ]
 629                             },
 630                             {
 631                                 tag : 'td',
 632                                 cls : 'fc-header-right',
 633                                 cn : [
 634                               /*      fc_button('month', 'left', '', 'month' ),
 635                                     fc_button('week', '', '', 'week' ),
 636                                     fc_button('day', 'right', '', 'day' )
 637                                 */
 638
 639                                 ]
 640                             }
 641
 642                         ]
 643                     }
 644                 ]
 645             };
 646         }
 647
 648         header = this.header;
 649
 650
 651         var cal_heads = function() {
 652             var ret = [];
 653             // fixme - handle this.
 654
 655             for (var i =0; i < Date.dayNames.length; i++) {
 656                 var d = Date.dayNames[i];
 657                 ret.push({
 658                     tag: 'th',
 659                     cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
 660                     html : d.substring(0,3)
 661                 });
 662
 663             }
 664             ret[0].cls += ' fc-first';
 665             ret[6].cls += ' fc-last';
 666             return ret;
 667         };
 668         var cal_cell = function(n) {
 669             return  {
 670                 tag: 'td',
 671                 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
 672                 cn : [
 673                     {
 674                         cn : [
 675                             {
 676                                 cls: 'fc-day-number',
 677                                 html: 'D'
 678                             },
 679                             {
 680                                 cls: 'fc-day-content',
 681
 682                                 cn : [
 683                                      {
 684                                         style: 'position: relative;' // height: 17px;
 685                                     }
 686                                 ]
 687                             }
 688
 689
 690                         ]
 691                     }
 692                 ]
 693
 694             }
 695         };
 696         var cal_rows = function() {
 697
 698             var ret = [];
 699             for (var r = 0; r < 6; r++) {
 700                 var row= {
 701                     tag : 'tr',
 702                     cls : 'fc-week',
 703                     cn : []
 704                 };
 705
 706                 for (var i =0; i < Date.dayNames.length; i++) {
 707                     var d = Date.dayNames[i];
 708                     row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
 709
 710                 }
 711                 row.cn[0].cls+=' fc-first';
 712                 row.cn[0].cn[0].style = 'min-height:90px';
 713                 row.cn[6].cls+=' fc-last';
 714                 ret.push(row);
 715
 716             }
 717             ret[0].cls += ' fc-first';
 718             ret[4].cls += ' fc-prev-last';
 719             ret[5].cls += ' fc-last';
 720             return ret;
 721
 722         };
 723
 724         var cal_table = {
 725             tag: 'table',
 726             cls: 'fc-border-separate',
 727             style : 'width:100%',
 728             cellspacing  : 0,
 729             cn : [
 730                 {
 731                     tag: 'thead',
 732                     cn : [
 733                         {
 734                             tag: 'tr',
 735                             cls : 'fc-first fc-last',
 736                             cn : cal_heads()
 737                         }
 738                     ]
 739                 },
 740                 {
 741                     tag: 'tbody',
 742                     cn : cal_rows()
 743                 }
 744
 745             ]
 746         };
 747
 748          var cfg = {
 749             cls : 'fc fc-ltr',
 750             cn : [
 751                 header,
 752                 {
 753                     cls : 'fc-content',
 754                     style : "position: relative;",
 755                     cn : [
 756                         {
 757                             cls : 'fc-view fc-view-month fc-grid',
 758                             style : 'position: relative',
 759                             unselectable : 'on',
 760                             cn : [
 761                                 {
 762                                     cls : 'fc-event-container',
 763                                     style : 'position:absolute;z-index:8;top:0;left:0;'
 764                                 },
 765                                 cal_table
 766                             ]
 767                         }
 768                     ]
 769
 770                 }
 771            ]
 772
 773         };
 774
 775
 776
 777         return cfg;
 778     },
 779
 780
 781     initEvents : function()
 782     {
 783         if(!this.store){
 784             throw "can not find store for calendar";
 785         }
 786
 787         var mark = {
 788             tag: "div",
 789             cls:"x-dlg-mask",
 790             style: "text-align:center",
 791             cn: [
 792                 {
 793                     tag: "div",
 794                     style: "background-color:white;width:50%;margin:250 auto",
 795                     cn: [
 796                         {
 797                             tag: "img",
 798                             src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
 799                         },
 800                         {
 801                             tag: "span",
 802                             html: "Loading"
 803                         }
 804
 805                     ]
 806                 }
 807             ]
 808         };
 809         this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
 810
 811         var size = this.el.select('.fc-content', true).first().getSize();
 812         this.maskEl.setSize(size.width, size.height);
 813         this.maskEl.enableDisplayMode("block");
 814         if(!this.loadMask){
 815             this.maskEl.hide();
 816         }
 817
 818         this.store = Roo.factory(this.store, Roo.data);
 819         this.store.on('load', this.onLoad, this);
 820         this.store.on('beforeload', this.onBeforeLoad, this);
 821
 822         this.resize();
 823
 824         this.cells = this.el.select('.fc-day',true);
 825         //Roo.log(this.cells);
 826         this.textNodes = this.el.query('.fc-day-number');
 827         this.cells.addClassOnOver('fc-state-hover');
 828
 829         this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
 830         this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
 831         this.el.select('.fc-button-today',true).on('click', this.showToday, this);
 832         this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
 833
 834         this.on('monthchange', this.onMonthChange, this);
 835
 836         this.update(new Date().clearTime());
 837     },
 838
 839     resize : function() {
 840         var sz  = this.el.getSize();
 841
 842         this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
 843         this.el.select('.fc-day-content div',true).setHeight(34);
 844     },
 845
 846
 847     // private
 848     showPrevMonth : function(e){
 849         this.update(this.activeDate.add("mo", -1));
 850     },
 851     showToday : function(e){
 852         this.update(new Date().clearTime());
 853     },
 854     // private
 855     showNextMonth : function(e){
 856         this.update(this.activeDate.add("mo", 1));
 857     },
 858
 859     // private
 860     showPrevYear : function(){
 861         this.update(this.activeDate.add("y", -1));
 862     },
 863
 864     // private
 865     showNextYear : function(){
 866         this.update(this.activeDate.add("y", 1));
 867     },
 868
 869
 870    // private
 871     update : function(date)
 872     {
 873         var vd = this.activeDate;
 874         this.activeDate = date;
 875 //        if(vd && this.el){
 876 //            var t = date.getTime();
 877 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
 878 //                Roo.log('using add remove');
 879 //
 880 //                this.fireEvent('monthchange', this, date);
 881 //
 882 //                this.cells.removeClass("fc-state-highlight");
 883 //                this.cells.each(function(c){
 884 //                   if(c.dateValue == t){
 885 //                       c.addClass("fc-state-highlight");
 886 //                       setTimeout(function(){
 887 //                            try{c.dom.firstChild.focus();}catch(e){}
 888 //                       }, 50);
 889 //                       return false;
 890 //                   }
 891 //                   return true;
 892 //                });
 893 //                return;
 894 //            }
 895 //        }
 896
 897         var days = date.getDaysInMonth();
 898
 899         var firstOfMonth = date.getFirstDateOfMonth();
 900         var startingPos = firstOfMonth.getDay()-this.startDay;
 901
 902         if(startingPos < this.startDay){
 903             startingPos += 7;
 904         }
 905
 906         var pm = date.add(Date.MONTH, -1);
 907         var prevStart = pm.getDaysInMonth()-startingPos;
 908 //
 909         this.cells = this.el.select('.fc-day',true);
 910         this.textNodes = this.el.query('.fc-day-number');
 911         this.cells.addClassOnOver('fc-state-hover');
 912
 913         var cells = this.cells.elements;
 914         var textEls = this.textNodes;
 915
 916         Roo.each(cells, function(cell){
 917             cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
 918         });
 919
 920         days += startingPos;
 921
 922         // convert everything to numbers so it's fast
 923         var day = 86400000;
 924         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
 925         //Roo.log(d);
 926         //Roo.log(pm);
 927         //Roo.log(prevStart);
 928
 929         var today = new Date().clearTime().getTime();
 930         var sel = date.clearTime().getTime();
 931         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
 932         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
 933         var ddMatch = this.disabledDatesRE;
 934         var ddText = this.disabledDatesText;
 935         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
 936         var ddaysText = this.disabledDaysText;
 937         var format = this.format;
 938
 939         var setCellClass = function(cal, cell){
 940             cell.row = 0;
 941             cell.events = [];
 942             cell.more = [];
 943             //Roo.log('set Cell Class');
 944             cell.title = "";
 945             var t = d.getTime();
 946
 947             //Roo.log(d);
 948
 949             cell.dateValue = t;
 950             if(t == today){
 951                 cell.className += " fc-today";
 952                 cell.className += " fc-state-highlight";
 953                 cell.title = cal.todayText;
 954             }
 955             if(t == sel){
 956                 // disable highlight in other month..
 957                 //cell.className += " fc-state-highlight";
 958
 959             }
 960             // disabling
 961             if(t < min) {
 962                 cell.className = " fc-state-disabled";
 963                 cell.title = cal.minText;
 964                 return;
 965             }
 966             if(t > max) {
 967                 cell.className = " fc-state-disabled";
 968                 cell.title = cal.maxText;
 969                 return;
 970             }
 971             if(ddays){
 972                 if(ddays.indexOf(d.getDay()) != -1){
 973                     cell.title = ddaysText;
 974                     cell.className = " fc-state-disabled";
 975                 }
 976             }
 977             if(ddMatch && format){
 978                 var fvalue = d.dateFormat(format);
 979                 if(ddMatch.test(fvalue)){
 980                     cell.title = ddText.replace("%0", fvalue);
 981                     cell.className = " fc-state-disabled";
 982                 }
 983             }
 984
 985             if (!cell.initialClassName) {
 986                 cell.initialClassName = cell.dom.className;
 987             }
 988
 989             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
 990         };
 991
 992         var i = 0;
 993
 994         for(; i < startingPos; i++) {
 995             textEls[i].innerHTML = (++prevStart);
 996             d.setDate(d.getDate()+1);
 997
 998             cells[i].className = "fc-past fc-other-month";
 999             setCellClass(this, cells[i]);
1000         }
1001
1002         var intDay = 0;
1003
1004         for(; i < days; i++){
1005             intDay = i - startingPos + 1;
1006             textEls[i].innerHTML = (intDay);
1007             d.setDate(d.getDate()+1);
1008
1009             cells[i].className = ''; // "x-date-active";
1010             setCellClass(this, cells[i]);
1011         }
1012         var extraDays = 0;
1013
1014         for(; i < 42; i++) {
1015             textEls[i].innerHTML = (++extraDays);
1016             d.setDate(d.getDate()+1);
1017
1018             cells[i].className = "fc-future fc-other-month";
1019             setCellClass(this, cells[i]);
1020         }
1021
1022         this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
1023
1024         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
1025
1026         this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
1027         this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
1028
1029         if(totalRows != 6){
1030             this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
1031             this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
1032         }
1033
1034         this.fireEvent('monthchange', this, date);
1035
1036
1037         /*
1038         if(!this.internalRender){
1039             var main = this.el.dom.firstChild;
1040             var w = main.offsetWidth;
1041             this.el.setWidth(w + this.el.getBorderWidth("lr"));
1042             Roo.fly(main).setWidth(w);
1043             this.internalRender = true;
1044             // opera does not respect the auto grow header center column
1045             // then, after it gets a width opera refuses to recalculate
1046             // without a second pass
1047             if(Roo.isOpera && !this.secondPass){
1048                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
1049                 this.secondPass = true;
1050                 this.update.defer(10, this, [date]);
1051             }
1052         }
1053         */
1054
1055     },
1056
1057     findCell : function(dt) {
1058         dt = dt.clearTime().getTime();
1059         var ret = false;
1060         this.cells.each(function(c){
1061             //Roo.log("check " +c.dateValue + '?=' + dt);
1062             if(c.dateValue == dt){
1063                 ret = c;
1064                 return false;
1065             }
1066             return true;
1067         });
1068
1069         return ret;
1070     },
1071
1072     findCells : function(ev) {
1073         var s = ev.start.clone().clearTime().getTime();
1074        // Roo.log(s);
1075         var e= ev.end.clone().clearTime().getTime();
1076        // Roo.log(e);
1077         var ret = [];
1078         this.cells.each(function(c){
1079              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
1080
1081             if(c.dateValue > e){
1082                 return ;
1083             }
1084             if(c.dateValue < s){
1085                 return ;
1086             }
1087             ret.push(c);
1088         });
1089
1090         return ret;
1091     },
1092
1093 //    findBestRow: function(cells)
1094 //    {
1095 //        var ret = 0;
1096 //
1097 //        for (var i =0 ; i < cells.length;i++) {
1098 //            ret  = Math.max(cells[i].rows || 0,ret);
1099 //        }
1100 //        return ret;
1101 //
1102 //    },
1103
1104
1105     addItem : function(ev)
1106     {
1107         // look for vertical location slot in
1108         var cells = this.findCells(ev);
1109
1110 //        ev.row = this.findBestRow(cells);
1111
1112         // work out the location.
1113
1114         var crow = false;
1115         var rows = [];
1116         for(var i =0; i < cells.length; i++) {
1117
1118             cells[i].row = cells[0].row;
1119
1120             if(i == 0){
1121                 cells[i].row = cells[i].row + 1;
1122             }
1123
1124             if (!crow) {
1125                 crow = {
1126                     start : cells[i],
1127                     end :  cells[i]
1128                 };
1129                 continue;
1130             }
1131             if (crow.start.getY() == cells[i].getY()) {
1132                 // on same row.
1133                 crow.end = cells[i];
1134                 continue;
1135             }
1136             // different row.
1137             rows.push(crow);
1138             crow = {
1139                 start: cells[i],
1140                 end : cells[i]
1141             };
1142
1143         }
1144
1145         rows.push(crow);
1146         ev.els = [];
1147         ev.rows = rows;
1148         ev.cells = cells;
1149
1150         cells[0].events.push(ev);
1151
1152         this.calevents.push(ev);
1153     },
1154
1155     clearEvents: function() {
1156
1157         if(!this.calevents){
1158             return;
1159         }
1160
1161         Roo.each(this.cells.elements, function(c){
1162             c.row = 0;
1163             c.events = [];
1164             c.more = [];
1165         });
1166
1167         Roo.each(this.calevents, function(e) {
1168             Roo.each(e.els, function(el) {
1169                 el.un('mouseenter' ,this.onEventEnter, this);
1170                 el.un('mouseleave' ,this.onEventLeave, this);
1171                 el.remove();
1172             },this);
1173         },this);
1174
1175         Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
1176             e.remove();
1177         });
1178
1179     },
1180
1181     renderEvents: function()
1182     {
1183         var _this = this;
1184
1185         this.cells.each(function(c) {
1186
1187             if(c.row < 5){
1188                 return;
1189             }
1190
1191             var ev = c.events;
1192
1193             var r = 4;
1194             if(c.row != c.events.length){
1195                 r = 4 - (4 - (c.row - c.events.length));
1196             }
1197
1198             c.events = ev.slice(0, r);
1199             c.more = ev.slice(r);
1200
1201             if(c.more.length && c.more.length == 1){
1202                 c.events.push(c.more.pop());
1203             }
1204
1205             c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
1206
1207         });
1208
1209         this.cells.each(function(c) {
1210
1211             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
1212
1213
1214             for (var e = 0; e < c.events.length; e++){
1215                 var ev = c.events[e];
1216                 var rows = ev.rows;
1217
1218                 for(var i = 0; i < rows.length; i++) {
1219
1220                     // how many rows should it span..
1221
1222                     var  cfg = {
1223                         cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
1224                         style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
1225
1226                         unselectable : "on",
1227                         cn : [
1228                             {
1229                                 cls: 'fc-event-inner',
1230                                 cn : [
1231     //                                {
1232     //                                  tag:'span',
1233     //                                  cls: 'fc-event-time',
1234     //                                  html : cells.length > 1 ? '' : ev.time
1235     //                                },
1236                                     {
1237                                       tag:'span',
1238                                       cls: 'fc-event-title',
1239                                       html : String.format('{0}', ev.title)
1240                                     }
1241
1242
1243                                 ]
1244                             },
1245                             {
1246                                 cls: 'ui-resizable-handle ui-resizable-e',
1247                                 html : '&nbsp;&nbsp;&nbsp'
1248                             }
1249
1250                         ]
1251                     };
1252
1253                     if (i == 0) {
1254                         cfg.cls += ' fc-event-start';
1255                     }
1256                     if ((i+1) == rows.length) {
1257                         cfg.cls += ' fc-event-end';
1258                     }
1259
1260                     var ctr = _this.el.select('.fc-event-container',true).first();
1261                     var cg = ctr.createChild(cfg);
1262
1263                     var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
1264                     var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
1265
1266                     var r = (c.more.length) ? 1 : 0;
1267                     cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
1268                     cg.setWidth(ebox.right - sbox.x -2);
1269
1270                     cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
1271                     cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
1272                     cg.on('click', _this.onEventClick, _this, ev);
1273
1274                     ev.els.push(cg);
1275
1276                 }
1277
1278             }
1279
1280
1281             if(c.more.length){
1282                 var  cfg = {
1283                     cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
1284                     style : 'position: absolute',
1285                     unselectable : "on",
1286                     cn : [
1287                         {
1288                             cls: 'fc-event-inner',
1289                             cn : [
1290                                 {
1291                                   tag:'span',
1292                                   cls: 'fc-event-title',
1293                                   html : 'More'
1294                                 }
1295
1296
1297                             ]
1298                         },
1299                         {
1300                             cls: 'ui-resizable-handle ui-resizable-e',
1301                             html : '&nbsp;&nbsp;&nbsp'
1302                         }
1303
1304                     ]
1305                 };
1306
1307                 var ctr = _this.el.select('.fc-event-container',true).first();
1308                 var cg = ctr.createChild(cfg);
1309
1310                 var sbox = c.select('.fc-day-content',true).first().getBox();
1311                 var ebox = c.select('.fc-day-content',true).first().getBox();
1312                 //Roo.log(cg);
1313                 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
1314                 cg.setWidth(ebox.right - sbox.x -2);
1315
1316                 cg.on('click', _this.onMoreEventClick, _this, c.more);
1317
1318             }
1319
1320         });
1321
1322
1323
1324     },
1325
1326     onEventEnter: function (e, el,event,d) {
1327         this.fireEvent('evententer', this, el, event);
1328     },
1329
1330     onEventLeave: function (e, el,event,d) {
1331         this.fireEvent('eventleave', this, el, event);
1332     },
1333
1334     onEventClick: function (e, el,event,d) {
1335         this.fireEvent('eventclick', this, el, event);
1336     },
1337
1338     onMonthChange: function () {
1339         this.store.load();
1340     },
1341
1342     onMoreEventClick: function(e, el, more)
1343     {
1344         var _this = this;
1345
1346         this.calpopover.placement = 'right';
1347         this.calpopover.setTitle('More');
1348
1349         this.calpopover.setContent('');
1350
1351         var ctr = this.calpopover.el.select('.popover-content', true).first();
1352
1353         Roo.each(more, function(m){
1354             var cfg = {
1355                 cls : 'fc-event-hori fc-event-draggable',
1356                 html : m.title
1357             };
1358             var cg = ctr.createChild(cfg);
1359
1360             cg.on('click', _this.onEventClick, _this, m);
1361         });
1362
1363         this.calpopover.show(el);
1364
1365
1366     },
1367
1368     onLoad: function ()
1369     {
1370         this.calevents = [];
1371         var cal = this;
1372
1373         if(this.store.getCount() > 0){
1374             this.store.data.each(function(d){
1375                cal.addItem({
1376                     id : d.data.id,
1377                     start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
1378                     end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
1379                     time : d.data.start_time,
1380                     title : d.data.title,
1381                     description : d.data.description,
1382                     venue : d.data.venue
1383                 });
1384             });
1385         }
1386
1387         this.renderEvents();
1388
1389         if(this.calevents.length && this.loadMask){
1390             this.maskEl.hide();
1391         }
1392     },
1393
1394     onBeforeLoad: function()
1395     {
1396         this.clearEvents();
1397         if(this.loadMask){
1398             this.maskEl.show();
1399         }
1400     }
1401 });
1402
1403
1404  /*
1405  * - LGPL
1406  *
1407  * based on jquery fullcalendar
1408  *
1409  */
1410
1411
1412 /**
1413  * @class Roo.Calendar
1414  * @extends Roo.Component
1415  * Bootstrap Calendar class
1416
1417  * @constructor
1418  * Create a new Container
1419  * @param {Object} config The config object
1420  */
1421
1422 Roo.CalendarPanel = function(config){
1423
1424     Roo.log("cal panel ctr");
1425
1426     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
1427         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
1428
1429     //this.wrapper.dom.appendChild(grid.getGridEl().dom);
1430
1431     Roo.CalendarPanel.superclass.constructor.call(this, this.wrapper, config);
1432
1433     Roo.log(this.el);
1434
1435     if(this.toolbar){
1436         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
1437     }
1438     // xtype created footer. - not sure if will work as we normally have to render first..
1439     if (this.footer && !this.footer.el && this.footer.xtype) {
1440
1441         //this.footer.container = this.grid.getView().getFooterPanel(true);
1442         //this.footer.dataSource = this.grid.dataSource;
1443         //this.footer = Roo.factory(this.footer, Roo);
1444
1445     }
1446     this.view = new Roo.calendar.View(Roo.apply({
1447         skipNavHeader : true,
1448         skipMonthHeader : false
1449
1450     },config));
1451
1452
1453     this.on('activate', function()
1454     {
1455         Roo.log('activate');
1456
1457         //console.log('render tree');
1458         this.render();
1459     },this);
1460
1461     this.addEvents({
1462         /**
1463              * @event select
1464              * Fires when a date is selected
1465              * @param {DatePicker} this
1466              * @param {Date} date The selected date
1467              */
1468         'select': true,
1469         /**
1470              * @event monthchange
1471              * Fires when the displayed month changes
1472              * @param {DatePicker} this
1473              * @param {Date} date The selected month
1474              */
1475         'monthchange': true,
1476         /**
1477              * @event evententer
1478              * Fires when mouse over an event
1479              * @param {Calendar} this
1480              * @param {event} Event
1481              */
1482         'evententer': true,
1483         /**
1484              * @event eventleave
1485              * Fires when the mouse leaves an
1486              * @param {Calendar} this
1487              * @param {event}
1488              */
1489         'eventleave': true,
1490         /**
1491              * @event eventclick
1492              * Fires when the mouse click an
1493              * @param {Calendar} this
1494              * @param {event}
1495              */
1496         'eventclick': true,
1497         /**
1498              * @event rendered
1499              * Fires when the grid is rendered
1500              * @param {Calendar} this
1501
1502              */
1503         'rendered': true
1504
1505
1506     });
1507     this.relayEvents(this.view, ["select","monthchange","evententer","eventleave","rendered"]);
1508
1509     //this.grid = grid;
1510     //this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
1511 };
1512
1513
1514 Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, {
1515
1516
1517     render : function()
1518     {
1519         var ct = this.el.appendChild(document.createElement("div"));
1520         this.onRender(this.el, false)
1521     },
1522
1523     onRender : function(ct, position)
1524     {
1525         if (this.rendered) {
1526             return;
1527         }
1528         this.rendered = true;
1529
1530         Roo.log("render calendar");
1531
1532
1533         //Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1534
1535
1536         var cfg = Roo.apply({},  this.view.getAutoCreate());
1537         cfg.id = Roo.id();
1538
1539         // fill in the extra attributes
1540         if (this.xattr && typeof(this.xattr) =='object') {
1541             for (var i in this.xattr) {
1542                 cfg[i] = this.xattr[i];
1543             }
1544         }
1545
1546         if(this.dataId){
1547             cfg.dataId = this.dataId;
1548         }
1549
1550         if (this.cls) {
1551             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
1552         }
1553
1554         if (this.style) { // fixme needs to support more complex style data.
1555             cfg.style = this.style;
1556         }
1557
1558         if(this.name){
1559             cfg.name = this.name;
1560         }
1561
1562         this.view.el =  ct.createChild(cfg, position);
1563
1564         //if(this.tabIndex !== undefined){
1565         //    this.el.dom.setAttribute('tabIndex', this.tabIndex);
1566         //}
1567
1568
1569         this.view.initEvents();
1570         this.fireEvent('rendered');
1571     }
1572
1573
1574
1575
1576 });
1577
1578