Show cool things you have done with our products


Post by seg »

Hi everyone,

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:
Image

weekview:
Image

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 = '&nbsp;';
        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;
    }
});
greetings,

Rob Segerink
PCAMobile BV

Post Reply