Daily Event Listing

In situations when users are interested in seeing a daily summary rather than an hour-by-hour layout of events use the eventDisplay: 'fill' property under the timeline configuration of the view option.

This is especially useful for spotting overloaded resources/days and helps in managing and creating efficient schedules.

Are you building UI for planning employee shifts?  Check out this example →
Download and try example

Demo

Loading the live demo

Preview in full screen

Display events as full-day labels across resources on the Timeline — ideal for capacity checks and daily schedule overviews.

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

$(function () {
  var calendar = $('#demo-event-listing')
    .mobiscroll()
    .eventcalendar({
      clickToCreate:  ,
      dragToCreate:  ,
      dragToMove:  ,
      dragToResize:  ,
      eventDelete:  ,
      view: {
        timeline: {
          type: 'month',
          eventDisplay: 'fill',
        },
      },
      dragToResize: false,
      dragToMove: true,
      data: [
        {
          start: '2026-11-01T08:00',
          end: '2026-11-01T15:00',
          title: 'Event 1',
          resource: 1,
        },
        {
          start: '2026-11-01T10:00',
          end: '2026-11-01T13:00',
          title: 'Event 2',
          resource: 1,
        },
        {
          start: '2026-11-02T07:00',
          end: '2026-11-02T14:00',
          title: 'Event 3',
          resource: 1,
        },
        {
          start: '2026-10-31T09:00',
          end: '2026-10-31T15:00',
          title: 'Event 4',
          resource: 2,
        },
        {
          start: '2026-11-03T07:00',
          end: '2026-11-03T12:00',
          title: 'Event 5',
          resource: 2,
        },
        {
          start: '2026-11-04T11:00',
          end: '2026-11-04T16:00',
          title: 'Event 6',
          resource: 3,
        },
        {
          start: '2026-10-30T08:00',
          end: '2026-10-30T20:00',
          title: 'Event 7',
          resource: 4,
        },
        {
          start: '2026-11-02T09:00',
          end: '2026-11-02T15:00',
          title: 'Event 8',
          resource: 4,
        },
        {
          start: '2026-11-02T13:00',
          end: '2026-11-02T19:00',
          title: 'Event 9',
          resource: 5,
        },
        {
          start: '2026-11-03T12:00',
          end: '2026-11-03T20:00',
          title: 'Event 10',
          resource: 5,
        },
        {
          start: '2026-11-04T18:00',
          end: '2026-11-04T22:00',
          title: 'Event 11',
          resource: 5,
        },
        {
          start: '2026-10-29T10:00',
          end: '2026-10-29T16:00',
          title: 'Event 12',
          resource: 6,
        },
        {
          start: '2026-10-30T15:00',
          end: '2026-10-30T20:00',
          title: 'Event 13',
          resource: 6,
        },
      ],
      resources: [
        {
          id: 1,
          name: 'Resource A',
          color: '#e20000',
        },
        {
          id: 2,
          name: 'Resource B',
          color: '#60e81a',
        },
        {
          id: 3,
          name: 'Resource C',
          color: '#3ba7ff',
        },
        {
          id: 4,
          name: 'Resource D',
          color: '#e25dd2',
        },
        {
          id: 5,
          name: 'Resource E',
          color: '#f1e920',
        },
        {
          id: 6,
          name: 'Resource F',
          color: '#1ac38d',
        },
      ],
      renderHeader: function () {
        return (
          '<div mbsc-calendar-nav class="md-event-listing-nav"></div>' +
          '<div class="md-event-listing-picker">' +
          '<label>Work week<input mbsc-segmented type="radio" name="event-listing-view" value="workweek" class="event-listing-view-change"></label>' +
          '<label>Week<input mbsc-segmented type="radio" name="event-listing-view" value="week" class="event-listing-view-change"></label>' +
          '<label>Month<input mbsc-segmented type="radio" name="event-listing-view" value="month" class="event-listing-view-change" checked></label>' +
          '</div>' +
          '<div mbsc-calendar-prev class="md-event-listing-prev"></div>' +
          '<div mbsc-calendar-today class="md-event-listing-today"></div>' +
          '<div mbsc-calendar-next class="md-event-listing-next"></div>'
        );
      },
    })
    .mobiscroll('getInst');

  $('.event-listing-view-change').change(function (ev) {
    switch (ev.target.value) {
      case 'workweek':
        calendar.setOptions({
          view: {
            timeline: {
              type: 'week',
              eventDisplay: 'fill',
              startDay: 1,
              endDay: 5,
            },
          },
        });
        break;
      case 'week':
        calendar.setOptions({
          view: {
            timeline: {
              type: 'week',
              eventDisplay: 'fill',
            },
          },
        });
        break;
      case 'month':
        calendar.setOptions({
          view: {
            timeline: {
              type: 'month',
              eventDisplay: 'fill',
            },
          },
        });
        break;
    }
  });
});

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.