Event Calendar Agenda Custom Header

You can customize how the header of the agenda looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between agenda and calendar.

Use the renderHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

  • Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <button mbsc-calendar-next></button>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the renderHeader. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
            .mbsc-material .md-header-filter-next { order: 2; }
            .mbsc-material .md-header-filter-controls { order: 3; }
            .mbsc-material .md-header-filter-today { order: 4; }
Want to add a filter to the header?  Check out the next example →
Download and try example

Demo

Loading the live demo

Preview in full screen

Build a custom event calendar agenda header — rearrange navigation controls, add a view switcher, and control layout per theme.

Code

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

$(function () {
  var currentDate = new Date();
  var calendar = $('#demo-custom-header')
    .mobiscroll()
    .eventcalendar({
      view: {
        agenda: { type: 'month' },
      },
      onSelectedDateChange: function (args) {
        currentDate = args.date;
      },
      renderHeader: function () {
        return (
          '<div mbsc-calendar-nav class="mds-custom-header-nav"></div>' +
          '<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">' +
          '<button id="demo-custom-header-prev" mbsc-button data-variant="flat" data-icon="material-arrow-back" class="mds-custom-header-button"></button>' +
          '<button mbsc-calendar-today></button>' +
          '<button id="demo-custom-header-next" mbsc-button data-variant="flat" data-icon="material-arrow-forward" class="mds-custom-header-button"></button>' +
          '</div>' +
          '<div class="mds-custom-header-switch">' +
          '<label><input data-icon="material-view-day" mbsc-segmented type="radio" name="view" value="agenda" class="mds-custom-header-view-change" checked></label>' +
          '<label><input data-icon="calendar" mbsc-segmented type="radio" name="view" value="calendar" class="mds-custom-header-view-change"></label>' +
          '</div>'
        );
      },
    })
    .mobiscroll('getInst');

  $('.mds-custom-header-view-change').on('change', function (ev) {
    switch (ev.target.value) {
      case 'calendar':
        calendar.setOptions({
          view: { calendar: { type: 'month' } },
        });
        break;
      case 'agenda':
        calendar.setOptions({
          view: { agenda: { type: 'month' } },
        });
        break;
    }
  });

  $('#demo-custom-header-prev').on('click', function () {
    currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
    calendar.navigate(currentDate);
  });

  $('#demo-custom-header-next').on('click', function () {
    currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
    calendar.navigate(currentDate);
  });

  $.getJSON('https://trial.mobiscroll.com/events/?vers=5&callback=?', function (events) {
    calendar.setEvents(events);
  });
});

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.