Select locale:
Agent-readable demo data
- Title
- Localization (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Lite
- Description
- Note: Read more about the event calendar localization [doc.daypilot.org].
Inline demo script 1
const dp = new DayPilot.Calendar("dp");
// view
dp.startDate = "2021-03-25";
dp.viewType = "Week";
dp.locale = "de-de";
dp.headerDateFormat = "dddd";
// event creating
dp.onTimeRangeSelected = function (args) {
var name = prompt("New event name:", "Event");
if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: name
});
dp.events.add(e);
dp.clearSelection();
};
dp.onEventClick = function (args) {
alert("clicked: " + args.e.id());
};
dp.init();
const app = {
elements: {
locale: document.querySelector("#locale")
},
init() {
this.addEventHandlers();
this.loadEventData();
},
addEventHandlers() {
app.elements.locale.addEventListener("change", function() {
const locale = app.elements.locale.value;
dp.update({locale});
});
},
loadEventData() {
const events = [
{
start: new DayPilot.Date("2021-03-25T12:00:00"),
end: new DayPilot.Date("2021-03-25T12:00:00").addHours(3),
id: DayPilot.guid(),
text: "Special event"
}
];
dp.events.list = events;
dp.update();
}
};
app.init();