search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Max Events

Asked by Santiago Losada Borrajo
20 days ago.

We are trying to integrate this new feature:
https://javascript.daypilot.org/demo/month/eventsmax.html
A question has arisen, although the maxEvents attribute works correctly, we cannot see how to define the message with the button to expand the events to display, at least for Angular, any indication of how to add that button?

Answer posted by Dan Letecky [DayPilot]
17 days ago.

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;
New Reply
This reply is
Attachments:
or drop files here
Your name (optional):