JavaScript Monthly Calendar: Max Events + Expand Button

Overview

• You can limit the number of events displayed by the JavaScript monthly calendar.

• Customize the day cell to display a button with additional options.

• You can switch to a daily calendar, display the list of all events in a modal dialog, or expand the monthly view to display all events.

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

How to Limit the Number of Events Visible in the Monthly Calendar

Since version 2021.4.5142, you can use the maxEvents property to limit the number of concurrent events displayed by the JavaScript monthly calendar from DayPilot Pro for JavaScript.

The default value is "All" and it displays all events without limitation:

You can use a number as a value instead - it will set the maximum number of concurrent events for each day:

const month = new DayPilot.Month("month", {
  maxEvents: 3
});

In that case, the monthly calendar will only display first X events for each day. It respects the current event sorting rule. All events are loaded, they are sorted and for each week, the events at a position higher than the specified maxEvent value are not rendered.

It works with events spanning multiple days as well but it’s not recommended since you may see weird results, especially with events spanning multiple weeks (the long events may be visible in some weeks, and hidden in others).

How to Add the Expand Button

To make the hidden events accessible, we will add a button/hyperlink to the bottom of day cells with extra events.

First, it’s necessary to make an extra space at the bottom of the day cells for the button using cellMarginBottom property:

const month = new DayPilot.Month("month", {
  // ...
  cellMarginBottom: 25
});

Now we can add the button using onBeforeCellRender event.

In the event handler, we load the events that overlap the day cell using the args.cell.events() method. If the number of events is greater than the maxEvents value, we add an active area to the bottom of the day cell

const month = new DayPilot.Month("month", {
  // ...
  onBeforeCellRender: (args) => {
    const events = args.cell.events();
    const maxSpecified = typeof month.maxEvents === "number";
    if (maxSpecified && events.length > month.maxEvents) {
      const more = events.length - month.maxEvents;
      let 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;",
          onClick: (args) => {
             // ...
          }
        }
      ];
    }
  }
});

The button doesn’t do anything at this point (the onClick handler is empty). In the next steps, we will explore some possible actions.

How to Switch to a Daily Calendar

In order to switch to a day view, we need to prepare the daily calendar in advance.

First, add a placeholder to the HTML:

<div id="day"></div>

And create a new instance of DayPilot.Calendar class that will display the daily calendar and initialize it. We will add visible: false to the initial configuration. That will keep the day view hidden during the initial page load.

const day = new DayPilot.Calendar("day", {
  visible: false
});

Now we can implement the onClick handler of the active area.

It will hide the month view and display the day view. You can see that we also load the event data from the event set that we already loaded for the day when checking the number of events. This is a shortcut, normally you would load the data from the server side.

onClick: args => {
  month.update({
    visible: false
  });
  day.update({
    events: events.map(e => e.data),
    visible: true
  });
}

How to Expand the View to Display All Events

Another possible action would be to modify the month view to display all events when clicking the expand button.

The implementation could look like this:

onClick: (args) => {
  month.update({
    maxEvents: "All"
  });
}

We call the update() method of the month view component and remove the maxEvents limitation. This will update the view and display all events in all rows.

How to Display a Modal Dialog with All Events

You can also display a list of all events for a given day using a modal dialog.

onClick: (args) => {
  const form = [];
  events.forEach(e => {
    form.push({html: `${e.text()}`})
  });
  DayPilot.Modal.form(form);
}

We use a dynamically-generated modal dialog and display it using DayPilot.Modal.form() method.