Agent-readable demo data
- Title
- JavaScript Event Calendar | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- Customize the component using Calendar UI Builder
and download a ready-to-run project.
Read more about the JavaScript event calendar.
Inline demo script 1
const dp = new DayPilot.Calendar("dp", {
startDate: DayPilot.Date.today(),
viewType: "Week",
showEventStartEnd: false,
scrollLabelsVisible: true,
timeRangeSelectingStartEndEnabled: true,
showCurrentTime: true,
eventBorderRadius: 4,
bubble: new DayPilot.Bubble({
onLoad: args => {
const e = args.source;
args.html = `Start: ${e.start().toString("H:mm tt")}<br/>End: ${e.end().toString("H:mm tt")}`
}
}),
contextMenu: new DayPilot.Menu({
items: [
{
text: "Edit...",
onClick: async (args) => {
const e = args.source;
const form = [
{ name: "Text", id: "text" }
];
const modal = await DayPilot.Modal.form(form, e.data);
if (modal.canceled) {
return;
}
dp.events.update(modal.result);
}
},
{
text: "-",
},
{
text: "Delete",
onClick: (args) => {
const e = args.source;
dp.events.remove(e);
}
},
]
}),
contextMenuSelection: new DayPilot.Menu({
items: [
{
text: 'Create new event (JavaScript)',
onClick: (args) => {
dp.events.add({
start: args.source.start,
end: args.source.end,
text: "New event",
resource: args.source.resource
});
dp.clearSelection();
}
},
{text: '-'},
{
text: 'Show selection details',
onClick: (args) => {
DayPilot.Modal.alert('Start: ' + args.source.start + '\nEnd: ' + args.source.end + '\nResource id: ' + args.source.resource);
}
},
{
text: 'Clean selection',
onClick: () => {
dp.clearSelection();
}
}]
}),
onEventMoved: (args) => {
dp.message("Moved: " + args.e.text());
},
onEventResized: (args) => {
dp.message("Resized: " + args.e.text());
},
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("New event name:", "Event");
dp.clearSelection();
if (modal.canceled) return;
dp.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
});
dp.message("Created");
},
onEventClicked: async (args) => {
const form = [
{id: "text", name: "Text" },
{id: "start", name: "Start", type: "datetime", disabled: true},
{id: "end", name: "End", type: "datetime", disabled: true}
];
const modal = await DayPilot.Modal.form(form, args.e.data);
if (modal.canceled) {
return;
}
args.e.data.text = modal.result.text;
dp.events.update(args.e);
},
columnWidthMin: 100,
onBeforeEventRender: args => {
args.data.areas = [
{
right: 6,
top: 6,
width: 18,
height: 18,
style: "cursor:pointer;",
backColor: "#cccccc88",
borderRadius: "50%",
padding: 2,
fontColor: "#333333",
symbol: "../icons/daypilot.svg#threedots-h",
action: "ContextMenu",
toolTip: "Menu"
}
];
},
});
dp.init();
const app = {
loadData() {
const first = DayPilot.Date.today().firstDayOfWeek("en-us").addDays(1);
const events = [
{
start: first.addHours(12).addMinutes(15),
end: first.addHours(15),
id: 1,
text: "Event 1",
barColor: "#3c78d8",
barBackColor: "#a4c2f4"
},
{
start: first.addDays(1).addHours(10),
end: first.addDays(1).addHours(12),
id: 2,
text: "Event 2",
barColor: "#6aa84f",
barBackColor: "#b6d7a8"
},
{
start: first.addDays(1).addHours(13),
end: first.addDays(1).addHours(15),
id: 3,
text: "Event 3",
barColor: "#f1c232",
barBackColor: "#ffe599"
},
{
start: first.addDays(2).addHours(11).addMinutes(15),
end: first.addDays(2).addHours(16).addMinutes(15),
id: 4,
text: "Event 4",
barColor: "#cc0000",
barBackColor: "#ea9999"
},
];
dp.update({events});
},
init() {
this.loadData();
}
};
app.init();