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 →
Demo
Hourly header/footer template
With an hourly (or sub-hourly) resolution the
hourTemplate and hourFooterTemplate options can be used for customizing the header and footer.
htmlhtml<mbsc-eventcalendar
[view]="hourView"
[hourTemplate]="hourTemp"
[hourFooterTemplate]="hourFooterTemp">
<ng-template #hourTemp let-day>
<div [ngClass]="'md-date-header-hour md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('h:mm A', day.date)}}
</div>
</ng-template>
<ng-template #hourFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tshourView: MbscEventcalendarView = {
timeline: {
type: 'day'
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
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
timelineDayTemplate and dayFooterTemplate options can come in handy for customizing the header and footer.
htmlhtml<mbsc-eventcalendar
[view]="dayView"
[timelineDayTemplate]="dayTemp"
[dayFooterTemplate]="dayFooterTemp">
<ng-template #dayTemp let-day>
<div [ngClass]="'md-date-header-day md-date-header-events-' + getEventOccurrence(day)">
<div class="md-date-header-day-name">
{{formatDate('DDD', day.date)}}
</div>
<div class="md-date-header-day-nr">
{{formatDate('DD', day.date)}}
</div>
</div>
</ng-template>
<ng-template #dayFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tsdayView: MbscEventcalendarView = {
timeline: {
type: 'month'
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
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
weekTemplate and weekFooterTemplate options can be used.
htmlhtml<mbsc-eventcalendar
[view]="weekView"
[weekTemplate]="weekTemp"
[weekFooterTemplate]="weekFooterTemp">
<ng-template #weekTemp let-day>
<div [ngClass]="'md-date-header-week md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('MMM DD', day.startDate)}} - {{formatDate('MMM DD', args.endDate)}}
</div>
</ng-template>
<ng-template #weekFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tsweekView: MbscEventcalendarView = {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
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
monthTemplate and monthFooterTemplate options can be used for customizing the header and footer per month.
htmlhtml<mbsc-eventcalendar
[view]="monthView"
[monthTemplate]="monthTemp"
[monthFooterTemplate]="monthFooterTemp">
<ng-template #monthTemp let-day>
<div [ngClass]="'md-date-header-month md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('MMM', day.date)}}
</div>
</ng-template>
<ng-template #monthFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tsmonthView: MbscEventcalendarView = {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
css.md-date-header-month {
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;
}
Quarter header/footer template
When displaying multiple quarters, the
quarterTemplate and quarterFooterTemplate options can be used for customizing the header and footer per quarter.
htmlhtml<mbsc-eventcalendar
[view]="quarterView"
[quarterTemplate]="quarterTemp"
[quarterFooterTemplate]="quarterFooterTemp">
<ng-template #quarterTemp let-day>
<div [ngClass]="'md-date-header-quarter md-date-header-events-' + getEventOccurrence(day)">
Quarter {{ (day.date.getMonth() / 3 + 1) }}
</div>
</ng-template>
<ng-template #quarterFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tsquarterView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
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
yearTemplate and yearFooterTemplate options can be used for customizing the header and footer.
htmlhtml<mbsc-eventcalendar
[view]="yearView"
[yearTemplate]="yearTemp"
[yearFooterTemplate]="yearFooterTemp">
<ng-template #yearTemp let-day>
<div [ngClass]="'md-date-header-year md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('YYYY', day.date)}}
</div>
</ng-template>
<ng-template #yearFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
tsyearView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6
}
};
getOccuppancy(events: any) {
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 / this.myResources.length).toFixed(0);
}
return occuppancy;
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
var eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
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;
}
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
formatDate,
MbscCalendarEvent,
MbscEventcalendarView,
MbscModule,
MbscResource,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
hourView: MbscEventcalendarView = {
timeline: {
type: 'day',
},
};
hourlyEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2026-10-28T02:00',
end: '2026-10-28T10:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2026-10-28T15:00',
end: '2026-10-28T21:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2026-10-28T08:00',
end: '2026-10-28T15:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2026-10-28T05:00',
end: '2026-10-28T13:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2026-10-28T03:00',
end: '2026-10-28T10:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2026-10-28T16:00',
end: '2026-10-28T23:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2026-10-28T06:00',
end: '2026-10-28T11:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2026-10-28T15:00',
end: '2026-10-28T22:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2026-10-28T08:00',
end: '2026-10-28T17:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-28T05:00',
end: '2026-10-28T13:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2026-10-28T16:00',
end: '2026-10-28T21:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2026-10-28T09:00',
end: '2026-10-28T18:00',
title: 'Event 12',
resource: 8,
},
];
dayView: MbscEventcalendarView = {
timeline: {
type: 'month',
},
};
dailyEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2026-10-02T00:00',
end: '2026-10-10T00:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2026-10-16T00:00',
end: '2026-10-24T00:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2026-10-08T00:00',
end: '2026-10-15T00:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2026-10-04T00:00',
end: '2026-10-11T00:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2026-10-07T00:00',
end: '2026-10-15T00:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2026-10-21T00:00',
end: '2026-10-27T00:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2026-10-10T00:00',
end: '2026-10-19T00:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2026-10-24T00:00',
end: '2026-10-30T00:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2026-10-08T00:00',
end: '2026-10-17T00:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-05T00:00',
end: '2026-10-13T00:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2026-10-17T00:00',
end: '2026-10-26T00:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2026-10-09T00:00',
end: '2026-10-20T00:00',
title: 'Event 12',
resource: 8,
},
];
weekView: MbscEventcalendarView = {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6,
},
};
weeklyEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2026-10-10T00:00',
end: '2026-10-24T00:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2026-11-02T00:00',
end: '2026-11-18T00:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2026-10-27T00:00',
end: '2026-11-13T00:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2026-11-04T00:00',
end: '2026-11-27T00:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2026-10-24T00:00',
end: '2026-11-02T00:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2026-11-10T00:00',
end: '2026-11-24T00:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2026-10-20T00:00',
end: '2026-11-03T00:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2026-11-08T00:00',
end: '2026-11-19T00:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2026-10-28T00:00',
end: '2026-11-15T00:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-09T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2026-11-05T00:00',
end: '2026-11-22T00:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2026-10-24T00:00',
end: '2026-11-13T00:00',
title: 'Event 12',
resource: 8,
},
];
monthView: MbscEventcalendarView = {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6,
},
};
monthlyEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8,
},
];
quarterView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1,
},
};
quarterEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2026-09-10T00:00',
end: '2026-11-07T00:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2027-01-01T00:00',
end: '2027-02-08T00:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2026-11-27T00:00',
end: '2026-12-23T00:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2026-10-25T00:00',
end: '2026-11-19T00:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2026-11-10T00:00',
end: '2026-12-18T00:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2027-02-24T00:00',
end: '2027-03-27T00:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2026-12-02T00:00',
end: '2027-01-13T00:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2027-02-08T00:00',
end: '2027-03-06T00:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2026-12-20T00:00',
end: '2027-01-17T00:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2026-11-14T00:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2027-02-14T00:00',
end: '2027-03-20T00:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2026-11-24T00:00',
end: '2026-12-20T00:00',
title: 'Event 12',
resource: 8,
},
];
yearView: MbscEventcalendarView = {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6,
},
};
yearlyEvents: MbscCalendarEvent[] = [
{
id: 1,
start: '2027-04-10T00:00',
end: '2028-08-07T00:00',
title: 'Event 1',
resource: 1,
},
{
id: 2,
start: '2029-06-01T00:00',
end: '2030-09-08T00:00',
title: 'Event 2',
resource: 1,
},
{
id: 3,
start: '2028-03-27T00:00',
end: '2029-10-23T00:00',
title: 'Event 3',
resource: 2,
},
{
id: 4,
start: '2028-08-25T00:00',
end: '2029-11-19T00:00',
title: 'Event 4',
resource: 3,
},
{
id: 5,
start: '2027-09-10T00:00',
end: '2029-04-18T00:00',
title: 'Event 5',
resource: 4,
},
{
id: 6,
start: '2030-01-24T00:00',
end: '2031-05-27T00:00',
title: 'Event 6',
resource: 4,
},
{
id: 7,
start: '2025-04-02T00:00',
end: '2026-08-13T00:00',
title: 'Event 7',
resource: 5,
},
{
id: 8,
start: '2028-04-08T00:00',
end: '2029-11-06T00:00',
title: 'Event 8',
resource: 5,
},
{
id: 9,
start: '2028-01-20T00:00',
end: '2029-08-17T00:00',
title: 'Event 9',
resource: 6,
},
{
id: 10,
start: '2026-10-01T00:00',
end: '2027-11-14T00:00',
title: 'Event 10',
resource: 7,
},
{
id: 11,
start: '2029-10-14T00:00',
end: '2030-11-20T00:00',
title: 'Event 11',
resource: 7,
},
{
id: 12,
start: '2029-02-24T00:00',
end: '2031-04-20T00:00',
title: 'Event 12',
resource: 8,
},
];
myResources: MbscResource[] = [
{
id: 1,
name: 'Resource A',
color: '#e20000',
},
{
id: 2,
name: 'Resource B',
color: '#d6d145',
},
{
id: 3,
name: 'Resource C',
color: '#4981d6',
},
{
id: 4,
name: 'Resource D',
color: '#e25dd2',
},
{
id: 5,
name: 'Resource E',
color: '#1dab2f',
},
{
id: 6,
name: 'Resource F',
color: '#430404',
},
{
id: 7,
name: 'Resource G',
color: '#f7961e',
},
{
id: 8,
name: 'Resource H',
color: '#34c8e0',
},
];
formatDate = formatDate;
getOccuppancy(events: MbscCalendarEvent[]) {
let occuppancy = 0;
if (events) {
let resourceIds: string[] = [];
let nr = 0;
for (const event of events) {
const resource = event.resource as string;
if (resourceIds.indexOf(resource) < 0) {
nr++;
resourceIds = [...resourceIds, resource];
}
}
occuppancy = (nr * 100) / this.myResources.length;
}
return occuppancy.toFixed(0);
}
getEventOccurrence(args: any): any {
let eventOccurrence = 'none';
if (args.events) {
const eventNr = args.events.length;
if (eventNr === 0) {
eventOccurrence = 'none';
} else if (eventNr === 1) {
eventOccurrence = 'one';
} else if (eventNr < 4) {
eventOccurrence = 'few';
} else {
eventOccurrence = 'more';
}
}
return eventOccurrence;
}
}
<div class="md-date-header-template">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Hourly header template</div>
<mbsc-eventcalendar
[view]="hourView"
[data]="hourlyEvents"
[resources]="myResources"
[hourTemplate]="hourTemp"
[hourFooterTemplate]="hourFooterTemp"
>
<ng-template #hourTemp let-day>
<div [ngClass]="'md-date-header md-date-header-hour md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('h:mm A', day.date)}}
</div>
</ng-template>
<ng-template #hourFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily header template</div>
<mbsc-eventcalendar
[view]="dayView"
[data]="dailyEvents"
[resources]="myResources"
[timelineDayTemplate]="dayTemp"
[dayFooterTemplate]="dayFooterTemp"
>
<ng-template #dayTemp let-day>
<div [ngClass]="'md-date-header md-date-header-day md-date-header-events-' + getEventOccurrence(day)">
<div class="md-date-header-day-name">{{formatDate('DDD', day.date)}}</div>
<div class="md-date-header-day-nr">{{formatDate('DD', day.date)}}</div>
</div>
</ng-template>
<ng-template #dayFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly header template</div>
<mbsc-eventcalendar
[view]="weekView"
[data]="weeklyEvents"
[resources]="myResources"
[weekTemplate]="weekTemp"
[weekFooterTemplate]="weekFooterTemp"
>
<ng-template #weekTemp let-day>
<div [ngClass]="'md-date-header md-date-header-week md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('MMM DD', day.startDate)}} - {{formatDate('MMM DD', day.endDate)}}
</div>
</ng-template>
<ng-template #weekFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly header template</div>
<mbsc-eventcalendar
[view]="monthView"
[data]="monthlyEvents"
[resources]="myResources"
[monthTemplate]="monthTemp"
[monthFooterTemplate]="monthFooterTemp"
>
<ng-template #monthTemp let-day>
<div [ngClass]="'md-date-header md-date-header-month md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('MMM', day.date)}}
</div>
</ng-template>
<ng-template #monthFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Quarterly header template</div>
<mbsc-eventcalendar
[view]="quarterView"
[data]="quarterEvents"
[resources]="myResources"
[quarterTemplate]="quarterTemp"
[quarterFooterTemplate]="quarterFooterTemp"
>
<ng-template #quarterTemp let-day>
<div [ngClass]="'md-date-header md-date-header-quarter md-date-header-events-' + getEventOccurrence(day)">
Quarter {{ (day.date.getMonth() / 3 + 1) }}
</div>
</ng-template>
<ng-template #quarterFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Yearly header template</div>
<mbsc-eventcalendar
[view]="yearView"
[data]="yearlyEvents"
[resources]="myResources"
[yearTemplate]="yearTemp"
[yearFooterTemplate]="yearFooterTemp"
>
<ng-template #yearTemp let-day>
<div [ngClass]="'md-date-header md-date-header-year md-date-header-events-' + getEventOccurrence(day)">
{{formatDate('YYYY', day.date)}}
</div>
</ng-template>
<ng-template #yearFooterTemp let-day>
<div class="md-date-footer">{{getOccuppancy(day.events)}} %</div>
</ng-template>
</mbsc-eventcalendar>
</div>
</div>
.md-date-header-template .mbsc-timeline-header-week-text {
display: block;
}
.md-date-header {
text-align: center;
border-radius: 8px;
line-height: 20px;
}
.md-date-header-day {
padding: 3px;
margin: 4px;
}
.md-date-header-hour {
font-size: 12px;
padding: 0;
margin: 3px;
color: #000;
font-weight: 600;
}
.md-date-header-week,
.md-date-header-month,
.md-date-header-quarter,
.md-date-header-year {
padding: 0 8px;
margin: 3px;
color: initial;
font-weight: 600;
}
.md-date-header-template .mbsc-timeline-footer-week {
text-align: center;
}
.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;
}