Overview
Add a calendar icon to the upper-left corner of the JavaScript Scheduler component.
Add an event handler that opens a popup date picker on click.
Update the timeline of the Scheduler when a new date is selected.
Requires DayPilot Pro for JavaScript version 2025.2.6448 or higher (included).
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.
Adding a Calendar Icon to the Upper-Left Corner
We create an active area inside the scheduler’s upper-left corner header in onBeforeCornerRender.
Dimensions:
20 px × 20 px.Centering:
calc(50% - 10px)positions the icon in the middle of the 40 px‑high corner cell.Icon: an SVG symbol (
#calendar) from the DayPilot icon set (daypilot.svg) inherits the current text color, so it looks natural in both light and dark themes.Pointer cursor: so users know it is clickable.
const scheduler = new DayPilot.Scheduler("dp", {
onBeforeCornerRender: args => {
args.areas = [
{
top: "calc(50% - 10px)",
left: "calc(50% - 10px)",
width: 20,
height: 20,
style: "cursor: pointer",
symbol: "icons/daypilot.svg#calendar",
id: "date", // we will use this id as the DatePicker target
onClick: args => {} // we will open the date picker here
}
];
},
// ...other configuration
});
scheduler.init();Opening the Date Picker on Click
To handle the click event, we attach an onClick handler to the active area:
The date picker is anchored to the area by passing
target: 'date'.We disable automatic reading/writing of the value with
resetTarget: falseand callargs.preventDefault()so the icon itself is not overwritten by the selected date.The current scheduler
startDateis used as the initial selection.When the user clicks a day, we close the picker and call
scheduler.update({ startDate: args.start }), which scrolls the scheduler to the newly chosen date.
onClick: args => {
const picker = new DayPilot.DatePicker({
target: 'date',
resetTarget: false,
date: scheduler.startDate,
onTimeRangeSelect: args => {
args.preventDefault(); // keep the icon intact
picker.close();
scheduler.update({ startDate: args.start });
}
});
picker.show();
}Giving the Picker a Subtle Shadow
The default navigator component is flat. A little depth makes it stand out:
.navigator_default_main {
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
}Full Source Code
Below is the complete example, including a minimal resource/event dataset so you can copy‑paste and run it immediately:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Scheduler: Date Picker in the Upper-Left Corner</title>
<style type="text/css">
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; }
.space { margin: 10px 0px 10px 0px; }
.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; }
.main { padding: 10px; margin-top: 10px; }
.generated { color: #999; }
.generated a { color: #999; }
</style>
<style>
.navigator_default_main {
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
}
</style>
<!-- DayPilot library -->
<script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
<h1><a href='https://code.daypilot.org/21019/javascript-scheduler-date-picker-in-the-upper-left-corner'>JavaScript Scheduler: Date Picker in the Upper-Left Corner</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>
const scheduler = new DayPilot.Scheduler("dp", {
timeHeaders: [
{groupBy: "Day", format:"MMMM d, yyyy"},
{groupBy: "Hour", format: "h tt"}
],
scale: "Hour",
days: 1,
startDate: DayPilot.Date.today(),
cellWidth: 60,
onTimeRangeSelected: async (args) => {
const scheduler = args.control;
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
scheduler.clearSelection();
if (modal.canceled) { return; }
scheduler.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
});
},
treeEnabled: true,
onBeforeCornerRender: args => {
args.areas = [
{
top: "calc(50% - 10px)",
left: "calc(50% - 10px)",
width: 20,
height: 20,
style: "cursor: pointer",
symbol: "icons/daypilot.svg#calendar",
id: "date",
onClick: args => {
const picker = new DayPilot.DatePicker({
target: 'date',
resetTarget: false,
date: scheduler.startDate,
onTimeRangeSelect: args => {
// don't write the value to the `target` element
args.preventDefault();
picker.close();
scheduler.update({startDate: args.start});
}
});
picker.show();
}
}
]
}
});
scheduler.init();
const app = {
init() {
const 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"},
];
const events = [];
scheduler.update({resources, events});
}
};
app.init();
</script>
</body>
</html>You can also download the complete project that includes the dependencies using the “Download” link at the top of the tutorial.
