Agent-readable demo data
- Title
- Dark CSS Theme (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- A dark CSS theme with rounded tasks.
You can customize the Dark Theme in DayPilot Theme Designer.
Inline demo script 1
const dp = new DayPilot.Gantt("dp", {
theme: "gantt_dark",
startDate: "2026-10-12",
days: 14,
cellWidthSpec: "Auto",
cellWidthMin: 40,
rowHeaderWidth: 190,
taskHeight: 36,
rowMinHeight: 52,
rowMarginBottom: 10,
heightSpec: "Auto",
taskGroupMode: "Auto",
timeHeaders: [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "ddd d"}
],
taskDoubleClickHandling: "Enabled",
onTaskDoubleClick: (args) => app.editTask(args.task),
onBeforeTaskRender: (args) => {
args.data.box.cssClass = `dark-tone-${args.data.tags?.tone || 0}`;
if (args.type === "Task") {
args.data.box.html = `${args.data.complete || 0}%`;
args.data.box.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.contextMenuTask.show(dp.tasks.find(args.data.id))
}
];
}
if (args.type === "Group") {
args.data.box.htmlRight = "";
}
}
});
dp.init();
const app = {
init() {
dp.contextMenuTask = this.createTaskMenu();
this.addEventHandlers();
this.loadData();
},
addEventHandlers() {
document.getElementById("add-task").addEventListener("click", async () => {
const form = [
{name: "Name", id: "text"},
{name: "Start", id: "start", type: "date"},
{name: "End", id: "end", type: "date"}
];
const modal = await DayPilot.Modal.form(form, {text: "New task", start: "2026-10-14", end: "2026-10-17"});
if (modal.canceled) {
return;
}
dp.tasks.add({...modal.result, id: DayPilot.guid(), complete: 0});
});
},
loadData() {
dp.update({
tasks: [
{
id: "website",
text: "Website",
children: [
{id: 1, text: "Discovery", start: "2026-10-12", end: "2026-10-15", complete: 100},
{id: 2, text: "Design", start: "2026-10-15", end: "2026-10-18", complete: 65, tags: {tone: 1}},
{id: 3, text: "Build", start: "2026-10-16", end: "2026-10-20", complete: 30, tags: {tone: 3}},
{id: 4, text: "Review", start: "2026-10-19", end: "2026-10-22", complete: 0, tags: {tone: 2}},
{id: 5, text: "Launch", start: "2026-10-22", type: "Milestone", tags: {tone: 1}}
]
},
{
id: "delivery",
text: "Delivery",
children: [
{
id: 6,
text: "Release notes",
start: "2026-10-14",
end: "2026-10-18",
complete: 40,
tags: {tone: 3}
},
{
id: 7,
text: "Team handoff",
start: "2026-10-19",
end: "2026-10-22",
complete: 0,
tags: {tone: 0}
}
]
}
],
links: [
{from: 1, to: 2, type: "FinishToStart"},
{from: 2, to: 3, type: "StartToStart"},
{from: 3, to: 4, type: "FinishToStart"},
{from: 4, to: 5, type: "FinishToStart"}
]
});
},
async editTask(task) {
const modal = await DayPilot.Modal.prompt("Task name:", task.data.text);
if (modal.canceled) {
return;
}
task.data.text = modal.result;
dp.tasks.update(task);
},
createTaskMenu() {
const colors = ["Blue", "Sage", "Sand", "Lavender"].map((name, tone) => ({
text: `Color: ${name}`,
onClick: (args) => {
args.source.data.tags = {...args.source.data.tags, tone};
dp.tasks.update(args.source);
}
}));
return new DayPilot.Menu({
theme: "dark-menu",
onShow: (args) => {
const task = args.source.data;
const canRecolor = !task.children?.length && task.type !== "Milestone";
colors.forEach((item) => {
item.hidden = !canRecolor;
});
},
items: [
{text: "Edit name…", onClick: (args) => app.editTask(args.source)},
...colors,
{text: "-"},
{text: "Delete", onClick: (args) => dp.tasks.remove(args.source)}
]
});
}
};
app.init();