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

> Note: Read more about integrating the [date navigator](https://doc.daypilot.org/calendar/navigator/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/lite/calendar/navigator.html
- Source HTML folder: /demo/lite/calendar/
- Catalog root: /demo/lite/
- Catalog: /demo/lite/llms.txt

## Source

### Inline demo script 1

```javascript
const datepicker = new DayPilot.Navigator("nav", {
            showMonths: 3,
            selectMode: "Week",
            freeHandSelectionEnabled: true,
            onTimeRangeSelected: (args) => {
                calendar.update({
                    startDate: args.start
                });
            }
        });
        datepicker.init();

        const calendar = new DayPilot.Calendar("dp", {
            viewType: "Week",
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                calendar.clearSelection();
                if (modal.canceled) {
                    return;
                }
                calendar.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result
                });
            },
            onEventClick: (args) => {
                DayPilot.Modal.alert("clicked: " + args.e.id());
            }
        });
        calendar.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {start: DayPilot.Date.today().addHours(10), end: DayPilot.Date.today().addHours(12), id: DayPilot.guid(), text: "Event 1"},
                    {start: DayPilot.Date.today().addHours(14), end: DayPilot.Date.today().addHours(16), id: DayPilot.guid(), text: "Event 2"},
                    {start: DayPilot.Date.today().addHours(18), end: DayPilot.Date.today().addHours(20), id: DayPilot.guid(), text: "Event 3"}
                ];
                calendar.update({events});
            }
        };
        app.init();
```