X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FCalendarPanel.js;h=1755aa4a64eb291824991c15be6d5cc1660ae0b6;hb=75cbc4ce04c9c01ac47671cb01320ce699128d00;hp=f20e03ce9688fe696a6a0abdc445126d28edfc7c;hpb=421795ff286ca6974bb7ddcbbb8c697fae08d1e2;p=roojs1 diff --git a/Roo/CalendarPanel.js b/Roo/CalendarPanel.js index f20e03ce96..1755aa4a64 100644 --- a/Roo/CalendarPanel.js +++ b/Roo/CalendarPanel.js @@ -40,14 +40,17 @@ Roo.CalendarPanel = function(config){ //this.footer = Roo.factory(this.footer, Roo); } + this.view = new Roo.calendar.View(Roo.apply({ + skipNavHeader : true, + skipMonthHeader : false + + },config)); + this.on('activate', function() { Roo.log('activate'); - if (this.rendered) { - return; - } - this.rendered = true; + //console.log('render tree'); this.render(); },this); @@ -87,276 +90,86 @@ Roo.CalendarPanel = function(config){ * @param {Calendar} this * @param {event} */ - 'eventclick': true + 'eventclick': true, + /** + * @event rendered + * Fires when the grid is rendered + * @param {Calendar} this + + */ + 'rendered': true + }); - + this.relayEvents(this.view, ["select","monthchange","evententer","eventleave","rendered"]); + //this.grid = grid; //this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel"); }; + Roo.extend(Roo.CalendarPanel, Roo.ContentPanel, { - getId : function(){ - return this.id; - }, - /* - setSize : function(width, height){ - if(!this.ignoreResize(width, height)){ - var grid = this.grid; - var size = this.adjustForComponents(width, height); - grid.getGridEl().setSize(size.width, size.height); - grid.autoSize(); - } - }, - beforeSlide : function(){ - this.grid.getView().scroller.clip(); - }, - - afterSlide : function(){ - this.grid.getView().scroller.unclip(); - }, - */ - destroy : function(){ - // this.grid.destroy(); - // delete this.grid; - Roo.GridPanel.superclass.destroy.call(this); + + render : function() + { + var ct = this.el.appendChild(document.createElement("div")); + this.onRender(this.el, false) }, - - render : function() + onRender : function(ct, position) { + if (this.rendered) { + return; + } + this.rendered = true; Roo.log("render calendar"); - var res = Roo.bootstrap.Calendar.prototype.getAutoCreate(); - } - - - getAutoCreate : function(){ + //Roo.bootstrap.Component.superclass.onRender.call(this, ct, position); - fc_button = function(name, corner, style, content ) { - return Roo.apply({},{ - tag : 'span', - cls : 'fc-button fc-button-'+name+' fc-state-default ' + - (corner.length ? - 'fc-corner-' + corner.split(' ').join(' fc-corner-') : - '' - ), - html : ''+content +'', - unselectable: 'on' - }); - }; + var cfg = Roo.apply({}, this.view.getAutoCreate()); + cfg.id = Roo.id(); - var header = { - tag : 'table', - cls : 'fc-header', - style : 'width:100%', - cn : [ - { - tag: 'tr', - cn : [ - { - tag : 'td', - cls : 'fc-header-left', - cn : [ - fc_button('prev', 'left', 'arrow', '‹' ), - fc_button('next', 'right', 'arrow', '›' ), - { tag: 'span', cls: 'fc-header-space' }, - fc_button('today', 'left right', '', 'today' ) // neds state disabled.. - - - ] - }, - - { - tag : 'td', - cls : 'fc-header-center', - cn : [ - { - tag: 'span', - cls: 'fc-header-title', - cn : { - tag: 'H2', - html : 'month / year' - } - } - - ] - }, - { - tag : 'td', - cls : 'fc-header-right', - cn : [ - /* fc_button('month', 'left', '', 'month' ), - fc_button('week', '', '', 'week' ), - fc_button('day', 'right', '', 'day' ) - */ - - ] - } - - ] - } - ] - }; - - - var cal_heads = function() { - var ret = []; - // fixme - handle this. - - for (var i =0; i < Date.dayNames.length; i++) { - var d = Date.dayNames[i]; - ret.push({ - tag: 'th', - cls : 'fc-day-header fc-' + d.substring(0,3).toLowerCase() + ' fc-widget-header', - html : d.substring(0,3) - }); - - } - ret[0].cls += ' fc-first'; - ret[6].cls += ' fc-last'; - return ret; - }; - var cal_cell = function(n) { - return { - tag: 'td', - cls : 'fc-day fc-'+n + ' fc-widget-content', ///fc-other-month fc-past - cn : [ - { - cn : [ - { - cls: 'fc-day-number', - html: 'D' - }, - { - cls: 'fc-day-content', - - cn : [ - { - style: 'position: relative;' // height: 17px; - } - ] - } - - - ] - } - ] - + // fill in the extra attributes + if (this.xattr && typeof(this.xattr) =='object') { + for (var i in this.xattr) { + cfg[i] = this.xattr[i]; } - }; - var cal_rows = function() { - - var ret = [] - for (var r = 0; r < 6; r++) { - var row= { - tag : 'tr', - cls : 'fc-week', - cn : [] - }; - - for (var i =0; i < Date.dayNames.length; i++) { - var d = Date.dayNames[i]; - row.cn.push(cal_cell(d.substring(0,3).toLowerCase())); - - } - row.cn[0].cls+=' fc-first'; - row.cn[0].cn[0].style = 'min-height:90px'; - row.cn[6].cls+=' fc-last'; - ret.push(row); - - } - ret[0].cls += ' fc-first'; - ret[4].cls += ' fc-prev-last'; - ret[5].cls += ' fc-last'; - return ret; - - }; - - var cal_table = { - tag: 'table', - cls: 'fc-border-separate', - style : 'width:100%', - cellspacing : 0, - cn : [ - { - tag: 'thead', - cn : [ - { - tag: 'tr', - cls : 'fc-first fc-last', - cn : cal_heads() - } - ] - }, - { - tag: 'tbody', - cn : cal_rows() - } - - ] - }; - - var cfg = { - cls : 'fc fc-ltr', - cn : [ - header, - { - cls : 'fc-content', - style : "position: relative;", - cn : [ - { - cls : 'fc-view fc-view-month fc-grid', - style : 'position: relative', - unselectable : 'on', - cn : [ - { - cls : 'fc-event-container', - style : 'position:absolute;z-index:8;top:0;left:0;' - }, - cal_table - ] - } - ] - - } - ] - - }; + } - + if(this.dataId){ + cfg.dataId = this.dataId; + } - return cfg; - }, - - - initEvents : function() - { - if(!this.store){ - throw "can not find store for combo"; + if (this.cls) { + cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls; } - this.store = Roo.factory(this.store, Roo.data); - this.store.on('load', this.onLoad, this); + if (this.style) { // fixme needs to support more complex style data. + cfg.style = this.style; + } - this.resize(); - this.cells = this.el.select('.fc-day',true); + if(this.name){ + cfg.name = this.name; + } - this.textNodes = this.el.query('.fc-day-number'); - this.cells.addClassOnOver('fc-state-hover'); + this.view.el = ct.createChild(cfg, position); - this.el.select('.fc-button-prev',true).on('click', this.showPrevMonth, this); - this.el.select('.fc-button-next',true).on('click', this.showNextMonth, this); - this.el.select('.fc-button-today',true).on('click', this.showToday, this); - this.el.select('.fc-button',true).addClassOnOver('fc-state-hover'); + //if(this.tabIndex !== undefined){ + // this.el.dom.setAttribute('tabIndex', this.tabIndex); + //} - this.on('monthchange', this.onMonthChange, this); - this.update(new Date().clearTime()); - }, + this.view.initEvents(); + this.fireEvent('rendered'); + } + + + }); + +