# Localization (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Demo

> Note: Read more about the [monthly event calendar localization](https://doc.daypilot.org/month/localization/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/lite/month/localization.html
- Source HTML folder: /demo/lite/month/
- Catalog root: /demo/lite/
- Catalog: /demo/lite/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Month("dp");

    dp.locale = "de-de";

    // view
    dp.startDate = "2026-03-01";

    // event creating
    dp.onTimeRangeSelected = function (args) {
        var name = prompt("New event name:", "Event");
        dp.clearSelection();
        if (!name) return;
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: name
        });
        dp.events.add(e);
    };

    dp.onEventClicked = 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 = [];
            for (let i = 0; i < 10; i++) {
                const duration = Math.floor(Math.random() * 1.2);
                const start = Math.floor(Math.random() * 6) - 3; // -3 to 3

                events.push({
                    start: new DayPilot.Date("2026-03-04T00:00:00").addDays(start),
                    end: new DayPilot.Date("2026-03-04T12:00:00").addDays(start).addDays(duration),
                    id: DayPilot.guid(),
                    text: "Event " + i
                });
            }
            dp.update({events});
        }
    };
    app.init();
```