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 {Roo.data.Store} store
70 * The data source for the calendar
74 * @cfg {Number} startDay
75 * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
83 getAutoCreate : function(){
86 var fc_button = function(name, corner, style, content ) {
89 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
91 'fc-corner-' + corner.split(' ').join(' fc-corner-') :
94 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
105 style : 'width:100%',
112 cls : 'fc-header-left',
114 fc_button('prev', 'left', 'arrow', '‹' ),
115 fc_button('next', 'right', 'arrow', '›' ),
116 { tag: 'span', cls: 'fc-header-space' },
117 fc_button('today', 'left right', '', 'today' ) // neds state disabled..
125 cls : 'fc-header-center',
129 cls: 'fc-header-title',
132 html : 'month / year'
140 cls : 'fc-header-right',
142 /* fc_button('month', 'left', '', 'month' ),
143 fc_button('week', '', '', 'week' ),
144 fc_button('day', 'right', '', 'day' )
156 header = this.header;
159 var cal_heads = function() {
161 // fixme - handle this.
163 for (var i =0; i < Date.dayNames.length; i++) {
164 var d = Date.dayNames[i];
167 cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
168 html : d.substring(0,3)
172 ret[0].cls += ' fc-first';
173 ret[6].cls += ' fc-last';
176 var cal_cell = function(n) {
179 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
184 cls: 'fc-day-number',
188 cls: 'fc-day-content',
192 style: 'position: relative;' // height: 17px;
204 var cal_rows = function() {
207 for (var r = 0; r < 6; r++) {
214 for (var i =0; i < Date.dayNames.length; i++) {
215 var d = Date.dayNames[i];
216 row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
219 row.cn[0].cls+=' fc-first';
220 row.cn[0].cn[0].style = 'min-height:90px';
221 row.cn[6].cls+=' fc-last';
225 ret[0].cls += ' fc-first';
226 ret[4].cls += ' fc-prev-last';
227 ret[5].cls += ' fc-last';
234 cls: 'fc-border-separate',
235 style : 'width:100%',
243 cls : 'fc-first fc-last',
262 style : "position: relative;",
265 cls : 'fc-view fc-view-month fc-grid',
266 style : 'position: relative',
270 cls : 'fc-event-container',
271 style : 'position:absolute;z-index:8;top:0;left:0;'
289 initEvents : function()
292 throw "can not find store for calendar";
298 style: "text-align:center",
302 style: "background-color:white;width:50%;margin:250 auto",
306 src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
317 this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
319 var size = this.el.select('.fc-content', true).first().getSize();
320 this.maskEl.setSize(size.width, size.height);
321 this.maskEl.enableDisplayMode("block");
326 this.store = Roo.factory(this.store, Roo.data);
327 this.store.on('load', this.onLoad, this);
328 this.store.on('beforeload', this.onBeforeLoad, this);
332 this.cells = this.el.select('.fc-day',true);
333 //Roo.log(this.cells);
334 this.textNodes = this.el.query('.fc-day-number');
335 this.cells.addClassOnOver('fc-state-hover');
337 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
338 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
339 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
340 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
342 this.on('monthchange', this.onMonthChange, this);
344 this.update(new Date().clearTime());
347 resize : function() {
348 var sz = this.el.getSize();
350 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
351 this.el.select('.fc-day-content div',true).setHeight(34);
356 showPrevMonth : function(e){
357 this.update(this.activeDate.add("mo", -1));
359 showToday : function(e){
360 this.update(new Date().clearTime());
363 showNextMonth : function(e){
364 this.update(this.activeDate.add("mo", 1));
368 showPrevYear : function(){
369 this.update(this.activeDate.add("y", -1));
373 showNextYear : function(){
374 this.update(this.activeDate.add("y", 1));
379 update : function(date)
381 var vd = this.activeDate;
382 this.activeDate = date;
383 // if(vd && this.el){
384 // var t = date.getTime();
385 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
386 // Roo.log('using add remove');
388 // this.fireEvent('monthchange', this, date);
390 // this.cells.removeClass("fc-state-highlight");
391 // this.cells.each(function(c){
392 // if(c.dateValue == t){
393 // c.addClass("fc-state-highlight");
394 // setTimeout(function(){
395 // try{c.dom.firstChild.focus();}catch(e){}
405 var days = date.getDaysInMonth();
407 var firstOfMonth = date.getFirstDateOfMonth();
408 var startingPos = firstOfMonth.getDay()-this.startDay;
410 if(startingPos < this.startDay){
414 var pm = date.add(Date.MONTH, -1);
415 var prevStart = pm.getDaysInMonth()-startingPos;
417 this.cells = this.el.select('.fc-day',true);
418 this.textNodes = this.el.query('.fc-day-number');
419 this.cells.addClassOnOver('fc-state-hover');
421 var cells = this.cells.elements;
422 var textEls = this.textNodes;
424 Roo.each(cells, function(cell){
425 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
430 // convert everything to numbers so it's fast
432 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
435 //Roo.log(prevStart);
437 var today = new Date().clearTime().getTime();
438 var sel = date.clearTime().getTime();
439 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
440 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
441 var ddMatch = this.disabledDatesRE;
442 var ddText = this.disabledDatesText;
443 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
444 var ddaysText = this.disabledDaysText;
445 var format = this.format;
447 var setCellClass = function(cal, cell){
451 //Roo.log('set Cell Class');
459 cell.className += " fc-today";
460 cell.className += " fc-state-highlight";
461 cell.title = cal.todayText;
464 // disable highlight in other month..
465 //cell.className += " fc-state-highlight";
470 cell.className = " fc-state-disabled";
471 cell.title = cal.minText;
475 cell.className = " fc-state-disabled";
476 cell.title = cal.maxText;
480 if(ddays.indexOf(d.getDay()) != -1){
481 cell.title = ddaysText;
482 cell.className = " fc-state-disabled";
485 if(ddMatch && format){
486 var fvalue = d.dateFormat(format);
487 if(ddMatch.test(fvalue)){
488 cell.title = ddText.replace("%0", fvalue);
489 cell.className = " fc-state-disabled";
493 if (!cell.initialClassName) {
494 cell.initialClassName = cell.dom.className;
497 cell.dom.className = cell.initialClassName + ' ' + cell.className;
502 for(; i < startingPos; i++) {
503 textEls[i].innerHTML = (++prevStart);
504 d.setDate(d.getDate()+1);
506 cells[i].className = "fc-past fc-other-month";
507 setCellClass(this, cells[i]);
512 for(; i < days; i++){
513 intDay = i - startingPos + 1;
514 textEls[i].innerHTML = (intDay);
515 d.setDate(d.getDate()+1);
517 cells[i].className = ''; // "x-date-active";
518 setCellClass(this, cells[i]);
523 textEls[i].innerHTML = (++extraDays);
524 d.setDate(d.getDate()+1);
526 cells[i].className = "fc-future fc-other-month";
527 setCellClass(this, cells[i]);
530 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
532 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
534 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
535 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
538 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
539 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
542 this.fireEvent('monthchange', this, date);
546 if(!this.internalRender){
547 var main = this.el.dom.firstChild;
548 var w = main.offsetWidth;
549 this.el.setWidth(w + this.el.getBorderWidth("lr"));
550 Roo.fly(main).setWidth(w);
551 this.internalRender = true;
552 // opera does not respect the auto grow header center column
553 // then, after it gets a width opera refuses to recalculate
554 // without a second pass
555 if(Roo.isOpera && !this.secondPass){
556 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
557 this.secondPass = true;
558 this.update.defer(10, this, [date]);
565 findCell : function(dt) {
566 dt = dt.clearTime().getTime();
568 this.cells.each(function(c){
569 //Roo.log("check " +c.dateValue + '?=' + dt);
570 if(c.dateValue == dt){
580 findCells : function(ev) {
581 var s = ev.start.clone().clearTime().getTime();
583 var e= ev.end.clone().clearTime().getTime();
586 this.cells.each(function(c){
587 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
601 // findBestRow: function(cells)
605 // for (var i =0 ; i < cells.length;i++) {
606 // ret = Math.max(cells[i].rows || 0,ret);
613 addItem : function(ev)
615 // look for vertical location slot in
616 var cells = this.findCells(ev);
618 // ev.row = this.findBestRow(cells);
620 // work out the location.
624 for(var i =0; i < cells.length; i++) {
626 cells[i].row = cells[0].row;
629 cells[i].row = cells[i].row + 1;
639 if (crow.start.getY() == cells[i].getY()) {
658 cells[0].events.push(ev);
660 this.calevents.push(ev);
663 clearEvents: function() {
669 Roo.each(this.cells.elements, function(c){
675 Roo.each(this.calevents, function(e) {
676 Roo.each(e.els, function(el) {
677 el.un('mouseenter' ,this.onEventEnter, this);
678 el.un('mouseleave' ,this.onEventLeave, this);
683 Roo.each(Roo.select('.fc-more-event', true).elements, function(e){
689 renderEvents: function()
693 this.cells.each(function(c) {
702 if(c.row != c.events.length){
703 r = 4 - (4 - (c.row - c.events.length));
706 c.events = ev.slice(0, r);
707 c.more = ev.slice(r);
709 if(c.more.length && c.more.length == 1){
710 c.events.push(c.more.pop());
713 c.row = (c.row - ev.length) + c.events.length + ((c.more.length) ? 1 : 0);
717 this.cells.each(function(c) {
719 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.row * 20));
722 for (var e = 0; e < c.events.length; e++){
723 var ev = c.events[e];
726 for(var i = 0; i < rows.length; i++) {
728 // how many rows should it span..
731 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
732 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
737 cls: 'fc-event-inner',
741 // cls: 'fc-event-time',
742 // html : cells.length > 1 ? '' : ev.time
746 cls: 'fc-event-title',
747 html : String.format('{0}', ev.title)
754 cls: 'ui-resizable-handle ui-resizable-e',
755 html : '  '
762 cfg.cls += ' fc-event-start';
764 if ((i+1) == rows.length) {
765 cfg.cls += ' fc-event-end';
768 var ctr = _this.el.select('.fc-event-container',true).first();
769 var cg = ctr.createChild(cfg);
771 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
772 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
774 var r = (c.more.length) ? 1 : 0;
775 cg.setXY([sbox.x +2, sbox.y + ((c.row - c.events.length - r + e) * 20)]);
776 cg.setWidth(ebox.right - sbox.x -2);
778 cg.on('mouseenter' ,_this.onEventEnter, _this, ev);
779 cg.on('mouseleave' ,_this.onEventLeave, _this, ev);
780 cg.on('click', _this.onEventClick, _this, ev);
791 cls : 'fc-more-event roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable fc-event-start fc-event-end',
792 style : 'position: absolute',
796 cls: 'fc-event-inner',
800 cls: 'fc-event-title',
808 cls: 'ui-resizable-handle ui-resizable-e',
809 html : '  '
815 var ctr = _this.el.select('.fc-event-container',true).first();
816 var cg = ctr.createChild(cfg);
818 var sbox = c.select('.fc-day-content',true).first().getBox();
819 var ebox = c.select('.fc-day-content',true).first().getBox();
821 cg.setXY([sbox.x +2, sbox.y +((c.row - 1) * 20)]);
822 cg.setWidth(ebox.right - sbox.x -2);
824 cg.on('click', _this.onMoreEventClick, _this, c.more);
834 onEventEnter: function (e, el,event,d) {
835 this.fireEvent('evententer', this, el, event);
838 onEventLeave: function (e, el,event,d) {
839 this.fireEvent('eventleave', this, el, event);
842 onEventClick: function (e, el,event,d) {
843 this.fireEvent('eventclick', this, el, event);
846 onMonthChange: function () {
850 onMoreEventClick: function(e, el, more)
854 this.calpopover.placement = 'right';
855 this.calpopover.setTitle('More');
857 this.calpopover.setContent('');
859 var ctr = this.calpopover.el.select('.popover-content', true).first();
861 Roo.each(more, function(m){
863 cls : 'fc-event-hori fc-event-draggable',
866 var cg = ctr.createChild(cfg);
868 cg.on('click', _this.onEventClick, _this, m);
871 this.calpopover.show(el);
881 if(this.store.getCount() > 0){
882 this.store.data.each(function(d){
885 start: (typeof(d.data.start_dt) === 'string') ? new Date.parseDate(d.data.start_dt, 'Y-m-d H:i:s') : d.data.start_dt,
886 end : (typeof(d.data.end_dt) === 'string') ? new Date.parseDate(d.data.end_dt, 'Y-m-d H:i:s') : d.data.end_dt,
887 time : d.data.start_time,
888 title : d.data.title,
889 description : d.data.description,
897 if(this.calevents.length && this.loadMask){
902 onBeforeLoad: function()