OverflowPopup

Widget

By default, an OverflowPopup aligns to the overflowing day cell.

Configure as false to align to the overflow button that was clicked instead.

The DateHelper format string/function to use to create the title of this dialog.

A Widget config object used to configure the inner list of overflowing events shown in this popup.

This widget has a weight of 500, so to insert widgets above this in the items collection, use weight less than 500, and to insert widgets below it use weight greater than 500.

Note that this may be used to customize the list of events shown in the popup. You can set its type property to be a calendar view such as 'dayview' or 'dayagenda' or 'agendaview' to show a detailed view of the overflowing day's events:

For example:

   modes : {
       month : {
           overflowPopup : {
              eventList : {
                 // Use a DayView to show overflowing events
                 // Make hours a little smaller to fit more in
                 type         : 'dayview',
                 dayStartTime : 9,
                 hourHeight   : 30,
              }
          }
      }
  }

An empty function by default, but provided so that you can override it.

This function is called each time an event is rendered to allow developers to mutate the cell metadata, or the CSS classes to be applied to the event element.

It's called with the event record, and a eventData object which allows you to mutate event metadata such as 'cls', 'style'.

The cls property is an object whose property names will be added to the event element if the property value is truthy.

The style property is an object containing style properties for the event element.

A non-null return value from the renderer is used as the event body content. A nullish return value causes the default renderer to be used which just uses the event name.

If a string is returned, it is used as the HTML content of the event body element.

If an object is returned, it is used as a DomConfig object to create complex content in the event body element.

 eventRenderer({ eventRecord, renderData }) {
     if (eventRecord.name === 'Doctors appointment') {
         renderData.style.fontWeight = 'bold';
         renderData.cls['custom-cls'] = 1;

         return 'Special doctors appointment';
     }
 }

IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.

For example:

 eventRenderer({ eventRecord }) {
     return StringHelper.xss`Event: ${eventRecord.name}`;
 }

A function which compares events to decide upon rendering order.

By default, this class uses the sorted order of its owning view and does not perform a sort, but this may be configured to override that behaviour.

Note that the two objects to compare may either be EventModels or EventBars which contain an eventRecord property which is the EventModel.

By default an event overflow popup shows all the events for the activated date.

Configure this as true to only display the events which were hidden due to overflow.