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 - <mbsc-calendar-nav></mbsc-calendar-nav>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <mbsc-calendar-today></mbsc-calendar-today>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <mbsc-calendar-next></mbsc-calendar-next>. 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 headerTemplate.

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 →
Get started with this 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 
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscResource,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}

  myEvents: MbscCalendarEvent[] = [];

  myResources: MbscResource[] = [
    {
      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',
    },
  ];

  myView: MbscEventcalendarView = { scheduler: { type: 'week' } };

  filteredEvents: MbscCalendarEvent[] = [];

  selectedResources = [1];

  onChange(ev: Event): void {
    const target = ev.target as HTMLInputElement;
    const resource = this.myResources.find((r) => r.id === +target.value);

    this.filteredEvents = this.myEvents.filter((e) => this.selectedResources.indexOf(e['participant']) !== -1);

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

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/custom-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp.map((e) => {
        e.color = this.myResources.find((r) => r.id === e['participant'])!.color;
        return e;
      });
      this.filteredEvents = this.myEvents.filter((e) => this.selectedResources.indexOf(e['participant']) !== -1);
    });
  }
}

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.