# Open-Source JavaScript Monthly Calendar | DayPilot Lite for JavaScript Sandbox

> Note: Customize the component using [Monthly Calendar UI Builder](https://builder.daypilot.org/month?edition=lite) and download a ready-to-run project. Read more about the [JavaScript monthly calendar](https://javascript.daypilot.org/month/).

## Links

- Canonical HTML: /sandbox/lite/month/index.html
- Source HTML folder: /sandbox/lite/month/
- Catalog root: /sandbox/lite/
- Catalog: /sandbox/lite/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Month("dp", {
        startDate: "2026-09-01",
        onTimeRangeSelected: async function (args) {

            const colors = [
                {name: "Blue", id: "#3c78d8"},
                {name: "Green", id: "#6aa84f"},
                {name: "Yellow", id: "#f1c232"},
                {name: "Red", id: "#cc0000"},
            ];

            const form = [
                {name: "Text", id: "text"},
                {name: "Color", id: "barColor", options: colors}
            ];

            const data = {
                text: "Event",
                barColor: "#6aa84f"
            };

            const modal = await DayPilot.Modal.form(form, data);

            dp.clearSelection();

            if (modal.canceled) {
                return;
            }

            dp.events.add({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                text: modal.result.text,
                barColor: modal.result.barColor
            });
        },
        contextMenu: new DayPilot.Menu({
            items: [
                {
                    text: "Edit",
                    onClick: async (args) => {
                        const form = [
                            {id: "text", name: "Event Name", type: "text"}
                        ];
                        const e = args.source;
                        const modal = await DayPilot.Modal.form(form, e.data);
                        if (modal.canceled) {
                            return;
                        }
                        dp.events.update(modal.result);

                    }
                },
                {text: "-"},
                {
                    text: "Delete",
                    onClick: (args) => {
                        dp.events.remove(args.source);
                    }
                },
            ]
        }),
        onBeforeEventRender: args => {
            args.data.areas = [
                {
                    right: 4,
                    top: "calc(50% - 9px)",
                    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"
                }
            ];
        },
    });

    // generate and load 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

        dp.events.add({
            start: new DayPilot.Date("2026-09-04T00:00:00").addDays(start),
            end: new DayPilot.Date("2026-09-04T12:00:00").addDays(start).addDays(duration),
            id: DayPilot.guid(),
            text: "Event " + i
        });
    }

    dp.init();
```