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()
259 getAutoCreate : function(){
263 if (!this.skipNavHeader) {
264 mbody.push(this.navHeader());
268 style : "position: relative;",
271 cls : 'fc-view fc-view-month fc-grid',
272 style : 'position: relative',
276 cls : 'fc-event-container',
277 style : 'position:absolute;z-index:8;top:0;left:0;'
295 initEvents : function()
298 throw "can not find store for calendar";
301 this.store = Roo.factory(this.store, Roo.data);
302 this.store.on('load', this.onLoad, this);
306 this.cells = this.el.select('.fc-day',true);
307 //Roo.log(this.cells);
308 this.textNodes = this.el.query('.fc-day-number');
309 this.cells.addClassOnOver('fc-state-hover');
312 if (!this.skipNavHeader) {
314 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
315 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
316 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
317 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
319 this.on('monthchange', this.onMonthChange, this);
321 this.update(new Date().clearTime());
324 resize : function() {
325 var sz = this.el.getSize();
327 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
328 this.el.select('.fc-day-content div',true).setHeight(34);
333 showPrevMonth : function(e){
334 this.update(this.activeDate.add("mo", -1));
336 showToday : function(e){
337 this.update(new Date().clearTime());
340 showNextMonth : function(e){
341 this.update(this.activeDate.add("mo", 1));
345 showPrevYear : function(){
346 this.update(this.activeDate.add("y", -1));
350 showNextYear : function(){
351 this.update(this.activeDate.add("y", 1));
356 update : function(date)
358 var vd = this.activeDate;
359 this.activeDate = date;
360 // if(vd && this.el){
361 // var t = date.getTime();
362 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
363 // Roo.log('using add remove');
365 // this.fireEvent('monthchange', this, date);
367 // this.cells.removeClass("fc-state-highlight");
368 // this.cells.each(function(c){
369 // if(c.dateValue == t){
370 // c.addClass("fc-state-highlight");
371 // setTimeout(function(){
372 // try{c.dom.firstChild.focus();}catch(e){}
382 var days = date.getDaysInMonth();
384 var firstOfMonth = date.getFirstDateOfMonth();
385 var startingPos = firstOfMonth.getDay()-this.startDay;
387 if(startingPos < this.startDay){
391 var pm = date.add(Date.MONTH, -1);
392 var prevStart = pm.getDaysInMonth()-startingPos;
394 this.cells = this.el.select('.fc-day',true);
395 this.textNodes = this.el.query('.fc-day-number');
396 this.cells.addClassOnOver('fc-state-hover');
398 var cells = this.cells.elements;
399 var textEls = this.textNodes;
401 Roo.each(cells, function(cell){
402 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
407 // convert everything to numbers so it's fast
409 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
412 //Roo.log(prevStart);
414 var today = new Date().clearTime().getTime();
415 var sel = date.clearTime().getTime();
416 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
417 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
418 var ddMatch = this.disabledDatesRE;
419 var ddText = this.disabledDatesText;
420 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
421 var ddaysText = this.disabledDaysText;
422 var format = this.format;
424 var setCellClass = function(cal, cell){
426 //Roo.log('set Cell Class');
434 cell.className += " fc-today";
435 cell.className += " fc-state-highlight";
436 cell.title = cal.todayText;
439 // disable highlight in other month..
440 //cell.className += " fc-state-highlight";
445 cell.className = " fc-state-disabled";
446 cell.title = cal.minText;
450 cell.className = " fc-state-disabled";
451 cell.title = cal.maxText;
455 if(ddays.indexOf(d.getDay()) != -1){
456 cell.title = ddaysText;
457 cell.className = " fc-state-disabled";
460 if(ddMatch && format){
461 var fvalue = d.dateFormat(format);
462 if(ddMatch.test(fvalue)){
463 cell.title = ddText.replace("%0", fvalue);
464 cell.className = " fc-state-disabled";
468 if (!cell.initialClassName) {
469 cell.initialClassName = cell.dom.className;
472 cell.dom.className = cell.initialClassName + ' ' + cell.className;
477 for(; i < startingPos; i++) {
478 textEls[i].innerHTML = (++prevStart);
479 d.setDate(d.getDate()+1);
481 cells[i].className = "fc-past fc-other-month";
482 setCellClass(this, cells[i]);
487 for(; i < days; i++){
488 intDay = i - startingPos + 1;
489 textEls[i].innerHTML = (intDay);
490 d.setDate(d.getDate()+1);
492 cells[i].className = ''; // "x-date-active";
493 setCellClass(this, cells[i]);
498 textEls[i].innerHTML = (++extraDays);
499 d.setDate(d.getDate()+1);
501 cells[i].className = "fc-future fc-other-month";
502 setCellClass(this, cells[i]);
505 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
507 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
509 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
510 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
513 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
514 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
517 this.fireEvent('monthchange', this, date);
521 if(!this.internalRender){
522 var main = this.el.dom.firstChild;
523 var w = main.offsetWidth;
524 this.el.setWidth(w + this.el.getBorderWidth("lr"));
525 Roo.fly(main).setWidth(w);
526 this.internalRender = true;
527 // opera does not respect the auto grow header center column
528 // then, after it gets a width opera refuses to recalculate
529 // without a second pass
530 if(Roo.isOpera && !this.secondPass){
531 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
532 this.secondPass = true;
533 this.update.defer(10, this, [date]);
540 findCell : function(dt) {
541 dt = dt.clearTime().getTime();
543 this.cells.each(function(c){
544 //Roo.log("check " +c.dateValue + '?=' + dt);
545 if(c.dateValue == dt){
555 findCells : function(ev) {
556 var s = ev.start_dt.clone().clearTime().getTime();
558 var e= ev.end_dt.clone().clearTime().getTime();
561 this.cells.each(function(c){
562 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
576 findBestRow: function(cells)
580 for (var i =0 ; i < cells.length;i++) {
581 ret = Math.max(cells[i].rows || 0,ret);
588 addItem : function(ev)
590 // look for vertical location slot in
591 var cells = this.findCells(ev);
593 ev.row = this.findBestRow(cells);
595 // work out the location.
599 for(var i =0; i < cells.length; i++) {
607 if (crow.start.getY() == cells[i].getY()) {
625 for (var i = 0; i < cells.length;i++) {
626 cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
630 this.calevents.push(ev);
633 clearEvents: function() {
639 Roo.each(this.cells.elements, function(c){
643 Roo.each(this.calevents, function(e) {
644 Roo.each(e.els, function(el) {
645 el.un('mouseenter' ,this.onEventEnter, this);
646 el.un('mouseleave' ,this.onEventLeave, this);
653 renderEvents: function()
655 // first make sure there is enough space..
657 this.cells.each(function(c) {
659 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.rows * 20));
662 for (var e = 0; e < this.calevents.length; e++) {
663 var ev = this.calevents[e];
664 var cells = ev.cells;
667 for(var i =0; i < rows.length; i++) {
670 // how many rows should it span..
673 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
674 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
679 cls: 'fc-event-inner',
683 cls: 'fc-event-time',
684 html : cells.length > 1 ? '' : ev.start_dt.format('h:ia')
688 cls: 'fc-event-title',
689 html : String.format('{0}', ev.title)
696 cls: 'ui-resizable-handle ui-resizable-e',
697 html : '  '
703 cfg.cls += ' fc-event-start';
705 if ((i+1) == rows.length) {
706 cfg.cls += ' fc-event-end';
709 var ctr = this.el.select('.fc-event-container',true).first();
710 var cg = ctr.createChild(cfg);
712 cg.on('mouseenter' ,this.onEventEnter, this, ev);
713 cg.on('mouseleave' ,this.onEventLeave, this, ev);
714 cg.on('click', this.onEventClick, this, ev);
718 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
719 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
721 cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
722 cg.setWidth(ebox.right - sbox.x -2);
730 onEventEnter: function (e, el,event,d) {
731 this.fireEvent('evententer', this, el, event);
734 onEventLeave: function (e, el,event,d) {
735 this.fireEvent('eventleave', this, el, event);
738 onEventClick: function (e, el,event,d) {
739 this.fireEvent('eventclick', this, el, event);
742 onMonthChange: function () {
746 onLoad: function () {
749 //Roo.log('calendar onload');
753 if(this.store.getCount() > 0){
754 this.store.data.each(function(d){
758 var add = Roo.apply({}, d.data);
759 if (typeof(add.end_dt) == 'undefined') {
760 Roo.log("Missing End time in calendar data: ");
764 if (typeof(add.start_dt) == 'undefined') {
765 Roo.log("Missing Start time in calendar data: ");
769 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
770 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
771 add.id = add.id || d.id;
772 add.title = add.title || '??';
775 // other than the 'required' coluns, we should just pass the data from the store.
780 start: new Date(d.data.start_dt),
781 end : new Date(d.data.end_dt),
782 time : d.data.start_time,
783 title : d.data.title,
784 description : d.data.description,