Javascript Scheduler Custom Header Example

You can customize how the header of the scheduler looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between scheduler 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

Preview in full screen

Customize the Scheduler header — rearrange navigation controls, add a view-switcher for scheduler/calendar views, and set per-theme control order.

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var currentDate = new Date();
var view = 'schedule';
var calendar = mobiscroll.eventcalendar('#demo-custom-header', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  view: {
    scheduler: { type: 'week' },
  },
  onSelectedDateChange: function (args) {
    currentDate = args.date;
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav class="md-custom-header-nav"></div>' +
      '<div class="md-custom-header-controls">' +
      '<button id="nav-to-prev-page" mbsc-button data-variant="flat" data-icon="material-arrow-back" class="md-custom-header-button"></button>' +
      '<div mbsc-calendar-today class="md-custom-header-today"></div>' +
      '<button id="nav-to-next-page" mbsc-button data-variant="flat" data-icon="material-arrow-forward" class="md-custom-header-button"></button>' +
      '</div>' +
      '<div class="md-custom-header-view">' +
      '<label><input data-icon="material-list" mbsc-segmented type="radio" name="view" value="schedule" class="md-view-change" checked></label>' +
      '<label><input data-icon="calendar" mbsc-segmented type="radio" name="view" value="calendar" class="md-view-change"></label>' +
      '</div>'
    );
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    calendar.setEvents(events);
  },
  'jsonp',
);

function getFirstDayOfWeek(d, prev) {
  var day = d.getDay();
  var diff = d.getDate() - day + (prev ? -7 : 7);
  return new Date(d.setDate(diff));
}

function navigatePage(prev) {
  if (view == 'calendar') {
    var prevNextPage = new Date(currentDate.getFullYear(), currentDate.getMonth() + (prev ? -1 : 1), 1);
    calendar.navigate(prevNextPage);
    currentDate = prevNextPage;
  } else {
    var prevNextSunday = getFirstDayOfWeek(currentDate, prev);
    calendar.navigate(prevNextSunday);
    currentDate = prevNextSunday;
  }
}

document.querySelectorAll('.md-view-change').forEach(function (elm) {
  elm.addEventListener('change', function (ev) {
    switch (ev.target.value) {
      case 'calendar':
        calendar.setOptions({
          view: {
            calendar: { labels: true },
          },
        });
        view = 'calendar';
        break;
      case 'schedule':
        calendar.setOptions({
          view: {
            scheduler: { type: 'week' },
          },
        });
        view = 'schedule';
        break;
    }
  });
});

document.getElementById('nav-to-prev-page').addEventListener('click', function () {
  navigatePage(true);
});

document.getElementById('nav-to-next-page').addEventListener('click', function () {
  navigatePage(false);
});

<div id="demo-custom-header" class="md-custom-header"></div>

.md-custom-header-controls {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
}

.md-custom-header-nav,
.md-custom-header-view {
    width: 180px;
}

.md-custom-header-button.mbsc-button {
    font-size: 20px;
    height: auto;
    padding: 0;
    margin: 0;
}

.md-custom-header .mbsc-segmented {
    width: 110px;
    float: right;
    margin-top: 0;
    margin-bottom: 0;
}

.md-custom-header .mbsc-material.mbsc-segmented,
.md-custom-header .mbsc-windows.mbsc-segmented {
    padding: 0;
}

.md-custom-header .mbsc-segmented .mbsc-segmented-button {
    font-size: 20px;
    height: 32px;
    padding: 0;
}

Custom Header

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session