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
renderHour and renderHourFooter options can be used for customizing the header and footer.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'day'
}
},
renderHour: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header-hour md-date-header-events-' + eventOccurrence + '">'
+ formatDate('h:mm A', date) + '</div>';
},
renderHourFooter: function (args) {
var events = args.events;
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%'</div>';
}
});
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.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'month'
}
},
renderTimelineDay: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header md-date-header-day md-date-header-events-' + eventOccurrence + '">' +
'<div class="md-date-header-day-name">' + formatDate('DDD', date) + '</div>' +
'<div class="md-date-header-day-nr">' + formatDate('DD', date) + '</div></div>';
},
renderDayFooter: function (args) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
});
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.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6
}
},
renderWeek: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header-week md-date-header-events-' + eventOccurrence + '">' +
formatDate('MMM DD', args.startDate) + ' - ' + formatDate('MMM DD', args.endDate) + '</div></div>';
},
renderWeekFooter: function (args) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
});
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.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6
}
},
renderMonth: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header-month md-date-header-events-' + eventOccurrence + '">' +
formatDate('MMM', date) + '</div>';
},
renderMonthFooter: function (args) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
});
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
renderQuarter and renderQuarterFooter options can be used for customizing the header and footer per quarter.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1
}
},
renderQuarter: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header-quarter md-date-header-events-' + eventOccurrence + '">Quarter ' +
(date.getMonth() / 3 + 1) + '</div>';
},
renderQuarterFooter: function (args) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
});
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.
html<div id="my-timeline" class="md-date-header-template"></div>
jsmobiscroll.eventcalendar('#my-timeline', {
view: {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6
}
},
renderYear: function (args) {
var date = args.date;
var formatDate = mobiscroll.formatDate;
var 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 '<div class="md-date-header-year md-date-header-events-' + eventOccurrence + '">' +
formatDate('YYYY', date) + '</div>';
},
renderYearFooter: function (args) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = (nr * 100 / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
});
JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var formatDate = mobiscroll.formatDate;
var myResources = [
{
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',
},
];
function getEventOccurrence(events) {
var 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;
}
function getOccuppancy(events) {
var occuppancy = 0;
if (events) {
var resourceIds = [];
var nr = 0;
for (var i = 0; i < events.length; ++i) {
var event = events[i];
if (resourceIds.indexOf(event.resource) < 0) {
nr++;
resourceIds.push(event.resource);
}
}
occuppancy = ((nr * 100) / myResources.length).toFixed(0);
}
return '<div class="md-date-footer">' + occuppancy + '%</div>';
}
mobiscroll.eventcalendar('#demo-hour-header-template', {
view: {
timeline: {
type: 'day',
},
},
resources: myResources,
data: [
{
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,
},
],
renderHour: function (args) {
return (
'<div class="md-date-header md-date-header-hour md-date-header-events-' +
getEventOccurrence(args.events) +
'">' +
formatDate('h:mm A', args.date) +
'</div>'
);
},
renderHourFooter: function (args) {
return getOccuppancy(args.events);
},
});
mobiscroll.eventcalendar('#demo-day-header-template', {
view: {
timeline: {
type: 'month',
},
},
resources: myResources,
data: [
{
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,
},
],
renderTimelineDay: function (args) {
var date = args.date;
return (
'<div class="md-date-header md-date-header-day md-date-header-events-' +
getEventOccurrence(args.events) +
'">' +
'<div class="md-date-header-day-name">' +
formatDate('DDD', date) +
'</div>' +
'<div class="md-date-header-day-nr">' +
formatDate('DD', date) +
'</div></div>'
);
},
renderDayFooter: function (args) {
return getOccuppancy(args.events);
},
});
mobiscroll.eventcalendar('#demo-week-header-template', {
view: {
timeline: {
type: 'week',
resolutionHorizontal: 'week',
size: 6,
},
},
resources: myResources,
data: [
{
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,
},
],
renderWeek: function (args) {
return (
'<div class="md-date-header md-date-header-week md-date-header-events-' +
getEventOccurrence(args.events) +
'">' +
formatDate('MMM DD', args.startDate) +
' - ' +
formatDate('MMM DD', args.endDate) +
'</div></div>'
);
},
renderWeekFooter: function (args) {
return getOccuppancy(args.events);
},
});
mobiscroll.eventcalendar('#demo-month-header-template', {
view: {
timeline: {
type: 'month',
resolutionHorizontal: 'month',
size: 6,
},
},
resources: myResources,
data: [
{
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,
},
],
renderMonth: function (args) {
return (
'<div class="md-date-header md-date-header-month md-date-header-events-' +
getEventOccurrence(args.events) +
'">' +
formatDate('MMM', args.date) +
'</div>'
);
},
renderMonthFooter: function (args) {
return getOccuppancy(args.events);
},
});
mobiscroll.eventcalendar('#demo-quarter-header-template', {
view: {
timeline: {
type: 'year',
resolutionHorizontal: 'quarter',
size: 1,
},
},
resources: myResources,
data: [
{
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,
},
],
renderQuarter: function (args) {
return (
'<div class="md-date-header md-date-header-quarter md-date-header-events-' +
getEventOccurrence(args.events) +
'">Quarter ' +
(args.date.getMonth() / 3 + 1) +
'</div>'
);
},
renderQuarterFooter: function (args) {
return getOccuppancy(args.events);
},
});
mobiscroll.eventcalendar('#demo-year-header-template', {
view: {
timeline: {
type: 'year',
resolutionHorizontal: 'year',
size: 6,
},
},
resources: myResources,
data: [
{
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,
},
],
renderYear: function (args) {
return (
'<div class="md-date-header md-date-header-year md-date-header-events-' +
getEventOccurrence(args.events) +
'">' +
formatDate('YYYY', args.date) +
'</div>'
);
},
renderYearFooter: function (args) {
return getOccuppancy(args.events);
},
});
<div class="md-date-header-template">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Hourly header template</div>
<div id="demo-hour-header-template"></div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily header template</div>
<div id="demo-day-header-template"></div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly header template</div>
<div id="demo-week-header-template"></div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly header template</div>
<div id="demo-month-header-template"></div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Quarterly header template</div>
<div id="demo-quarter-header-template"></div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Yearly header template</div>
<div id="demo-year-header-template"></div>
</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;
}