Javascript Event calendar Resource Filter in Header Example

The calendar view doesn't have built in resource listing, however we can easily solve that inside the header using the segmented component. The header of the agenda 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

Preview in full screen

Filter events by resource in the event calendar using a segmented control in the header — switch people or resources without a filter panel.

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: {
    calendar: { labels: true },
  },
  resources: myResources,
  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/filter-resource-events/',
  function (events) {
    myEvents = events;
    var filteredEvents = myEvents.filter(function (e) {
      return selectedResources[e.resource];
    });
    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.resource];
    });

    calendar.setEvents(filteredEvents);

    mobiscroll.toast({
      message: (target.checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events',
    });
  });
});

<div id="demo-header-filter"></div>

.mds-header-filter-nav {
  width: 180px;
}

.mds-header-filter-img {
  width: 25px;
}

.mds-header-filter-name {
  margin-left: 10px;
}

.mds-header-filter .mbsc-segmented {
  max-width: 400px;
  margin: 0 auto;
}

.mds-header-filter .mbsc-segmented-button.mbsc-selected {
  color: #fff;
}

.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-1 .mbsc-segmented-selectbox-inner {
  background: #328e39;
}

.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-2 .mbsc-segmented-selectbox-inner {
  background: #00aabb;
}

.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-3 .mbsc-segmented-selectbox-inner {
  background: #ea72c0;
}

.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;
}

Resource Filter in Header

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session