Max Events

This example uses onBeforeCellRender to customize the monthly calendar cells. It adds the action button using an active area.

In Angular, it could look like this:

onBeforeCellRender: (args) => {
    const events = args.cell.events();
    const dp = this.scheduler.control;
    const maxSpecified = typeof dp.maxEvents === "number";
    if (maxSpecified && events.length > dp.maxEvents) {
        const more = events.length - dp.maxEvents;
        const 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: (args) => {
                    dp.update({maxEvents: null});
                }
            }
        ];
    }
}

This example uses the update() method to change the maxEvents value. If you define it using the config object, it's better to modify the config property:

this.config.maxEvents = null;