Overview
The JavaScript Scheduler component supports several standard time header group sizes.
If you need to display special groups, you can use the time header customization API to insert custom segments using active areas.
Includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
Scheduler Time Header Groups
The JavaScript Scheduler component supports the following time header groups:
Hour
Day
Week
Month
Quarter
Year
None
Cell
The time header group can be set using groupBy property of the time header row object. The time headers are specified using timeHeaders Scheduler property.
The following example displays three rows. The first row displays the month name, the second row displays the week number and the third row displays the day of month.
var dp = new DayPilot.Scheduler("dp", {
timeHeaders: [
{groupBy: "Month"},
{groupBy: "Week"},
{groupBy: "Day", format:"d"}
],
// ...
});We will modify the second row to split the week group to two segments - work week and weekend.
Let’s start with changing the the group size of the second row to "None", which mean the whole row will display only one cell.
var dp = new DayPilot.Scheduler("dp", {
timeHeaders: [
{groupBy: "Month"},
{groupBy: "None"},
{groupBy: "Day", format:"d"}
],
// ...
});Custom Segments in the Scheduler Time Header
Now we will use onBeforeTimeHeaderRender event to insert our own date segments using active areas. The active areas can be used to add additional information to the time header cells, action icons, or customize the appearance (see also JavaScript Scheduler Time Header Customization tutorial).
var dp = new DayPilot.Scheduler("dp", {
timeHeaders: [
{groupBy: "Month"},
{groupBy: "None"},
{groupBy: "Day", format:"d"}
],
onBeforeTimeHeaderRender: function(args) {
if (args.header.level === 1) {
var start = args.header.start;
args.header.areas = [];
while (start < args.header.end) {
var dayOfWeek = start.getDayOfWeek();
var isWeekend;
var end;
if (dayOfWeek === 0) {
isWeekend = true;
end = start.addDays(1);
}
else if (dayOfWeek === 6) {
isWeekend = true;
end = start.addDays(2);
}
else {
isWeekend = false;
end = start.addDays(6 - dayOfWeek);
}
if (end > args.header.end) {
end = args.header.end;
}
args.header.areas.push({
start: start,
end: end,
top: 0,
bottom: 1,
backColor: isWeekend ? "#e0e0e0" : null,
style: "box-sizing: border-box; border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center;",
html: isWeekend ? "Weekend" : "Week " + start.weekNumber()
});
start = end;
}
}
},
// ...
});Full Source Code
This is the full source code of the Scheduler component with custom time header segments.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Scheduler: Custom Time Header Segments</title>
<style type="text/css">
<!-- ... -->
</style>
<!-- DayPilot library -->
<script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
<h1><a href='https://code.daypilot.org/70037/javascript-scheduler-custom-time-header-segments'>JavaScript Scheduler: Custom Time Header Segments</a></h1>
<div><a href="https://javascript.daypilot.org/">DayPilot for JavaScript</a> - HTML5 Calendar/Scheduling Components for JavaScript/Angular/React/Vue</div>
</div>
<div class="main">
<div id="dp"></div>
<div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>
<script>
var dp = new DayPilot.Scheduler("dp", {
timeHeaders: [
{groupBy: "Month"},
{groupBy: "None"},
{groupBy: "Day", format:"d"}
],
scale: "Day",
days: DayPilot.Date.today().daysInMonth(),
startDate: DayPilot.Date.today().firstDayOfMonth(),
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: function (args) {
var dp = this;
DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
dp.clearSelection();
if (!modal.result) { return; }
dp.events.add(new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
}));
});
},
onBeforeTimeHeaderRender: function(args) {
if (args.header.level === 1) {
var start = args.header.start;
args.header.areas = [];
while (start < args.header.end) {
var dayOfWeek = start.getDayOfWeek();
var isWeekend;
var end;
if (dayOfWeek === 0) {
isWeekend = true;
end = start.addDays(1);
}
else if (dayOfWeek === 6) {
isWeekend = true;
end = start.addDays(2);
}
else {
isWeekend = false;
end = start.addDays(6 - dayOfWeek);
}
if (end > args.header.end) {
end = args.header.end;
}
args.header.areas.push({
start: start,
end: end,
top: 0,
bottom: 1,
backColor: isWeekend ? "#e0e0e0" : null,
style: "box-sizing: border-box; border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center;",
html: isWeekend ? "Weekend" : "Week " + start.weekNumber()
});
start = end;
}
}
}
});
dp.resources = [
{name: "Resource 1", id: "R1"},
{name: "Resource 2", id: "R2"},
{name: "Resource 3", id: "R3"},
{name: "Resource 4", id: "R4"},
{name: "Resource 5", id: "R5"},
{name: "Resource 6", id: "R6"},
{name: "Resource 7", id: "R7"},
{name: "Resource 8", id: "R8"},
{name: "Resource 9", id: "R9"},
];
dp.events.list = [];
dp.init();
</script>
</body>
</html>
