OverflowPopup

This class is not supposed to be used directly. It is used by Calendar views which need to show more events than will fit into a day cell.

A Popup which displays events which will not fit into their container in a View.

By default, the popup contains a simple list of events, but this may be configured to contain a full Calendar view such as a DayView or DayAgendaView or AgendaView to provide a more detailed view of the overflowing day's events.

See the eventList config for details.

The example below shows a MonthView which uses a DayView as its overflow popup's event list:

Overflow popup

//<code-header>
fiddle.title = 'Overflow popup';
//</code-header>
new Calendar({
    appendTo : targetElement,
    height   : 705,
    date     : new Date(2020, 8, 1),
    modes    : {
        month : {
            overflowPopup : {
                eventList : {
                    // We have no day-spanning events in our app
                    allDayEvents : false,
                    type         : 'dayview',
                    dayStartTime : 7
                }
            }
        },
        day    : null,
        week   : null,
        year   : null,
        agenda : null
    },
    events : [
        // 2nd - 5 events
        { startDate : '2020-09-02T07:00', duration : 1, durationUnit : 'h', name : 'Walk the dog', eventColor : 'yellow' },
        { startDate : '2020-09-02T09:00', duration : 2, durationUnit : 'h', name : 'Team sync', eventColor : 'blue' },
        { startDate : '2020-09-02T13:00', duration : 1, durationUnit : 'h', name : 'Lunch with Sam', eventColor : 'green' },
        { startDate : '2020-09-02T15:00', duration : 1, durationUnit : 'h', name : 'Code review', eventColor : 'red' },
        { startDate : '2020-09-02T17:00', duration : 1, durationUnit : 'h', name : 'Evening workout', eventColor : 'orange' },

        // 5th - 6 events
        { startDate : '2020-09-05T08:00', duration : 2, durationUnit : 'h', name : 'Grocery run', eventColor : 'indigo' },
        { startDate : '2020-09-05T11:00', duration : 1, durationUnit : 'h', name : 'Yoga class', eventColor : 'lime' },
        { startDate : '2020-09-05T13:00', duration : 1, durationUnit : 'h', name : 'Quick lunch', eventColor : 'amber' },
        { startDate : '2020-09-05T15:00', duration : 2, durationUnit : 'h', name : 'Project work', eventColor : 'purple' },
        { startDate : '2020-09-05T18:00', duration : 1, durationUnit : 'h', name : 'Team building', eventColor : 'pink' },
        { startDate : '2020-09-05T20:00', duration : 1, durationUnit : 'h', name : 'Read book', eventColor : 'cyan' },

        // 10th - 7 events
        { startDate : '2020-09-10T08:00', duration : 1, durationUnit : 'h', name : 'Morning coffee', eventColor : 'brown' },
        { startDate : '2020-09-10T09:00', duration : 2, durationUnit : 'h', name : 'Buy masks', eventColor : 'orange' },
        { startDate : '2020-09-10T12:00', duration : 1, durationUnit : 'h', name : 'Lunch break', eventColor : 'green' },
        { startDate : '2020-09-10T12:30', duration : 1, durationUnit : 'h', name : 'One-on-one', eventColor : 'teal' },
        { startDate : '2020-09-10T16:00', duration : 1, durationUnit : 'h', name : 'Review PRs', eventColor : 'cyan' },
        { startDate : '2020-09-10T18:00', duration : 1, durationUnit : 'h', name : 'Gym session', eventColor : 'red' },
        { startDate : '2020-09-10T20:00', duration : 1, durationUnit : 'h', name : 'Dinner prep', eventColor : 'yellow' },

        // 14th - 4 events
        { startDate : '2020-09-14T07:00', duration : 1, durationUnit : 'h', name : 'Zoom meeting', eventColor : 'deep-orange' },
        { startDate : '2020-09-14T10:00', duration : 2, durationUnit : 'h', name : 'Spec drafting', eventColor : 'amber' },
        { startDate : '2020-09-14T14:00', duration : 1, durationUnit : 'h', name : 'Coffee catchup', eventColor : 'pink' },
        { startDate : '2020-09-14T16:30', duration : 1, durationUnit : 'h', name : 'Planning session', eventColor : 'lime' },

        // 18th - 8 events
        { startDate : '2020-09-18T07:00', duration : 1, durationUnit : 'h', name : 'Morning jog', eventColor : 'green' },
        { startDate : '2020-09-18T08:00', duration : 1, durationUnit : 'h', name : 'Morning run', eventColor : 'yellow' },
        { startDate : '2020-09-18T09:30', duration : 1, durationUnit : 'h', name : 'Product demo', eventColor : 'red' },
        { startDate : '2020-09-18T11:00', duration : 1, durationUnit : 'h', name : 'Stand-up meeting', eventColor : 'blue' },
        { startDate : '2020-09-18T13:00', duration : 2, durationUnit : 'h', name : 'Architecture review', eventColor : 'deep-purple' },
        { startDate : '2020-09-18T16:00', duration : 1, durationUnit : 'h', name : 'Client presentation', eventColor : 'orange' },
        { startDate : '2020-09-18T18:00', duration : 1, durationUnit : 'h', name : 'Team retrospective', eventColor : 'teal' },
        { startDate : '2020-09-18T19:30', duration : 1, durationUnit : 'h', name : 'Documentation', eventColor : 'gray' },

        // 22nd - 5 events
        { startDate : '2020-09-22T08:00', duration : 1, durationUnit : 'h', name : 'Morning briefing', eventColor : 'indigo' },
        { startDate : '2020-09-22T09:00', duration : 3, durationUnit : 'h', name : 'Focus block', eventColor : 'gray' },
        { startDate : '2020-09-22T13:30', duration : 1, durationUnit : 'h', name : 'Client call', eventColor : 'blue' },
        { startDate : '2020-09-22T16:00', duration : 1, durationUnit : 'h', name : 'Wrap up notes', eventColor : 'green' },
        { startDate : '2020-09-22T18:00', duration : 1, durationUnit : 'h', name : 'End of day sync', eventColor : 'purple' },

        // 25th - 6 events
        { startDate : '2020-09-25T08:00', duration : 1, durationUnit : 'h', name : 'Daily check-in', eventColor : 'cyan' },
        { startDate : '2020-09-25T09:00', duration : 1, durationUnit : 'h', name : 'Get a haircut', eventColor : 'gray' },
        { startDate : '2020-09-25T11:00', duration : 1, durationUnit : 'h', name : 'Study time', eventColor : 'blue' },
        { startDate : '2020-09-25T14:00', duration : 2, durationUnit : 'h', name : 'Write blog post', eventColor : 'indigo' },
        { startDate : '2020-09-25T17:00', duration : 1, durationUnit : 'h', name : 'Weekly wrap-up', eventColor : 'amber' },
        { startDate : '2020-09-25T19:00', duration : 1, durationUnit : 'h', name : 'Personal project', eventColor : 'deep-orange' }
    ]
});

Configs

125

Common

listenersEvents

Other

dateFormat: String | function= dddd, MMM DD

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

Parameter	Type	Description
`date`	Date	The date to format.

Returns: String -

The formatted date.

eventList: ContainerItemConfig

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,
              }
          }
      }
  }

Parameter Type Description

Parameter	Type	Description
`type`	dayview \| dayagenda \| agendaview	The type of widget to create to show as the event list. If specified, may be: `'dayview'` `'dayagenda'` `'agendaview'`

type

dayview | dayagenda | agendaview

The type of widget to create to show as the event list. If specified, may be:

'dayview'
'dayagenda'
'agendaview'

eventRenderer: function

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}`;
 }

Parameter	Type	Description
`detail`	Object	An object that contains data about the event being rendered.
`detail.eventRecord`	EventModel	The event record
`detail.resourceRecord`	ResourceModel	The event record
`detail.renderData`	Object	A data object containing properties that will be used to create the event element.
`detail.renderData.style`	Object	The style property is an object containing style properties for the event element.
`detail.renderData.cls`	Object	The cls property is an object whose property names will be added to the event element if the property value is truthy.
`detail.renderData.eventColor`	String	Color to be applied to the event