4 * based on jquery fullcalendar
8 Roo.bootstrap = Roo.bootstrap || {};
10 * @class Roo.bootstrap.Calendar
11 * @extends Roo.bootstrap.Component
12 * Bootstrap Calendar class
13 * @cfg {Boolean} loadMask (true|false) default false
14 * @cfg {Object} header generate the user specific header of the calendar, default false
17 * Create a new Container
18 * @param {Object} config The config object
23 Roo.bootstrap.Calendar = function(config){
24 Roo.bootstrap.Calendar.superclass.constructor.call(this, config);
28 * Fires when a date is selected
29 * @param {DatePicker} this
30 * @param {Date} date The selected date
35 * Fires when the displayed month changes
36 * @param {DatePicker} this
37 * @param {Date} date The selected month
42 * Fires when mouse over an event
43 * @param {Calendar} this
44 * @param {event} Event
49 * Fires when the mouse leaves an
50 * @param {Calendar} this
56 * Fires when the mouse click an
57 * @param {Calendar} this
66 Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component, {
69 * @cfg {Number} startDay
70 * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
78 getAutoCreate : function(){
81 var fc_button = function(name, corner, style, content ) {
84 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
86 'fc-corner-' + corner.split(' ').join(' fc-corner-') :
89 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
100 style : 'width:100%',
107 cls : 'fc-header-left',
109 fc_button('prev', 'left', 'arrow', '‹' ),
110 fc_button('next', 'right', 'arrow', '›' ),
111 { tag: 'span', cls: 'fc-header-space' },
112 fc_button('today', 'left right', '', 'today' ) // neds state disabled..
120 cls : 'fc-header-center',
124 cls: 'fc-header-title',
127 html : 'month / year'
135 cls : 'fc-header-right',
137 /* fc_button('month', 'left', '', 'month' ),
138 fc_button('week', '', '', 'week' ),
139 fc_button('day', 'right', '', 'day' )
151 header = this.header;
154 var cal_heads = function() {
156 // fixme - handle this.
158 for (var i =0; i < Date.dayNames.length; i++) {
159 var d = Date.dayNames[i];
162 cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
163 html : d.substring(0,3)
167 ret[0].cls += ' fc-first';
168 ret[6].cls += ' fc-last';
171 var cal_cell = function(n) {
174 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
179 cls: 'fc-day-number',
183 cls: 'fc-day-content',
187 style: 'position: relative;' // height: 17px;
199 var cal_rows = function() {
202 for (var r = 0; r < 6; r++) {
209 for (var i =0; i < Date.dayNames.length; i++) {
210 var d = Date.dayNames[i];
211 row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
214 row.cn[0].cls+=' fc-first';
215 row.cn[0].cn[0].style = 'min-height:90px';
216 row.cn[6].cls+=' fc-last';
220 ret[0].cls += ' fc-first';
221 ret[4].cls += ' fc-prev-last';
222 ret[5].cls += ' fc-last';
229 cls: 'fc-border-separate',
230 style : 'width:100%',
238 cls : 'fc-first fc-last',
257 style : "position: relative;",
260 cls : 'fc-view fc-view-month fc-grid',
261 style : 'position: relative',
265 cls : 'fc-event-container',
266 style : 'position:absolute;z-index:8;top:0;left:0;'
284 initEvents : function()
287 throw "can not find store for calendar";
293 style: "text-align:center",
297 style: "background-color:white;width:50%;margin:250 auto",
301 src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
312 this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
314 var size = this.el.select('.fc-content', true).first().getSize();
315 this.maskEl.setSize(size.width, size.height);
316 this.maskEl.enableDisplayMode("block");
321 this.store = Roo.factory(this.store, Roo.data);
322 this.store.on('load', this.onLoad, this);
323 this.store.on('beforeload', this.onBeforeLoad, this);
327 this.cells = this.el.select('.fc-day',true);
328 //Roo.log(this.cells);
329 this.textNodes = this.el.query('.fc-day-number');
330 this.cells.addClassOnOver('fc-state-hover');
332 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
333 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
334 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
335 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
337 this.on('monthchange', this.onMonthChange, this);
339 this.update(new Date().clearTime());
342 resize : function() {
343 var sz = this.el.getSize();
345 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
346 this.el.select('.fc-day-content div',true).setHeight(34);
351 showPrevMonth : function(e){
352 this.update(this.activeDate.add("mo", -1));
354 showToday : function(e){
355 this.update(new Date().clearTime());
358 showNextMonth : function(e){
359 this.update(this.activeDate.add("mo", 1));
363 showPrevYear : function(){
364 this.update(this.activeDate.add("y", -1));
368 showNextYear : function(){
369 this.update(this.activeDate.add("y", 1));
374 update : function(date)
376 var vd = this.activeDate;
377 this.activeDate = date;
378 // if(vd && this.el){
379 // var t = date.getTime();
380 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
381 // Roo.log('using add remove');
383 // this.fireEvent('monthchange', this, date);
385 // this.cells.removeClass("fc-state-highlight");
386 // this.cells.each(function(c){
387 // if(c.dateValue == t){
388 // c.addClass("fc-state-highlight");
389 // setTimeout(function(){
390 // try{c.dom.firstChild.focus();}catch(e){}
400 var days = date.getDaysInMonth();
402 var firstOfMonth = date.getFirstDateOfMonth();
403 var startingPos = firstOfMonth.getDay()-this.startDay;
405 if(startingPos < this.startDay){
409 var pm = date.add(Date.MONTH, -1);
410 var prevStart = pm.getDaysInMonth()-startingPos;
412 this.cells = this.el.select('.fc-day',true);
413 this.textNodes = this.el.query('.fc-day-number');
414 this.cells.addClassOnOver('fc-state-hover');
416 var cells = this.cells.elements;
417 var textEls = this.textNodes;
419 Roo.each(cells, function(cell){
420 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
425 // convert everything to numbers so it's fast
427 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
430 //Roo.log(prevStart);
432 var today = new Date().clearTime().getTime();
433 var sel = date.clearTime().getTime();
434 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
435 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
436 var ddMatch = this.disabledDatesRE;
437 var ddText = this.disabledDatesText;
438 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
439 var ddaysText = this.disabledDaysText;
440 var format = this.format;
442 var setCellClass = function(cal, cell){
446 //Roo.log('set Cell Class');
454 cell.className += " fc-today";
455 cell.className += " fc-state-highlight";
456 cell.title = cal.todayText;
459 // disable highlight in other month..
460 //cell.className += " fc-state-highlight";
465 cell.className = " fc-state-disabled";
466 cell.title = cal.minText;
470 cell.className = " fc-state-disabled";
471 cell.title = cal.maxText;
475 if(ddays.indexOf(d.getDay()) != -1){
476 cell.title = ddaysText;
477 cell.className = " fc-state-disabled";
480 if(ddMatch && format){
481 var fvalue = d.dateFormat(format);
482 if(ddMatch.test(fvalue)){
483 cell.title = ddText.replace("%0", fvalue);
484 cell.className = " fc-state-disabled";
488 if (!cell.initialClassName) {
489 cell.initialClassName = cell.dom.className;
492 cell.dom.className = cell.initialClassName + ' ' + cell.className;
497 for(; i < startingPos; i++) {
498 textEls[i].innerHTML = (++prevStart);
499 d.setDate(d.getDate()+1);
501 cells[i].className = "fc-past fc-other-month";
502 setCellClass(this, cells[i]);
507 for(; i < days; i++){
508 intDay = i - startingPos + 1;
509 textEls[i].innerHTML = (intDay);
510 d.setDate(d.getDate()+1);
512 cells[i].className = ''; // "x-date-active";
513 setCellClass(this, cells[i]);
518 textEls[i].innerHTML = (++extraDays);
519 d.setDate(d.getDate()+1);
521 cells[i].className = "fc-future fc-other-month";
522 setCellClass(this, cells[i]);
525 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
527 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
529 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
530 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
533 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
534 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
537 this.fireEvent('monthchange', this, date);
541 if(!this.internalRender){
542 var main = this.el.dom.firstChild;
543 var w = main.offsetWidth;
544 this.el.setWidth(w + this.el.getBorderWidth("lr"));
545 Roo.fly(main).setWidth(w);
546 this.internalRender = true;
547 // opera does not respect the auto grow header center column
548 // then, after it gets a width opera refuses to recalculate
549 // without a second pass
550 if(Roo.isOpera && !this.secondPass){
551 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
552 this.secondPass = true;
553 this.update.defer(10, this, [date]);
560 findCell : function(dt) {
561 dt = dt.clearTime().getTime();
563 this.cells.each(function(c){
564 //Roo.log("check " +c.dateValue + '?=' + dt);
565 if(c.dateValue == dt){
575 findCells : function(ev) {
576 var s = ev.start.clone().clearTime().getTime();
578 var e= ev.end.clone().clearTime().getTime();
581 this.cells.each(function(c){
582 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
596 // findBestRow: function(cells)
600 // for (var i =0 ; i < cells.length;i++) {
601 // ret = Math.max(cells[i].rows || 0,ret);
608 addItem : function(ev)
610 // look for vertical location slot in
611 var cells = this.findCells(ev);
613 // ev.row = this.findBestRow(cells);
615 // work out the location.
619 for(var i =0; i < cells.length; i++) {
621 cells[i].row = cells[0].row;
624 cells[i].row = cells[i].row + 1;
634 if (crow.start.getY() == cells[i].getY()) {
653 cells[0].events.push(ev);
655 this.calevents.push(ev);
658 clearEvents: function() {
664 Roo.each(this.cells.elements, function(c){
670 Roo.each(this.calevents, function(e) {
671 Roo.each(e.els, function(el) {
672 el.un('mouseenter' ,this.onEventEnter, this);
673 el.un('mouseleave' ,this.onEventLeave, this);
678 Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
684 renderEvents: function()
688 this.cells.each(function(c) {
697 if(c.row != c.events.length){
698 r = 4 - (4 - (c.row - c.events.length));
701 c.events = ev.slice(0, r);
702 c.more = ev.slice(r);
704 if(c.more.length && c.more.length == 1){
705 c.events.push(c.more.pop());
708 c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
712 this.cells.each(function(c) {
714 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
717 for (var e = 0; e < c.events.length; e++){
718 var ev = c.events[e];
721 for(var i = 0; i < rows.length; i++) {
723 // how many rows should it span..
726 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
727 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
732 cls: 'fc-event-inner',
736 // cls: 'fc-event-time',
737 // html : cells.length > 1 ? '' : ev.time
741 cls: 'fc-event-title',
742 html : String.format('{0}', ev.title)
749 cls: 'ui-resizable-handle ui-resizable-e',
750 html : '  '
757 cfg.cls += ' fc-event-start';
759 if ((i+1) == rows.length) {
760 cfg.cls += ' fc-event-end';
763 var ctr = _this.el.select('.fc-event-container',true).first();
764 var cg = ctr.createChild(cfg);
766 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
767 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
769 var r = (c.more.length) ? 1 : 0;
770 cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
771 cg.setWidth(ebox.right - sbox.x -2);
773 cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
774 cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
775 cg.on('click', _this.onEventClick, _this, ev);
786 cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
787 style : 'position: absolute',
791 cls: 'fc-event-inner',
795 cls: 'fc-event-title',
803 cls: 'ui-resizable-handle ui-resizable-e',
804 html : '  '
810 var ctr = _this.el.select('.fc-event-container',true).first();
811 var cg = ctr.createChild(cfg);
813 var sbox = c.select('.fc-day-content',true).first().getBox();
814 var ebox = c.select('.fc-day-content',true).first().getBox();
816 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
817 cg.setWidth(ebox.right - sbox.x -2);
819 cg.on('click', _this.onMoreEventClick, _this, c.more);
829 onEventEnter: function (e, el,event,d) {
830 this.fireEvent('evententer', this, el, event);
833 onEventLeave: function (e, el,event,d) {
834 this.fireEvent('eventleave', this, el, event);
837 onEventClick: function (e, el,event,d) {
838 this.fireEvent('eventclick', this, el, event);
841 onMonthChange: function () {
845 onMoreEventClick: function(e, el, more)
849 this.calpopover.placement = 'right';
850 this.calpopover.setTitle('More');
852 this.calpopover.setContent('');
854 var ctr = this.calpopover.el.select('.popover-content', true).first();
856 Roo.each(more, function(m){
858 cls : 'fc-event-hori fc-event-draggable',
861 var cg = ctr.createChild(cfg);
863 cg.on('click', _this.onEventClick, _this, m);
866 this.calpopover.show(el);
876 if(this.store.getCount() > 0){
877 this.store.data.each(function(d){
880 start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
881 end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
882 time : d.data.start_time,
883 title : d.data.title,
884 description : d.data.description,
892 if(this.calevents.length && this.loadMask){
897 onBeforeLoad: function()