Overview
How to display the JavaScript resource-scheduling calendar component in a full-screen page layout.
The height of the component is set to 100% of the parent element.
Avoid duplicate vertical scrollbars.
Fix the column headers so they are always visible.
The project 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. Buy a license.
Using a Standard Page Layout May Lead to Duplicate Vertical Scrollbars
Let’s say you have a web page with the following HTML structure:
<div class="header">
<h1><a href='https://code.daypilot.org/40607/javascript-resource-scheduling-calendar-full-screen-layout'>JavaScript Resource-Scheduling Calendar: Full-Screen Layout</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="calendar"></div>
</div>
<div class="footer">
<div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>There are three sections (header, main, footer). This layout displays the resource calendar in the main section (it’s the <div id="calendar"></div> placeholder).
By default, the height of the resource calendar component is determined by the duration of business hours (businessBeginsHour, businessEndsHour properties).
<script>
const calendar = new DayPilot.Calendar("calendar", {
viewType: "Resources",
heightSpec: "BusinessHours",
businessBeginsHour: 9,
businessEndsHour: 18,
// ...
});
calendar.init();
</script>If the window height is not sufficient to display the full calendar height, the browser will add a vertical scrollbar:
When using the page scrollbar to get to the hidden parts, the top calendar header will scroll away.
Fix the Column Headers with 100% Height Mode
To avoid this problem, it is necessary to change the page layout so that the content never overflows the browser window vertically.
This can be done by placing the page content into absolutely-positioned elements:
The HTML structure stays the same:
<div class="header">
<h1><a href='https://code.daypilot.org/40607/javascript-resource-scheduling-calendar-full-screen-layout'>JavaScript Resource-Scheduling Calendar: Full-Screen Layout</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="calendar"></div>
</div>
<div class="footer">
<div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>We just add the following CSS to fix the sections:
.header {
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100px;
}
.main {
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 40px;
}
.footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: #f8f8f8;
padding: 10px;
border-top: 1px solid #ddd;
}Now we will set the height of the calendar to 100% using the heightSpec property:
<script>
const calendar = new DayPilot.Calendar("calendar", {
viewType: "Resources",
heightSpec: "Parent100Pct",
// ...
});
calendar.init();
</script>With this setting, the Calendar will fill the available height:
Full Source Code
And here is the full source code of our example that defines a full-screen page layout using absolutely-positioned elements and set the calendar height to 100% of the parent element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Resource-Scheduling Calendar: Full-Screen Layout</title>
<style>
p, body, td, input, select, button { font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size: 14px; }
body { padding: 0px; margin: 0px; background-color: #ffffff; }
a { color: #1155a3; }
.header { background: #003267; background: linear-gradient(to right, #011329 0%,#00639e 44%,#011329 100%); padding:20px 10px; color: white; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75); }
.header a { color: white; }
.header h1 a { text-decoration: none; }
.header h1 { padding: 0px; margin: 0px; }
.generated { color: #999; }
.generated a { color: #999; }
</style>
<style>
.header {
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100px;
}
.main {
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 40px;
}
.footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: #f8f8f8;
padding: 10px;
border-top: 1px solid #ddd;
}
</style>
<!-- DayPilot library -->
<script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
<h1><a href='https://code.daypilot.org/40607/javascript-resource-scheduling-calendar-full-screen-layout'>JavaScript Resource-Scheduling Calendar: Full-Screen Layout</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="calendar"></div>
</div>
<div class="footer">
<div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>
<script>
const calendar = new DayPilot.Calendar("calendar", {
viewType: "Resources",
eventBorderRadius: 6,
durationBarVisible: false,
startDate: "2026-02-01",
heightSpec: "Parent100Pct",
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
const calendar = args.control;
calendar.clearSelection();
if (modal.canceled) { return; }
calendar.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result,
resource: args.resource
});
},
onBeforeEventRender: args => {
const team = args.data.tags && args.data.tags.team || "general";
let color = "#3d85c6";
switch (team) {
case "Marketing":
color = "#6aa84f";
break;
case "Development":
color = "#f1c232";
break;
case "Sales":
color = "#e69138";
break;
}
args.data.backColor = color + "cc";
args.data.borderColor = "darker";
args.data.html = "";
args.data.areas = [
{
id: "text",
top: 5,
left: 5,
right: 5,
height: 20,
text: args.data.text,
fontColor: "#fff",
},
{
id: "team-text",
bottom: 5,
left: 5,
right: 5,
height: 20,
text: team,
borderRadius: "5px",
fontColor: "#000",
backColor: "#ffffff66",
verticalAlignment: "center",
horizontalAlignment: "center"
},
{
id: "delete",
top: 5,
right: 5,
width: 20,
height: 20,
padding: 2,
symbol: "icons/daypilot.svg#x-2",
fontColor: "#fff",
backColor: "#00000033",
borderRadius: "50%",
style: "cursor: pointer;",
onClick: args => {
calendar.events.remove(args.source);
}
},
];
}
});
calendar.init();
const app = {
init() {
const events = [
{
id: 2,
text: "Task 2",
start: "2026-02-01T09:30:00",
end: "2026-02-01T11:30:00",
resource: "R2",
tags: {
team: "Marketing",
}
},
{
id: 3,
text: "Task 3",
start: "2026-02-01T12:00:00",
end: "2026-02-01T15:00:00",
resource: "R2",
tags: {
team: "Development",
}
},
{
id: 4,
text: "Task 4",
start: "2026-02-01T11:30:00",
end: "2026-02-01T14:30:00",
resource: "R3",
tags: {
team: "Sales",
}
},
];
const columns = [
{name: "Resource 1", id: "R1"},
{name: "Resource 2", id: "R2"},
{name: "Resource 3", id: "R3"},
{name: "Resource 4", id: "R4"}
];
calendar.update({columns, events});
}
};
app.init();
</script>
</body>
</html>
