//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);
* @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 : '<SPAN class="fc-text-'+style+ '">'+content +'</SPAN>',
- 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');
+ }
+
+
+
});
+
+