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-view fc-view-month fc-grid',
257 style : 'position: relative',
261 cls : 'fc-event-container',
262 style : 'position:absolute;z-index:8;top:0;left:0;'
273 getAutoCreate : function(){
277 if (!this.skipNavHeader) {
278 mbody.push(this.navHeader());
282 style : "position: relative;",
300 initEvents : function()
303 throw "can not find store for calendar";
306 this.store = Roo.factory(this.store, Roo.data);
307 this.store.on('load', this.onLoad, this);
311 this.cells = this.el.select('.fc-day',true);
312 //Roo.log(this.cells);
313 this.textNodes = this.el.query('.fc-day-number');
314 this.cells.addClassOnOver('fc-state-hover');
317 if (!this.skipNavHeader) {
319 this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this);
320 this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this);
321 this.el.select('.fc-button-today',true).on('click', this.showToday, this);
322 this.el.select('.fc-button',true).addClassOnOver('fc-state-hover');
324 this.on('monthchange', this.onMonthChange, this);
326 this.update(new Date().clearTime());
329 resize : function() {
330 var sz = this.el.getSize();
332 this.el.select('.fc-day-header',true).setWidth(sz.width / 7);
333 this.el.select('.fc-day-content div',true).setHeight(34);
338 showPrevMonth : function(e){
339 this.update(this.activeDate.add("mo", -1));
341 showToday : function(e){
342 this.update(new Date().clearTime());
345 showNextMonth : function(e){
346 this.update(this.activeDate.add("mo", 1));
350 showPrevYear : function(){
351 this.update(this.activeDate.add("y", -1));
355 showNextYear : function(){
356 this.update(this.activeDate.add("y", 1));
361 update : function(date)
363 var vd = this.activeDate;
364 this.activeDate = date;
365 // if(vd && this.el){
366 // var t = date.getTime();
367 // if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
368 // Roo.log('using add remove');
370 // this.fireEvent('monthchange', this, date);
372 // this.cells.removeClass("fc-state-highlight");
373 // this.cells.each(function(c){
374 // if(c.dateValue == t){
375 // c.addClass("fc-state-highlight");
376 // setTimeout(function(){
377 // try{c.dom.firstChild.focus();}catch(e){}
387 var days = date.getDaysInMonth();
389 var firstOfMonth = date.getFirstDateOfMonth();
390 var startingPos = firstOfMonth.getDay()-this.startDay;
392 if(startingPos < this.startDay){
396 var pm = date.add(Date.MONTH, -1);
397 var prevStart = pm.getDaysInMonth()-startingPos;
399 this.cells = this.el.select('.fc-day',true);
400 this.textNodes = this.el.query('.fc-day-number');
401 this.cells.addClassOnOver('fc-state-hover');
403 var cells = this.cells.elements;
404 var textEls = this.textNodes;
406 Roo.each(cells, function(cell){
407 cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
412 // convert everything to numbers so it's fast
414 var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
417 //Roo.log(prevStart);
419 var today = new Date().clearTime().getTime();
420 var sel = date.clearTime().getTime();
421 var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
422 var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
423 var ddMatch = this.disabledDatesRE;
424 var ddText = this.disabledDatesText;
425 var ddays = this.disabledDays ? this.disabledDays.join("") : false;
426 var ddaysText = this.disabledDaysText;
427 var format = this.format;
429 var setCellClass = function(cal, cell){
431 //Roo.log('set Cell Class');
439 cell.className += " fc-today";
440 cell.className += " fc-state-highlight";
441 cell.title = cal.todayText;
444 // disable highlight in other month..
445 //cell.className += " fc-state-highlight";
450 cell.className = " fc-state-disabled";
451 cell.title = cal.minText;
455 cell.className = " fc-state-disabled";
456 cell.title = cal.maxText;
460 if(ddays.indexOf(d.getDay()) != -1){
461 cell.title = ddaysText;
462 cell.className = " fc-state-disabled";
465 if(ddMatch && format){
466 var fvalue = d.dateFormat(format);
467 if(ddMatch.test(fvalue)){
468 cell.title = ddText.replace("%0", fvalue);
469 cell.className = " fc-state-disabled";
473 if (!cell.initialClassName) {
474 cell.initialClassName = cell.dom.className;
477 cell.dom.className = cell.initialClassName + ' ' + cell.className;
482 for(; i < startingPos; i++) {
483 textEls[i].innerHTML = (++prevStart);
484 d.setDate(d.getDate()+1);
486 cells[i].className = "fc-past fc-other-month";
487 setCellClass(this, cells[i]);
492 for(; i < days; i++){
493 intDay = i - startingPos + 1;
494 textEls[i].innerHTML = (intDay);
495 d.setDate(d.getDate()+1);
497 cells[i].className = ''; // "x-date-active";
498 setCellClass(this, cells[i]);
503 textEls[i].innerHTML = (++extraDays);
504 d.setDate(d.getDate()+1);
506 cells[i].className = "fc-future fc-other-month";
507 setCellClass(this, cells[i]);
510 this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
512 var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
514 this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
515 this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
518 this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
519 this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
522 this.fireEvent('monthchange', this, date);
526 if(!this.internalRender){
527 var main = this.el.dom.firstChild;
528 var w = main.offsetWidth;
529 this.el.setWidth(w + this.el.getBorderWidth("lr"));
530 Roo.fly(main).setWidth(w);
531 this.internalRender = true;
532 // opera does not respect the auto grow header center column
533 // then, after it gets a width opera refuses to recalculate
534 // without a second pass
535 if(Roo.isOpera && !this.secondPass){
536 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
537 this.secondPass = true;
538 this.update.defer(10, this, [date]);
545 findCell : function(dt) {
546 dt = dt.clearTime().getTime();
548 this.cells.each(function(c){
549 //Roo.log("check " +c.dateValue + '?=' + dt);
550 if(c.dateValue == dt){
560 findCells : function(ev) {
561 var s = ev.start_dt.clone().clearTime().getTime();
563 var e= ev.end_dt.clone().clearTime().getTime();
566 this.cells.each(function(c){
567 ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
581 findBestRow: function(cells)
585 for (var i =0 ; i < cells.length;i++) {
586 ret = Math.max(cells[i].rows || 0,ret);
593 addItem : function(ev)
595 // look for vertical location slot in
596 var cells = this.findCells(ev);
598 ev.row = this.findBestRow(cells);
600 // work out the location.
604 for(var i =0; i < cells.length; i++) {
612 if (crow.start.getY() == cells[i].getY()) {
630 for (var i = 0; i < cells.length;i++) {
631 cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
635 this.calevents.push(ev);
638 clearEvents: function() {
644 Roo.each(this.cells.elements, function(c){
648 Roo.each(this.calevents, function(e) {
649 Roo.each(e.els, function(el) {
650 el.un('mouseenter' ,this.onEventEnter, this);
651 el.un('mouseleave' ,this.onEventLeave, this);
658 renderEvents: function()
660 // first make sure there is enough space..
662 this.cells.each(function(c) {
664 c.select('.fc-day-content div',true).first().setHeight(Math.max(34, c.rows * 20));
667 for (var e = 0; e < this.calevents.length; e++) {
668 var ev = this.calevents[e];
669 var cells = ev.cells;
672 for(var i =0; i < rows.length; i++) {
675 // how many rows should it span..
678 cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
679 style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
684 cls: 'fc-event-inner',
688 cls: 'fc-event-time',
689 html : cells.length > 1 ? '' : ev.start_dt.format('h:ia')
693 cls: 'fc-event-title',
694 html : String.format('{0}', ev.title)
701 cls: 'ui-resizable-handle ui-resizable-e',
702 html : '  '
708 cfg.cls += ' fc-event-start';
710 if ((i+1) == rows.length) {
711 cfg.cls += ' fc-event-end';
714 var ctr = this.el.select('.fc-event-container',true).first();
715 var cg = ctr.createChild(cfg);
717 cg.on('mouseenter' ,this.onEventEnter, this, ev);
718 cg.on('mouseleave' ,this.onEventLeave, this, ev);
719 cg.on('click', this.onEventClick, this, ev);
723 var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
724 var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
726 cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
727 cg.setWidth(ebox.right - sbox.x -2);
735 onEventEnter: function (e, el,event,d) {
736 this.fireEvent('evententer', this, el, event);
739 onEventLeave: function (e, el,event,d) {
740 this.fireEvent('eventleave', this, el, event);
743 onEventClick: function (e, el,event,d) {
744 this.fireEvent('eventclick', this, el, event);
747 onMonthChange: function () {
751 onLoad: function () {
754 //Roo.log('calendar onload');
758 if(this.store.getCount() > 0){
759 this.store.data.each(function(d){
763 var add = Roo.apply({}, d.data);
764 if (typeof(add.end_dt) == 'undefined') {
765 Roo.log("Missing End time in calendar data: ");
769 if (typeof(add.start_dt) == 'undefined') {
770 Roo.log("Missing Start time in calendar data: ");
774 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
775 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
776 add.id = add.id || d.id;
777 add.title = add.title || '??';
780 // other than the 'required' coluns, we should just pass the data from the store.
785 start: new Date(d.data.start_dt),
786 end : new Date(d.data.end_dt),
787 time : d.data.start_time,
788 title : d.data.title,
789 description : d.data.description,