# JavaScript Event Calendar | DayPilot Pro for JavaScript Demo

> Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).

## Links

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

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Calendar("dp", {
            // view
            startDate: DayPilot.Date.today(),
            viewType: "Days",
            days: 210,
            columnWidthSpec: "Fixed",
            dynamicEventRendering: "Progressive",
            dynamicEventRenderingMarginY: 1000,
            scrollDelayEvents: 100,
        });
        dp.init();

        const app = {
            init() {
                const events = [];
                for (let x = 0; x < dp.days; x++) {
                    for (let y = 0; y < 24; y++) {
                        const e = {
                            start: dp.startDate.addDays(x).addHours(0).addHours(y),
                            end:  dp.startDate.addDays(x).addHours(0).addHours(y).addHours(1),
                            text: `Event ${x}/${y}`,
                            id: DayPilot.guid(),
                        };
                        events.push(e);
                    }
                }
                dp.update({events});
            }
        };
        app.init();
```