Agent-readable demo data
- Title
- Resources View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Lite
- Description
- Note: Read more about the resource calendar [doc.daypilot.org].
Inline demo script 1
const calendar = new DayPilot.Calendar("calendar", {
startDate: "2025-06-24",
viewType: "Resources",
headerHeight: 40,
eventBorderRadius: 5,
columns: [
{name: "Room A", id: "A"},
{name: "Room B", id: "B"},
{name: "Room C", id: "C"},
{name: "Room D", id: "D"},
{name: "Room E", id: "E"},
{name: "Room F", id: "F"},
{name: "Room G", id: "G"},
{name: "Room H", id: "H"},
],
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("New event name:", "Event");
calendar.clearSelection();
if (modal.canceled) {
return;
}
const name = modal.result;
calendar.events.add({
start: args.start,
end: args.end,
resource: args.resource,
id: DayPilot.guid(),
text: name
});
}
});
calendar.init();
const app = {
loadEventData() {
const events = [
{
start: "2025-06-24T12:00:00",
end: "2025-06-24T15:00:00",
resource: "B",
id: DayPilot.guid(),
text: "Reservation #101",
barColor: "#f6b26b"
},
{
start: "2025-06-24T10:00:00",
end: "2025-06-24T13:00:00",
resource: "C",
id: DayPilot.guid(),
text: "Reservation #102",
barColor: "#93c47d"
},
{
start: "2025-06-24T14:00:00",
end: "2025-06-24T17:00:00",
resource: "C",
id: DayPilot.guid(),
text: "Reservation #103",
barColor: "#6fa8dc"
},
{
start: "2025-06-24T11:00:00",
end: "2025-06-24T15:00:00",
resource: "D",
id: DayPilot.guid(),
text: "Reservation #104",
barColor: "#f1c232"
},
];
calendar.update({events});
},
init() {
this.loadEventData();
}
};
app.init();