# Max Events (Monthly Event Calendar) | DayPilot Pro for JavaScript Demo

> Each day displays up to 3 events. Additional events are accessible using a custom link at the bottom of the day cell.

## Links

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

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Month("dp", {
            cellMarginBottom: 25,
            maxEvents: 3,
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result
                });
                dp.message("Created");
            },
            onBeforeCellRender: args => {
                var events = args.cell.events();
                var maxSpecified = typeof dp.maxEvents === "number";
                if (maxSpecified && events.length > dp.maxEvents) {
                    var more = events.length - dp.maxEvents;
                    var text = "+" + more + " events";
                    if (more === 1) {
                        text = "+1 event";
                    }
                    args.cell.areas = [
                        {
                            bottom: 0,
                            left: 0,
                            height: 25,
                            right: 0,
                            text: text,
                            style: "color: #00639e; text-decoration: underline; cursor: pointer; padding: 2px; box-sizing: border-box;",
                            action: "None",
                            onClick: function (args) {
                                dp.update({ maxEvents: null });
                            }
                        }
                    ];
                }
            }
        });
        dp.init();

        const app = {
            loadData() {
                const events = [
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 1"},
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 2"},
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 3"},
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 4"},
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 5"},
                    {start: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), id: DayPilot.guid(), text: "Event 6"},
                ];
                dp.update({events});
            }
        };
        app.loadData();
```