Agent-readable demo data
- Title
- Dark CSS Theme (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- A dark CSS theme with rounded events.
You can customize the Dark Theme in DayPilot Theme Designer.
Inline demo script 1
const dp = new DayPilot.Scheduler("dp", {
theme: "scheduler_dark",
startDate: "2026-10-01",
days: 31,
scale: "Day",
timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
cellWidth: 60,
rowHeaderWidth: 170,
treeEnabled: true,
eventHeight: 40,
rowMinHeight: 52,
rowMarginTop: 6,
rowMarginBottom: 6,
heightSpec: "Auto",
eventClickHandling: "Select",
eventDoubleClickHandling: "Enabled",
contextMenu: new DayPilot.Menu({
theme: "dark-menu",
items: [
{text: "Edit name…", onClick: (args) => app.editEvent(args.source)},
...["Blue", "Sage", "Sand", "Lavender"].map((name, tone) => ({
text: `Color: ${name}`,
onClick: (args) => {
args.source.data.tags = {...args.source.data.tags, tone};
dp.events.update(args.source);
}
})),
{text: "-"},
{
text: "Delete",
onClick: (args) => {
dp.events.remove(args.source);
}
}
]
}),
resources: [
{
name: "Design",
id: "design",
expanded: true,
children: [
{name: "Alex Morgan", id: "A"},
{name: "Casey Brooks", id: "B"}
]
},
{
name: "Development",
id: "development",
expanded: true,
children: [
{name: "Jordan Lee", id: "C"},
{name: "Taylor Reed", id: "D"}
]
},
{
name: "Quality assurance",
id: "qa",
expanded: true,
children: [
{name: "Robin Ellis", id: "E"},
{name: "Sam Parker", id: "F"}
]
}
],
onBeforeEventRender: (args) => {
args.data.cssClass = `dark-tone-${args.data.tags?.tone || 0}`;
args.data.html = `<div class="dark-event-label">${DayPilot.Util.escapeHtml(args.data.text)}</div>`;
args.data.areas = [
{
right: 4,
top: "calc(50% - 10px)",
width: 18,
height: 20,
padding: 1,
symbol: "../icons/daypilot.svg#threedots-v",
fontColor: "#f0f5f8",
cssClass: "dark-action",
toolTip: "Edit, recolor or delete",
action: "None",
onClick: () => dp.contextMenu.show(dp.events.find(args.data.id))
}
];
},
onEventDoubleClick: (args) => app.editEvent(args.e),
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("New event name:", "New task");
dp.clearSelection();
if (modal.canceled) {
return;
}
dp.events.add({
id: DayPilot.guid(),
start: args.start,
end: args.end,
resource: args.resource,
text: modal.result
});
}
});
dp.init();
const app = {
init() {
dp.update({
events: [
{id: 1, resource: "A", start: "2026-10-02", end: "2026-10-06", text: "Interface design"},
{id: 2, resource: "A", start: "2026-10-08", end: "2026-10-12", text: "Design review", tags: {tone: 2}},
{id: 3, resource: "B", start: "2026-10-01", end: "2026-10-05", text: "User research", tags: {tone: 1}},
{id: 4, resource: "B", start: "2026-10-06", end: "2026-10-10", text: "Prototype"},
{
id: 5,
resource: "C",
start: "2026-10-03",
end: "2026-10-08",
text: "API development",
tags: {tone: 1}
},
{id: 6, resource: "C", start: "2026-10-10", end: "2026-10-15", text: "Integration", tags: {tone: 3}},
{id: 7, resource: "D", start: "2026-10-02", end: "2026-10-07", text: "Component library"},
{id: 8, resource: "D", start: "2026-10-08", end: "2026-10-13", text: "Accessibility", tags: {tone: 2}},
{id: 9, resource: "E", start: "2026-10-01", end: "2026-10-05", text: "Test planning", tags: {tone: 2}},
{id: 10, resource: "E", start: "2026-10-07", end: "2026-10-12", text: "Regression tests"},
{
id: 11,
resource: "F",
start: "2026-10-04",
end: "2026-10-08",
text: "Device testing",
tags: {tone: 3}
},
{id: 12, resource: "F", start: "2026-10-10", end: "2026-10-15", text: "Release checks", tags: {tone: 1}}
]
});
},
async editEvent(event) {
const modal = await DayPilot.Modal.prompt("Event name:", event.text());
if (modal.canceled) {
return;
}
event.data.text = modal.result;
dp.events.update(event);
}
};
app.init();