Resource Filtering in Header

The header of the scheduler is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

  • 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.

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 .mds-header-filter-prev { order: 1; }
            .mbsc-material .mds-header-filter-next { order: 2; }
            .mbsc-material .mds-header-filter { order: 3; }
            .mbsc-material .mds-header-filter-today { order: 4; }
Want to style and reorder the header?  Take a look at the previous example →
Download and try example

Demo

Loading the live demo

Preview in full screen

Add a segmented resource filter to the Scheduler header — place it between navigation buttons to let users switch resources inline.

Code

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

var myEvents = [];

var myResources = [
  {
    id: 1,
    name: 'Barry',
    color: '#328e39',
    img: 'https://img.mobiscroll.com/demos/m1.png',
  },
  {
    id: 2,
    name: 'Hortense',
    color: '#00aabb',
    img: 'https://img.mobiscroll.com/demos/f1.png',
  },
  {
    id: 3,
    name: 'Carl',
    color: '#ea72c0',
    img: 'https://img.mobiscroll.com/demos/m2.png',
  },
];

var selectedResources = { 1: true };

var calendar = mobiscroll.eventcalendar('#demo-header-filter', {
  clickToCreate: false,
  dragToCreate: false,
  dragToMove: true,
  dragToResize: true,
  view: {
    scheduler: {
      type: 'week',
    },
  },
  renderHeader: function () {
    var header = '<div mbsc-calendar-nav class="mds-header-filter-nav"></div>' + '<div class="mds-header-filter mbsc-flex-1-0">';

    myResources.forEach(function (res) {
      header +=
        '<label class="mds-header-filter-' +
        res.id +
        '">' +
        '<img class="mds-header-filter-img" src="' +
        res.img +
        '"/>' +
        '<span class="mds-header-filter-name">' +
        res.name +
        '</span>' +
        '<input type="checkbox" mbsc-segmented name="resource" class="mds-header-filter-input" value="' +
        res.id +
        '" ' +
        (res.id === 1 ? 'checked' : '') +
        '>' +
        '</label>';
    });

    header +=
      '</div>' +
      '<button mbsc-calendar-prev class="mds-header-filter-prev"></button>' +
      '<button mbsc-calendar-today class="mds-header-filter-today"></button>' +
      '<button mbsc-calendar-next class="mds-header-filter-next"></button>';
    return header;
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/custom-events/',
  function (events) {
    myEvents = events.map(function (e) {
      e.color = myResources.find(function (r) {
        return r.id === e.participant;
      }).color;
      return e;
    });
    var filteredEvents = myEvents.filter(function (e) {
      return selectedResources[e.participant];
    });

    calendar.setEvents(filteredEvents);
  },
  'jsonp',
);

document.querySelectorAll('.mds-header-filter-input').forEach(function (target) {
  target.addEventListener('change', function () {
    selectedResources[target.value] = target.checked;
    var resource = myResources.find(function (r) {
      return r.id === +target.value;
    });
    var filteredEvents = myEvents.filter(function (e) {
      return selectedResources[e.participant];
    });

    calendar.setEvents(filteredEvents);

    mobiscroll.toast({
      message: (target.checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' 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.