/**
* @class Roo.grid.Calendar
- * @extends Roo.util.Grid
+ * @extends Roo.grid.Grid
* This class extends the Grid to provide a calendar widget
* <br><br>Usage:<pre><code>
var grid = new Roo.grid.Calendar("my-container-id", {
if (this.eventStore) {
this.eventStore= Roo.factory(this.eventStore, Roo.data);
this.eventStore.on('load',this.onLoad, this);
+ this.eventStore.on('beforeload',this.clearEvents, this);
}
* @param {Calendar} this
* @param {event}
*/
- 'eventclick': true
+ 'eventclick': true,
+ /**
+ * @event eventrender
+ * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
+ * @param {Calendar} this
+ * @param {data} data to be modified
+ */
+ 'eventrender': true
+
});
Roo.grid.Grid.superclass.constructor.call(this);
},this);
+ if (!Roo.grid.Calendar.style) {
+ Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
+
+
+ '.x-grid-cal .x-grid-col' : {
+ height: 'auto !important',
+ 'vertical-align': 'top'
+ },
+ '.x-grid-cal .fc-event-hori' : {
+ height: '14px'
+ }
+
+
+ }, Roo.id());
+ }
+
+
+
};
Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
/**
*/
eventStore : 25,
-
+
activeDate : false,
startDay : 0,
autoWidth : true,
}
},
setDate :function(date) {
+
+ Roo.log('setDate?');
+
this.resizeColumns();
var vd = this.activeDate;
this.activeDate = date;
var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
+ // this will cause all the cells to mis
var rows= [];
var i =0;
for (var r = 0;r < 6;r++) {
for (var c =0;c < 7;c++) {
this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
- }
+ }
+ }
+
+ this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
+ for(i=0;i<cells.length;i++) {
+ this.cells.elements[i].dayName = cells[i].dayName ;
+ this.cells.elements[i].className = cells[i].className;
+ this.cells.elements[i].initialClassName = cells[i].initialClassName ;
+ this.cells.elements[i].title = cells[i].title ;
+ this.cells.elements[i].dateValue = cells[i].dateValue ;
}
+
+
//this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
//this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
return ret;
},
- findCells : function(ev) {
- var s = ev.start_dt.clone().clearTime().getTime();
+ findCells : function(rec) {
+ var s = rec.data.start_dt.clone().clearTime().getTime();
// Roo.log(s);
- var e= ev.end_dt.clone().clearTime().getTime();
+ var e= rec.data.end_dt.clone().clearTime().getTime();
// Roo.log(e);
var ret = [];
this.cells.each(function(c){
},
- addItem : function(ev)
+ addItem : function(rec)
{
// look for vertical location slot in
- var cells = this.findCells(ev);
+ var cells = this.findCells(rec);
- ev.row = this.findBestRow(cells);
+ rec.row = this.findBestRow(cells);
// work out the location.
}
rows.push(crow);
- ev.els = [];
- ev.rows = rows;
- ev.cells = cells;
+ rec.els = [];
+ rec.rows = rows;
+ rec.cells = cells;
for (var i = 0; i < cells.length;i++) {
- cells[i].rows = Math.max(cells[i].rows || 0 , ev.row + 1 );
+ cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
}
- this.calevents.push(ev);
+
},
clearEvents: function() {
- if(!this.calevents){
+ if (!this.eventStore.getCount()) {
return;
}
-
+ // reset number of rows in cells.
Roo.each(this.cells.elements, function(c){
c.rows = 0;
});
- Roo.each(this.calevents, function(e) {
- Roo.each(e.els, function(el) {
+ this.eventStore.each(function(e) {
+ this.clearEvent(e);
+ },this);
+
+ },
+
+ clearEvent : function(ev)
+ {
+ if (ev.els) {
+ Roo.each(ev.els, function(el) {
el.un('mouseenter' ,this.onEventEnter, this);
el.un('mouseleave' ,this.onEventLeave, this);
el.remove();
},this);
- },this);
+ ev.els = [];
+ }
+ },
+
+
+ renderEvent : function(ev,ctr) {
+ if (!ctr) {
+ ctr = this.view.el.select('.fc-event-container',true).first();
+ }
+
+
+ this.clearEvent(ev);
+ //code
+
+
+ ev.els = [];
+ var cells = ev.cells;
+ var rows = ev.rows;
+ this.fireEvent('eventrender', this, ev);
+
+ for(var i =0; i < rows.length; i++) {
+
+ cls = '';
+ if (i == 0) {
+ cls += ' fc-event-start';
+ }
+ if ((i+1) == rows.length) {
+ cls += ' fc-event-end';
+ }
+
+ //Roo.log(ev.data);
+ // how many rows should it span..
+ var cg = this.eventTmpl.append(ctr,Roo.apply({
+ fccls : cls
+
+ }, ev.data) , true);
+
+
+ cg.on('mouseenter' ,this.onEventEnter, this, ev);
+ cg.on('mouseleave' ,this.onEventLeave, this, ev);
+ cg.on('click', this.onEventClick, this, ev);
+
+ ev.els.push(cg);
+
+ var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+ var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+ //Roo.log(cg);
+
+ cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
+ cg.setWidth(ebox.right - sbox.x -2);
+ }
},
renderEvents: function()
{
// first make sure there is enough space..
+ if (!this.eventTmpl) {
+ this.eventTmpl = new Roo.Template(
+ '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}" style="position: absolute" unselectable="on">' +
+ '<div class="fc-event-inner">' +
+ '<span class="fc-event-time">{time}</span>' +
+ '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
+ '</div>' +
+ '<div class="ui-resizable-heandle ui-resizable-e"> </div>' +
+ '</div>'
+ );
+
+ }
+
+
+
this.cells.each(function(c) {
- Roo.log(Math.max(34, (c.rows || 1)* 20));
- Roo.log(c.select('.fc-day-content div',true).first());
+ //Roo.log(c.select('.fc-day-content div',true).first());
c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
});
- for (var e = 0; e < this.calevents.length; e++) {
- var ev = this.calevents[e];
- var cells = ev.cells;
- var rows = ev.rows;
-
- for(var i =0; i < rows.length; i++) {
-
-
- // how many rows should it span..
-
- var cfg = {
- cls : 'roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable',
- style : 'position: absolute', // left: 387px; width: 121px; top: 359px;
-
- unselectable : "on",
- cn : [
- {
- cls: 'fc-event-inner',
- cn : [
- {
- tag:'span',
- cls: 'fc-event-time',
- html : cells.length > 1 ? '' : ev.start_dt.format('h:ia')
- },
- {
- tag:'span',
- cls: 'fc-event-title',
- html : String.format('{0}', ev.title)
- }
-
-
- ]
- },
- {
- cls: 'ui-resizable-handle ui-resizable-e',
- html : '  '
- }
-
- ]
- };
- if (i == 0) {
- cfg.cls += ' fc-event-start';
- }
- if ((i+1) == rows.length) {
- cfg.cls += ' fc-event-end';
- }
-
- var ctr = this.view.el.select('.fc-event-container',true).first();
- var cg = ctr.createChild(cfg);
-
- cg.on('mouseenter' ,this.onEventEnter, this, ev);
- cg.on('mouseleave' ,this.onEventLeave, this, ev);
- cg.on('click', this.onEventClick, this, ev);
-
- ev.els.push(cg);
-
- var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
- var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
- //Roo.log(cg);
- cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);
- cg.setWidth(ebox.right - sbox.x -2);
- }
-
+ var ctr = this.view.el.select('.fc-event-container',true).first();
+
+ var cls;
+ this.eventStore.each(function(ev){
- }
+ this.renderEvent(ev);
+
+
+ }, this);
+ this.view.layout();
},
onLoad: function () {
- this.clearEvents();
//Roo.log('calendar onload');
-//
- this.calevents = [];
-
+//
if(this.eventStore.getCount() > 0){
- this.eventStore.data.each(function(d){
+
+
+
+ this.eventStore.each(function(d){
// FIXME..
- var add = Roo.apply({}, d.data);
+ var add = d.data;
if (typeof(add.end_dt) == 'undefined') {
Roo.log("Missing End time in calendar data: ");
Roo.log(d);
add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
add.id = add.id || d.id;
add.title = add.title || '??';
- this.addItem(add);
-
- // other than the 'required' coluns, we should just pass the data from the store.
+ this.addItem(d);
- /*cal.addItem({
- id : d.data.id,
- start: new Date(d.data.start_dt),
- end : new Date(d.data.end_dt),
- time : d.data.start_time,
- title : d.data.title,
- description : d.data.description,
- venue : d.data.venue
- });*/
+
},this);
}
projects / roojs1 / blobdiff