4 * based on jquery fullcalendar
8 Roo.calendar = Roo.calendar || {};
12 * @class Roo.calendar.View
13 * @extends Roo.bootstrap.Component
14 * Bootstrap Calendar class
17 * Create a new Container
18 * @param {Object} config The config object
24 Roo.calendar.View = function(config){
25 Roo.calendar.View.superclass.constructor.call(this, config);
29 * Fires when a date is selected
30 * @param {DatePicker} this
31 * @param {Date} date The selected date
36 * Fires when the displayed month changes
37 * @param {DatePicker} this
38 * @param {Date} date The selected month
43 * Fires when mouse over an event
44 * @param {Calendar} this
45 * @param {event} Event
50 * Fires when the mouse leaves an
51 * @param {Calendar} this
57 * Fires when the mouse click an
58 * @param {Calendar} this
67 Roo.extend(Roo.calendar.View, Roo.BoxComponent, {
70 * @cfg {Number} startDay
71 * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
76 skipNavHeader : false,
77 skipMonthHeader : false,
82 navHeader: function() {
83 // header is a bit specific to bootstrap implementation - eg. roo would not use this..
85 var fc_button = function(name, corner, style, content ) {
88 cls : 'fc-button fc-button-'+name+' fc-state-default ' +
90 'fc-corner-' + corner.split(' ').join(' fc-corner-') :
93 html : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
101 style : 'width:100%',
108 cls : 'fc-header-left',
110 fc_button('prev', 'left', 'arrow', '‹' ),
111 fc_button('next', 'right', 'arrow', '›' ),
112 { tag: 'span', cls: 'fc-header-space' },
113 fc_button('today', 'left right', '', 'today' ) // neds state disabled..
121 cls : 'fc-header-center',
125 cls: 'fc-header-title',
128 html : 'month / year'
136 cls : 'fc-header-right',
138 // fc_button('month', 'left', '', 'month' ),
139 // fc_button('week', '', '', 'week' ),
140 // fc_button('day', 'right', '', 'day' )
152 monthHeader : function ()
155 // fixme - handle this.
157 for (var i =0; i < Date.dayNames.length; i++) {
158 var d = Date.dayNames[i];
161 cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header',
162 html : d.substring(0,3)
166 ret[0].cls += ' fc-first';
167 ret[6].cls += ' fc-last';
171 monthBody : function()
173 var cal_cell = function(n) {
176 cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past
181 cls: 'fc-day-number',
185 cls: 'fc-day-content',
189 style: 'position: relative;' // height: 17px;
203 for (var r = 0; r < 6; r++) {
210 for (var i =0; i < Date.dayNames.length; i++) {
211 var d = Date.dayNames[i];
212 row.cn.push(cal_cell(d.substring(0,3).toLowerCase()));
215 row.cn[0].cls+=' fc-first';
216 row.cn[0].cn[0].style = 'min-height:90px';
217 row.cn[6].cls+=' fc-last';
221 ret[0].cls += ' fc-first';
222 ret[4].cls += ' fc-prev-last';
223 ret[5].cls += ' fc-last';
228 monthTable : function()
232 cls: 'fc-border-separate',
233 style : 'width:100%',
237 if (!this.skipMonthHeader) {
243 cls : 'fc-first fc-last',
244 cn : this.monthHeader()
251 cn : this.monthBody()
256 cls : 'fc-event-container',
257 style : 'position:absolute;z-index:8;top:0;left:0;'
266 getAutoCreate : function(){
270 if (!this.skipNavHeader) {
271 mbody.push(this.navHeader());
275 style : "position: relative;",
278 cls : 'fc-view fc-view-month fc-grid',
279 style : 'position: relative',
299 initEvents : function()
302 throw "can not find store for calendar";
305 this.store = Roo.factory(this.store, Roo.data);
306 this.store.on('load', this.onLoad, this);
310 this.cells = this.el.select('.fc-day',true);
311 //Roo.log(this.cells);
312 this.textNodes = this.el.query('.fc-day-number');
313 this.cells.addClassOnOver('fc-state-hover');
316 if (!this.skipNavHeader) {
318 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
319 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
320 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
321 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
323 this.on('monthchange', this.onMonthChange, this);
325 this.update(new Date().clearTime());
328 resize : function() {
329 var sz = this.el.getSize();
331 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
332 this.el.select('.fc-day-content div',true).setHeight(34);
337 showPrevMonth : function(e){
338 this.update(this.activeDate.add("mo", -1));
340 showToday : function(e){
341 this.update(new Date().clearTime());
344 showNextMonth : function(e){
345 this.update(this.activeDate.add("mo", 1));
349 showPrevYear : function(){
350 this.update(this.activeDate.add("y", -1));
354 showNextYear : function(){
355 this.update(this.activeDate.add("y", 1));
360 update : function(date)
362 var vd = this.activeDate;
363 this.activeDate = date;
364 // if(vd && this.el){
365 // var t = date.getTime();
366 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
367 // Roo.log('using add remove');
369 // this.fireEvent('monthchange', this, date);
371 // this.cells.removeClass("fc-state-highlight");
372 // this.cells.each(function(c){
373 // if(c.dateValue == t){
374 // c.addClass("fc-state-highlight");
375 // setTimeout(function(){
376 // try{c.dom.firstChild.focus();}catch(e){}
386 var days = date.getDaysInMonth();
388 var firstOfMonth = date.getFirstDateOfMonth();
389 var startingPos = firstOfMonth.getDay()-this.startDay;
391 if(startingPos < this.startDay){
395 var pm = date.add(Date.MONTH, -1);
396 var prevStart = pm.getDaysInMonth()-startingPos;
398 this.cells = this.el.select('.fc-day',true);
399 this.textNodes = this.el.query('.fc-day-number');
400 this.cells.addClassOnOver('fc-state-hover');
402 var cells = this.cells.elements;
403 var textEls = this.textNodes;
405 Roo.each(cells, function(cell){
406 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
411 // convert everything to numbers so it's fast
413 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
416 //Roo.log(prevStart);
418 var today = new Date().clearTime().getTime();
419 var sel = date.clearTime().getTime();
420 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
421 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
422 var ddMatch = this.disabledDatesRE;
423 var ddText = this.disabledDatesText;
424 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
425 var ddaysText = this.disabledDaysText;
426 var format = this.format;
428 var setCellClass = function(cal, cell){
430 //Roo.log('set Cell Class');
438 cell.className += " fc-today";
439 cell.className += " fc-state-highlight";
440 cell.title = cal.todayText;
443 // disable highlight in other month..
444 //cell.className += " fc-state-highlight";
449 cell.className = " fc-state-disabled";
450 cell.title = cal.minText;
454 cell.className = " fc-state-disabled";
455 cell.title = cal.maxText;
459 if(ddays.indexOf(d.getDay()) != -1){
460 cell.title = ddaysText;
461 cell.className = " fc-state-disabled";
464 if(ddMatch && format){
465 var fvalue = d.dateFormat(format);
466 if(ddMatch.test(fvalue)){
467 cell.title = ddText.replace("%0", fvalue);
468 cell.className = " fc-state-disabled";
472 if (!cell.initialClassName) {
473 cell.initialClassName = cell.dom.className;
476 cell.dom.className = cell.initialClassName + ' ' + cell.className;
481 for(; i < startingPos; i++) {
482 textEls[i].innerHTML = (++prevStart);
483 d.setDate(d.getDate()+1);
485 cells[i].className = "fc-past fc-other-month";
486 setCellClass(this, cells[i]);
491 for(; i < days; i++){
492 intDay = i - startingPos + 1;
493 textEls[i].innerHTML = (intDay);
494 d.setDate(d.getDate()+1);
496 cells[i].className = ''; // "x-date-active";
497 setCellClass(this, cells[i]);
502 textEls[i].innerHTML = (++extraDays);
503 d.setDate(d.getDate()+1);
505 cells[i].className = "fc-future fc-other-month";
506 setCellClass(this, cells[i]);
509 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
511 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
513 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
514 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
517 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
518 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
521 this.fireEvent('monthchange', this, date);
525 if(!this.internalRender){
526 var main = this.el.dom.firstChild;
527 var w = main.offsetWidth;
528 this.el.setWidth(w + this.el.getBorderWidth("lr"));
529 Roo.fly(main).setWidth(w);
530 this.internalRender = true;
531 // opera does not respect the auto grow header center column
532 // then, after it gets a width opera refuses to recalculate
533 // without a second pass
534 if(Roo.isOpera && !this.secondPass){
535 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
536 this.secondPass = true;
537 this.update.defer(10, this, [date]);
544 findCell : function(dt) {
545 dt = dt.clearTime().getTime();
547 this.cells.each(function(c){
548 //Roo.log("check " +c.dateValue + '?=' + dt);
549 if(c.dateValue == dt){
559 findCells : function(ev) {
560 var s = ev.start_dt.clone().clearTime().getTime();
562 var e= ev.end_dt.clone().clearTime().getTime();
565 this.cells.each(function(c){
566 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
580 findBestRow: function(cells)
584 for (var i =0 ; i < cells.length;i++) {
585 ret = Math.max(cells[i].rows || 0,ret);
592 addItem : function(ev)
594 // look for vertical location slot in
595 var cells = this.findCells(ev);
597 ev.row = this.findBestRow(cells);
599 // work out the location.
603 for(var i =0; i < cells.length; i++) {
611 if (crow.start.getY() == cells[i].getY()) {
629 for (var i = 0; i < cells.length;i++) {
630 cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
634 this.calevents.push(ev);
637 clearEvents: function() {
643 Roo.each(this.cells.elements, function(c){
647 Roo.each(this.calevents, function(e) {
648 Roo.each(e.els, function(el) {
649 el.un('mouseenter' ,this.onEventEnter, this);
650 el.un('mouseleave' ,this.onEventLeave, this);
657 renderEvents: function()
659 // first make sure there is enough space..
661 this.cells.each(function(c) {
663 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.rows * 20));
666 for (var e = 0; e < this.calevents.length; e++) {
667 var ev = this.calevents[e];
668 var cells = ev.cells;
671 for(var i =0; i < rows.length; i++) {
674 // how many rows should it span..
677 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
678 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
683 cls: 'fc-event-inner',
687 cls: 'fc-event-time',
688 html : cells.length > 1 ? '' : ev.start_dt.format('h:ia')
692 cls: 'fc-event-title',
693 html : String.format('{0}', ev.title)
700 cls: 'ui-resizable-handle ui-resizable-e',
701 html : '  '
707 cfg.cls += ' fc-event-start';
709 if ((i+1) == rows.length) {
710 cfg.cls += ' fc-event-end';
713 var ctr = this.el.select('.fc-event-container',true).first();
714 var cg = ctr.createChild(cfg);
716 cg.on('mouseenter' ,this.onEventEnter, this, ev);
717 cg.on('mouseleave' ,this.onEventLeave, this, ev);
718 cg.on('click', this.onEventClick, this, ev);
722 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
723 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
725 cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
726 cg.setWidth(ebox.right - sbox.x -2);
734 onEventEnter: function (e, el,event,d) {
735 this.fireEvent('evententer', this, el, event);
738 onEventLeave: function (e, el,event,d) {
739 this.fireEvent('eventleave', this, el, event);
742 onEventClick: function (e, el,event,d) {
743 this.fireEvent('eventclick', this, el, event);
746 onMonthChange: function () {
750 onLoad: function () {
753 //Roo.log('calendar onload');
757 if(this.store.getCount() > 0){
758 this.store.data.each(function(d){
762 var add = Roo.apply({}, d.data);
763 if (typeof(add.end_dt) == 'undefined') {
764 Roo.log("Missing End time in calendar data: ");
768 if (typeof(add.start_dt) == 'undefined') {
769 Roo.log("Missing Start time in calendar data: ");
773 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
774 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
775 add.id = add.id || d.id;
776 add.title = add.title || '??';
779 // other than the 'required' coluns, we should just pass the data from the store.
784 start: new Date(d.data.start_dt),
785 end : new Date(d.data.end_dt),
786 time : d.data.start_time,
787 title : d.data.title,
788 description : d.data.description,