---
title: "Angular Event calendar Resource Filter in Header Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/eventcalendar/resource-filtering-in-header"
---
# Resource Filter in Header - Angular Event calendar demo
Filter events by resource in the Angular event calendar using a segmented control in the header — switch people or resources without a filter panel.
- [Live demo](https://demo.mobiscroll.com/angular/eventcalendar/resource-filtering-in-header)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/calendar-view/resource-filtering-in-header)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/resource-filtering-in-header.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/resource-filtering-in-header.md), [React](https://demo.mobiscroll.com/react/eventcalendar/resource-filtering-in-header.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/resource-filtering-in-header.md)
## Description
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** - ``. 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.:
```
.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/eventcalendar/customizing-header)
## What this demo shows
- A desktop month view event calendar with resource-based event filtering shown in the custom header.
- **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 month 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.
- **Event labels** Days with events display event labels directly in the month cells, with label colors reflecting the associated resource.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Event interaction** Hovering over or selecting an event label highlights it and shows resize handles on both sides, indicating that the event can be resized by clicking and dragging.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Gesture navigation** The month view can also be changed by clicking and dragging the calendar left or right.
## Best for
- **Resource-specific month planning** Viewing one person's month schedule at a time without leaving the calendar 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 and fast month-to-month navigation.
- **Custom calendar toolbars** Cases where the standard header needs extra controls without moving filtering outside the calendar.
## 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
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - 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
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`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 = { calendar: { labels: true } };
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.resource as number) !== -1);
this.notify.toast({
message: (target.checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events',
});
}
ngOnInit(): void {
this.http.jsonp('https://trial.mobiscroll.com/filter-resource-events/', 'callback').subscribe((resp) => {
this.myEvents = resp;
this.filteredEvents = this.myEvents.filter((e) => this.selectedResources.indexOf(+e.resource!) !== -1);
});
}
}
```
### Template
```html
```
### 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
- Set `view: { calendar: { labels: true } }`. Enable `dragToMove: true` and `dragToResize: true` to allow moving and resizing events.
- Define a `resources` array where each entry has `id`, `name`, `color`, and `img` fields. Pass the array to the calendar via the `resources` option.
- Build the custom header with a `SegmentedGroup` set to `select="multiple"`. Render one `Segmented` per resource, each containing the resource's avatar image and name. Initialize the selected state to the first resource's id. Use `renderHeader` to inject the custom header (Angular: `headerTemplate`; Vue: use the `header` slot). Arrange the header elements as: navigation nav → segmented filter block → prev button → today button → next button.
- On `SegmentedGroup` change, filter the full events array to only those whose `resource` property matches a selected id, update the calendar's `data`, and show a `Toast` with `'Showing [name] events'` or `'Hiding [name] events'`. JS/jQuery: call `calendar.setEvents(filteredEvents)` instead of updating reactive data. Angular: use the `Notifications` service to show the toast.
- Load events from a remote endpoint using `getJson` and initialize the calendar with the subset filtered to the initially selected resource. JS/jQuery: call `calendar.setEvents(filteredEvents)` in the callback.
## 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