Header and Footer Template

The headers hold key information like the date, day of the week and in some cases it also holds the full date. Whenever you need to show extra information, or if you would like to change the styling or date format, time format you can use the various header templates, depending on the view configuration. You can also show a footer element, for displaying more information.

Add summaries, statistics or simply color the background depending on the number events that occur on that specific day, like in this example.

Check out how you can customize the date header for the scheduler  Let's go →
Get started with this example

Demo

Hourly header/footer template

With an hourly (or sub-hourly) resolution the renderHour and renderHourFooter options can be used for customizing the header and footer.

Javascript jQuery Angular React Vue 
jsxconst hourView = React.useMemo(() => {
    return {
        timeline: {
            type: 'day'
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomHour = (args) => {
    return <div className={'md-date-header-hour md-date-header-events-' + getEventOccurrence(args.events)}>
        {formatDate('h:mm A', args.date)}
    </div>
}
    
const renderCustomHourFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={hourView}
    renderHour={renderCustomHour}
    renderHourFooter={renderCustomHourFooter}
/>
css.md-date-header-hour {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    border-radius: 8px;
    margin: 3px;
    color: #000;
}

.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Daily header/footer template

With a daily resolution, the renderTimelineDay and renderDayFooter options can come in handy for customizing the header and footer.

Javascript jQuery Angular React Vue 
jsxconst dayView = React.useMemo(() => {
    return {
        timeline: {
            type: 'month'
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomDay = (args) => {
    const date = args.date;
    return <div className={'md-date-header-events-' + getEventOccurrence(args.events)}>
        <div className="md-date-header-day-name">{formatDate('DDD', date)}</div>
        <div className="md-date-header-day-nr">{formatDate('DD', date)}</div>
    </div>;
}
    
const renderCustomDayFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={dayView}
    renderTimelineDay={renderCustomDay}
    renderDayFooter={renderCustomDayFooter}
/>
css.md-date-header-day {
    text-align: center;
    line-height: 20px;
    border-radius: 8px;
    margin: 4px;
}

.md-date-header-day-name {
    font-size: 13px;
    font-weight: 600;
}

.md-date-header-day-nr {
    font-size: 14px;
}

.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Weekly header/footer template

When the resolution is weekly, the renderWeek and renderWeekFooter options can be used.

Javascript jQuery Angular React Vue 
jsxconst weekView = React.useMemo(() => {
    return {
        timeline: {
            type: 'week',
            resolutionHorizontal: 'week',
            size: 6
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomWeek = (args) => {
    return <div className={'md-date-header-week md-date-header-events-' + getEventOccurrence(args.events)}>
        {formatDate('MMM DD', args.startDate) + ' - ' + formatDate('MMM DD', args.endDate)}
    </div>;
}
    
const renderCustomWeekFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={weekView}
    renderWeek={renderCustomWeek}
    renderWeekFooter={renderCustomWeekFooter}
/>
css.md-date-header-template .mbsc-timeline-header-week-text {
    display: block;
}
                            
.md-date-header-template .mbsc-timeline-footer-week {
    text-align: center;
}

.md-date-header-week {
	text-align: center;
	font-weight: 600;
	color: initial;
	line-height: 20px;
	border-radius: 8px;
	margin: 3px;
}


.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Monthly header/footer template

When displaying multiple months, the renderMonth and renderMonthFooter options can be used for customizing the header and footer per month.

Javascript jQuery Angular React Vue 
jsxconst monthView = React.useMemo(() => {
    return {
        timeline: {
            type: 'month',
            resolutionHorizontal: 'month',
            size: 6
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomMonth = (args) => {
    return <div className={'md-date-header-month md-date-header-events-' + getEventOccurrence(args.events)}>
        {formatDate('MMM', args.date)}
    </div>
}
    
const renderCustomMonthFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={monthView}
    renderMonth={renderCustomMonth}
    renderMonthFooter={renderCustomMonthFooter}
/>
css.md-date-header-month {
	text-align: center;
	font-weight: 600;
	color: initial;
	line-height: 20px;
	border-radius: 8px;
	margin: 3px;
}

.md-date-header-day-name {
    font-size: 13px;
    font-weight: 600;
}

.md-date-header-day-nr {
    font-size: 14px;
}

.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Quarter header/footer template

When displaying multiple quarters, the renderQuarter and renderQuarterFooter options can be used for customizing the header and footer per quarter.

Javascript jQuery Angular React Vue 
jsxconst quarterView = React.useMemo(() => {
    return {
        timeline: {
            type: 'year',
            resolutionHorizontal: 'quarter',
            size: 1
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomQuarter = (args) => {
    const title = 'Quarter ' + (args.date.getMonth() / 3 + 1);
    return <div className={'md-date-header-quarter md-date-header-events-' + getEventOccurrence(args.events)}>
        {title}
    </div>
}
    
const renderCustomQuarterFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={quarterView}
    renderQuarter={renderCustomQuarter}
    renderQuarterFooter={renderCustomQuarterFooter}
/>
css.md-date-header-quarter {
	text-align: center;
	font-weight: 600;
	color: initial;
	line-height: 20px;
	border-radius: 8px;
	margin: 3px;
}

.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Yearly header/footer template

With a yearly resolution, the renderYear and renderYearFooter options can be used for customizing the header and footer.

Javascript jQuery Angular React Vue 
jsxconst yearView = React.useMemo(() => {
    return {
        timeline: {
            type: 'year',
            resolutionHorizontal: 'year',
            size: 6
        }
    };
}, []);

const getEventOccurrence = React.useCallback((events) => {
    let eventOccurrence = 'none';

    if (events) {
        var eventNr = events.length;
        if (eventNr === 0) {
            eventOccurrence = 'none';
        } else if (eventNr === 1) {
            eventOccurrence = 'one';
        } else if (eventNr < 4) {
            eventOccurrence = 'few';
        } else {
            eventOccurrence = 'more';
        }
    }

    return eventOccurrence;
}, []);
    
const getOccuppancy = (events) => {
    let occuppancy = 0;
        
    if (events) {
        var resourceIds = [];
        var nr = 0;
        for (const event of events) {
            if (resourceIds.indexOf(event.resource) < 0) {
                nr++;
                resourceIds = [...resourceIds, event.resource];
            }
        }
        occuppancy = (nr * 100 / myResources.length).toFixed(0);
    }

    return occuppancy;
}

const renderCustomYear = (args) => {
    return <div className={'md-date-header-year md-date-header-events-' + getEventOccurrence(args.events)}>
        {formatDate('YYYY', args.date)}
    </div>
}
    
const renderCustomYearFooter = (args) => {
    return <div className="md-date-footer">{getOccuppancy(args.events)} %</div>;
}

return <Eventcalendar
    view={yearView}
    renderYear={renderCustomYear}
    renderYearFooter={renderCustomYearFooter}
/>
css.md-date-header-year {
	text-align: center;
	font-weight: 600;
	color: initial;
	line-height: 20px;
	border-radius: 8px;
	margin: 3px;
}

.md-date-header-events-one {
    background: #e9f5e4;
}

.md-date-header-events-few {
    background: #d0e3c6;
}

.md-date-header-events-more {
    background: #8ca77e;
}

.md-date-footer {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 26px;
}
Preview in fullscreen
Customize time-scale headers and add occupancy footers to a Timeline — format cells from hour to year and display per-slot utilization.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.