--- title: "Angular Scheduler Resource Filtering in Header Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/scheduler/resource-filtering-in-header" --- # Resource Filtering in Header - Angular Scheduler demo Add a segmented resource filter to the Angular Scheduler header — place it between navigation buttons to let users switch resources inline. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/resource-filtering-in-header) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/resource-filtering-in-header) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/resource-filtering-in-header.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/resource-filtering-in-header.md), [React](https://demo.mobiscroll.com/react/scheduler/resource-filtering-in-header.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/resource-filtering-in-header.md) ## Description 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** - ``. Use the `.md-header-filter-controls` CSS class for custom overrides. - **Today button** - ``. Use the `.md-header-filter-today` CSS class for custom overrides. - **Previous month button** - ``. Use the `.md-header-filter-prev` CSS class for custom overrides. - **Next month 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 `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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 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.: ```css .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 →](https://demo.mobiscroll.com/angular/scheduler/customizing-header) ## What this demo shows - A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week. - **Header layout** The current month and year are shown on the left, a segmented resource filter is centered in the header, and blue month navigation arrows with a `Today` button between them on the right. - **Resource filter** The segmented control contains three selectable options: `Barry`, `Hortense`, and `Carl`, each with an avatar shown before the name. - **Resource filtering** Selecting a resource from the segmented control, updates the scheduler view to show that person's events, making it possible to show or hide events by resource from the header. - **Color coding** `Barry`'s option and events use green, `Hortense` uses blue, and `Carl` uses pink, so the active filter and the visible events stay visually aligned. - **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected week. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Resource-specific planning** Viewing one person's schedule at a time without leaving the scheduler view. - **Team calendars with simple filtering** Switching between a small set of people or resources from a compact header control. - **Color-coded resource views** Making it easy to distinguish which events belong to which resource. - **Operational dashboards** Internal scheduling tools where users need quick filtering. - **Custom scheduler toolbars** Cases where the standard header needs extra controls without moving filtering outside the scheduler. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`headerTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-headerTemplate) - template - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option ## Code ### Component ```ts 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({ theme: 'ios', themeVariant: 'light' }); @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('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); }); } } ``` ### Template ```html
{{res.name}}
``` ### CSS ```css .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; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'week' } }`. Set `clickToCreate: false`, `dragToCreate: false`, `dragToMove: true`, `dragToResize: true`. No `resources` array is passed to the calendar - the people are used only for client-side event filtering, not as resource rows. - Define 3 people at module level: Barry (id `1`, color `#328e39`, avatar `m1.png`), Hortense (id `2`, color `#00aabb`, avatar `f1.png`), Carl (id `3`, color `#ea72c0`, avatar `m2.png`). - Load events from `https://trial.mobiscroll.com/custom-events/` via JSONP. Each event has a `participant` field (integer id matching a person). After loading, assign `event.color` from the matching person's color. Initial selection is person `1` only - pass only the matching events as `data` (or call `inst.setEvents(filteredEvents)` for the imperative API). - Track `selectedResources` (the set of active participant ids). On every filter change, recompute: `myEvents.filter(e => selectedResources includes e.participant)` and update `data` (imperative: `inst.setEvents(filteredEvents)`). Show a toast: "Showing [Name] events" or "Hiding [Name] events". - **Custom header** (`renderHeader` / Angular: `headerTemplate` / Vue: `#header` slot): place `CalendarNav` (class `mds-header-filter-nav`) on the left, then a flex div (`mds-header-filter mbsc-flex-1-0`) containing a multi-select `SegmentedGroup` with one `Segmented` per person - each shows the person's avatar and name, and carries `cssClass: 'mds-header-filter-{id}'` for per-person highlight color. Then `CalendarPrev`, `CalendarToday`, `CalendarNext` on the right. - Each person's active segment is highlighted in their color via `mds-header-filter-{id}` CSS targeting `.mbsc-segmented-selectbox-inner` (iOS) and `.mbsc-button.mbsc-selected.mbsc-material` / `.mbsc-windows` (other themes). ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-angular.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config angular ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` ng serve ``` On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation ## Related demos - Previous: [CSS Classes for Cell Colors and Blocked Times](https://demo.mobiscroll.com/angular/scheduler/colors-invalids-css-class.md) - Apply custom CSS classes to color-code Angular Scheduler cells and style blocked times - add patterns or backgrounds for days or periods. - Next: [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/angular/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the Angular Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.