# Monthly Event Calendar | DayPilot Pro for JavaScript Demo

> Read more about the [JavaScript monthly calendar](http://javascript.daypilot.org/month/).

## Links

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

## Source

### Inline demo script 1

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


        // 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.message("Created");
        };

        dp.eventStartTime = true;
        dp.eventEndTime = true;

        dp.init();


        const app = {
            loadData() {
                const events = [];
                const start = DayPilot.Date.today().firstDayOfMonth();
                for (let i = 0; i < 10; i++) {
                    const duration = Math.floor(Math.random() * 1.2);
                    const offset = Math.floor(Math.random() * 6) - 3; // -3 to 3

                    events.push({
                        start: start.addDays(offset).addHours(8),
                        end: start.addDays(offset).addDays(duration).addHours(17),
                        id: DayPilot.guid(),
                        text: `Event ${i + 1}`
                    });
                }
                dp.update({events});
            },
        };
        app.loadData();
```