Show All or Limit Event Labels

Labels on the event calendar go hand in hand with the height of the event calendar rows (representing weeks). It is possible to render as many labels as fit and keep the row heights equal. The row height is liquid and determined by the height of the calendar.

If you would like to render all labels, then passing labels: 'all' will do just that. This can make the row heights variable.

Alternatively a maximum number of labels can be set by passing a number to the labels property of the view.calendar option.

If there are more events than the number of labels for a particular day, an "x more" label will help users list out all events for the day.

By default the width of the labels fill the day cells (eventDisplay: 'fill') but alternatively eventDisplay: 'exact' can be used to display the labels with exact times.

Download and try example

Demo

Render labels:
Javascript jQuery Angular React Vue 
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: 'all',
      type: 'month',
      eventDisplay: 'fill'
    }
  }
});
Show all event labels with dynamic row heights or limit labels per day in a month-view calendar — hidden events appear in a "show more" popover.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.