here a example of creating your own custom headers (dayview and weekview), this example supports configuration of:
* visible days
* visible hours
* adjustable timeinterval (10, 15, 20 or 30 minutes)
* adjustable column width
dayview:
weekview:
the code:
//RS: width of a quarter (15 min.) (dayview) / hour (weekview) column min = 20, max = 50
Sch.ColumnFactory.defaults.width = 20;
//RS: visible days
Sch.ColumnFactory.defaults.visibleDays = [1,2,3,4,5];
//RS: visible hours
Sch.ColumnFactory.defaults.visibleHours = {
startHour: 7,
startMinute: 0,
endHour: 18,
endMinute: 0
};
//RS: time interval in minutes
Sch.ColumnFactory.defaults.timeInterval = 15;
Ext.apply(Sch.ColumnFactory, {
//RS : find day
dayExists : function (visibleDays, day) {
for (var i = 0; i < visibleDays.length; i++) {
if (visibleDays[i] == day) {
return true;
}
}
return false;
},
skipDayFunction : function(dt, intervalEnd){
return (!this.dayExists(this.defaults.visibleDays, dt.getDay()));
},
skipDayAndHourFunction : function(dt, intervalEnd){
return ((!this.dayExists(this.defaults.visibleDays, dt.getDay())) ||
((dt.getHours() < this.defaults.visibleHours.startHour) || (dt.getHours() > this.defaults.visibleHours.endHour)))
},
createHourColumnsInternal : function(startDate, endDate, headerRenderer, skipFn, defaults) {
var cols = [],
dt = startDate,
colCfg,
intervalEnd;
if (typeof skipFn !== "function") {
defaults = skipFn;
skipFn = null;
}
while (dt < endDate) {
intervalEnd = Date.min(dt.add(Date.HOUR, 1), endDate);
if (!skipFn || skipFn.call(this, dt, intervalEnd) !== true) {
colCfg = Ext.apply({
start : dt,
end : intervalEnd
}, defaults, this.defaults);
headerRenderer.call(this, dt, intervalEnd, colCfg);
cols.push(colCfg);
}
dt = intervalEnd;
}
return cols;
},
createMinutesColumnsInternal : function(startDate, endDate, interval, headerRenderer, skipFn, defaults, minutes) {
var cols = [],
dt = startDate,
colCfg,
intervalEnd;
if (typeof skipFn !== "function") {
minutes = defaults;
defaults = skipFn;
skipFn = null;
}
while (dt < endDate) {
intervalEnd = dt.add(interval, minutes);
if (!skipFn || skipFn.call(this, dt, intervalEnd) !== true) {
colCfg = Ext.apply({
start : dt,
end : intervalEnd
}, defaults, this.defaults);
headerRenderer.call(this, dt, intervalEnd, colCfg);
cols.push(colCfg);
}
dt = intervalEnd;
}
return cols;
}
});
Ext.apply(Sch.ColumnFactory.headerRenderers, {
week : function(startDate, endDate, cfg) {
endDate = endDate.add(Date.MINUTE, -1);
cfg.header = String.format('{0} - {1}', startDate.format('l d F Y'), endDate.format('l d F Y'));
cfg.align = 'left';
},
day : function(startDate, endDate, cfg) {
cfg.header = startDate.format('l d F Y');
cfg.align = 'left';
},
hourAndMinutes : function(startDate, endDate, cfg) {
cfg.header = startDate.format('H:i');
cfg.align = 'center';
},
hour : function(startDate, endDate, cfg) {
cfg.header = startDate.format('H');
cfg.align = 'center';
},
minutes : function(startDate, endDate, cfg) {
cfg.header = ' ';
cfg.align = 'center';
}
});
Ext.apply(Sch.ColumnFactory.columnConstructors, {
quarterAndHourAndDay : function(startDate, endDate, defaults) {
var cols = this.createMinutesColumnsInternal(startDate, endDate, Date.MINUTE, this.headerRenderers.minutes, this.skipDayAndHourFunction, defaults, Sch.ColumnFactory.defaults.timeInterval);
return {
columns : cols,
rows : [
Sch.ColumnFactory.rowConstructors.day.call(this, startDate, endDate, null, this.skipDayFunction),
Sch.ColumnFactory.rowConstructors.hour.call(this, startDate, endDate, this.headerRenderers.hourAndMinutes, this.skipDayAndHourFunction)
]
};
},
hourAndDayAndWeek : function(startDate, endDate, defaults) {
var cols = this.createHourColumnsInternal(startDate, endDate, this.headerRenderers.hour, this.skipDayAndHourFunction, defaults);
return {
columns : cols,
rows : [
Sch.ColumnFactory.rowConstructors.week.call(this, startDate, endDate, null, this.skipDayFunction),
Sch.ColumnFactory.rowConstructors.dayWeek.call(this, startDate, endDate, null, this.skipDayFunction)
]
}
},
dayAndWeekAndMonth : function(startDate, endDate, defaults) {
var cols = this.createColumnsInternal(startDate, endDate, Date.DAY, this.headerRenderers.day, this.skipDayFunction, defaults);
return {
columns : cols,
rows : [
Sch.ColumnFactory.rowConstructors.month.call(this, startDate, endDate, null),
Sch.ColumnFactory.rowConstructors.week.call(this, startDate, endDate, null)
]
}
}
});
Ext.apply(Sch.ColumnFactory.rowConstructors, {
hour : function(startDate, endDate, headerRenderer, skipFn) {
var intervalDuration = Math.round(Date.getDurationInHours(startDate.setHours(this.defaults.visibleHours.startHour), endDate.setHours(this.defaults.visibleHours.endHour))),
cols = [],
dt = startDate,
width,
i = 0,
cfg,
intervalEnd;
while (dt < endDate) {
intervalEnd = Date.min(dt.add(Date.HOUR, 1), endDate);
if (!skipFn || skipFn.call(this, dt, intervalEnd) !== true) {
cfg = Ext.applyIf({
width : Math.round(Date.getDurationInHours(dt, intervalEnd)) / intervalDuration,
align : 'center',
start : dt,
end : intervalEnd
}, Sch.ColumnFactory.defaults);
(headerRenderer || this.headerRenderers.hour).call(this, dt, intervalEnd, cfg);
cols.push(cfg);
}
dt = intervalEnd;
}
return cols;
},
day : function(startDate, endDate, headerRenderer, skipFn) {
var intervalDuration = Math.round(Date.getDurationInDays(startDate, endDate)),
cols = [],
dt = startDate,
i,
cfg,
intervalEnd;
while (dt < endDate) {
intervalEnd = dt.add(Date.DAY, 1);
if (!skipFn || skipFn.call(this, dt, intervalEnd) !== true) {
cfg = Ext.applyIf({
width : 1 / intervalDuration,
align : 'center',
start : dt,
end : intervalEnd
}, Sch.ColumnFactory.defaults);
(headerRenderer || this.headerRenderers.day).call(this, dt, intervalEnd, cfg);
cols.push(cfg);
}
dt = intervalEnd;
}
return cols;
},
dayWeek: function(startDate, endDate, headerRenderer, skipFn) {
var intervalDuration = this.defaults.visibleDays.length,
cols = [],
dt = startDate,
i,
cfg,
intervalEnd;
while (dt < endDate) {
intervalEnd = Date.min(dt.add(Date.DAY, 1).clearTime(), endDate);
if (!skipFn || skipFn.call(this, dt, intervalEnd) !== true) {
cfg = Ext.applyIf({
width : 1 / intervalDuration,
align : 'center',
start : dt,
end : intervalEnd
}, Sch.ColumnFactory.defaults);
(headerRenderer || this.headerRenderers.day).call(this, dt, intervalEnd, cfg);
cols.push(cfg);
}
dt = intervalEnd;
}
return cols;
}
});
Rob Segerink
PCAMobile BV