Agent-readable demo data
- Title
- Excel Export (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Read more about client-side Excel export.
Inline demo script 1
const scheduler = new DayPilot.Scheduler("scheduler", {
startDate: "2026-01-01",
// days: 365,
days: 30,
scale: "Day",
durationBarVisible: false, // not supported in Excel export
rowHeaderColumns: [
{name: "Name", width: 200},
{name: "ID", display: "id", width: 100},
],
timeHeaders: [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Cell", format: "d"}
],
treeEnabled: true,
resources: [
{
name: "Frozen 1", id: "frozen1", frozen: "top"
},
{
name: "Locations", id: "G1", expanded: true, children: [
{name: "Room 1", id: "A"},
{name: "Room 2", id: "B"},
{name: "Room 3", id: "C"},
{name: "Room 4", id: "D"}
]
},
{
name: "People", id: "G2", expanded: true, children: [
{name: "Person 1", id: "E"},
{name: "Person 2", id: "F"},
{name: "Person 3", id: "G"},
{name: "Person 4", id: "H"}
]
},
{
name: "Tools", id: "G3", expanded: true, children: [
{name: "Tool 1", id: "I"},
{name: "Tool 2", id: "J"},
{name: "Tool 3", id: "K"},
{name: "Tool 4", id: "L"}
]
},
],
height: 300,
exceljs: ExcelJS,
onBeforeEventRender: args => {
// green background
args.data.backColor = "#6aa84f";
args.data.borderColor = "#3d6f3d";
args.data.fontColor = "#ffffff";
},
useEventBoxes: "Always"
});
scheduler.init();
const app = {
init() {
this.bindEvents();
this.loadEventData();
},
loadEventData() {
const events = [];
// Generate random sample events
for (let i = 0; i < 10; i++) {
const duration = Math.floor(Math.random() * 6) + 3; // 3 to 8 hours
const durationDays = Math.floor(Math.random() * 6); // 0 to 5 days
const start = Math.floor(Math.random() * 6) + 2; // day offset [2..7]
const event = {
start: new DayPilot.Date(scheduler.startDate).addDays(start),
end: new DayPilot.Date(scheduler.startDate)
.addDays(start)
.addDays(durationDays)
.addHours(duration),
id: DayPilot.guid(),
resource: String.fromCharCode(65 + i),
text: "Event " + (i + 1),
};
events.push(event);
}
events.push({
start: new DayPilot.Date(scheduler.startDate).addDays(14).addHours(16),
end: new DayPilot.Date(scheduler.startDate).addDays(15).addHours(8),
id: DayPilot.guid(),
resource: "A",
text: "Midnight Event",
});
events.push({
start: new DayPilot.Date(scheduler.startDate).addDays(15).addHours(8),
end: new DayPilot.Date(scheduler.startDate).addDays(16).addHours(16),
id: DayPilot.guid(),
resource: "A",
text: "Noon Event",
});
// Add a phased event #1 (spans 5 days, split into 3 phases)
const phasedEvent1 = {
start: new DayPilot.Date(scheduler.startDate).addDays(1),
end: new DayPilot.Date(scheduler.startDate).addDays(6),
id: DayPilot.guid(),
resource: "A",
text: "Long Event with Phases (1)",
areas: [
{
top: 0,
bottom: 0,
start: new DayPilot.Date(scheduler.startDate).addDays(1),
end: new DayPilot.Date(scheduler.startDate).addDays(2),
text: "1",
backColor: "#ffcccc",
verticalAlignment: "center",
horizontalAlignment: "center",
},
{
top: 0,
bottom: 0,
start: new DayPilot.Date(scheduler.startDate).addDays(2),
end: new DayPilot.Date(scheduler.startDate).addDays(4),
text: "2",
backColor: "#d66f6f",
verticalAlignment: "center",
horizontalAlignment: "center",
},
{
top: 0,
bottom: 0,
start: new DayPilot.Date(scheduler.startDate).addDays(4),
end: new DayPilot.Date(scheduler.startDate).addDays(6),
text: "3",
backColor: "#6f3d3d",
verticalAlignment: "center",
horizontalAlignment: "center",
}
]
};
events.push(phasedEvent1);
// Add a phased event #2 (spans 6 days, split into 2 phases)
const phasedEvent2 = {
start: new DayPilot.Date(scheduler.startDate).addDays(3),
end: new DayPilot.Date(scheduler.startDate).addDays(9),
id: DayPilot.guid(),
resource: "B",
text: "Long Event with Phases (2)",
areas: [
{
top: 0,
bottom: 0,
start: new DayPilot.Date(scheduler.startDate).addDays(3),
end: new DayPilot.Date(scheduler.startDate).addDays(5),
text: "1",
backColor: "#8cb4df",
verticalAlignment: "center",
horizontalAlignment: "center",
},
{
top: 0,
bottom: 0,
start: new DayPilot.Date(scheduler.startDate).addDays(5),
end: new DayPilot.Date(scheduler.startDate).addDays(9),
text: "2",
backColor: "#1d60a8",
verticalAlignment: "center",
horizontalAlignment: "center",
}
]
};
events.push(phasedEvent2);
// Update the scheduler with the combined list
scheduler.update({ events: events });
},
bindEvents() {
document.getElementById('download-button').addEventListener('click', function(ev) {
ev.preventDefault();
const options = {
area: "viewport",
};
scheduler.exportAs("xlsx", options).download("scheduler.xlsx");
});
}
};
app.init();