Resource Search and Filtering
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Resource Search and Filtering
When dealing with numerous resources, filtering and search are essential tools. Using the resourceHeaderTemplate option you can customize the resource header and fit a search input and filter button. Having full control over what you render in the resource header, you can implement live search and filering with a flyout, allowing users to quickly locate specific resources based on selected filters.
To handle cases where no search results are found, use the resourceEmptyTemplate option to craft a custom placeholder with specific call-to-action buttons eg. clearing all search terms and resetting filters. The placeholder appears when an empty resource array is passed to the calendar.
Demo
Loading the live demo
The live demo didn't load.
Try it on demo.mobiscroll.comOperational Status
Job sites
Code
import { CommonModule } from '@angular/common';
import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscModule,
MbscPopup,
MbscPopupButton,
MbscPopupOptions,
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 {
constructor(private notify: Notifications) {
this.myResources.forEach((site) => {
this.myFilters.push({ id: site.id as string, name: site.name as string, value: true });
});
this.filters = this.myFilters.reduce<Record<string, boolean>>((map, filter) => {
map[filter.id] = true;
return map;
}, {});
}
myEvents: MbscCalendarEvent[] = [
{
start: '2026-10-25T05:00',
end: '2026-10-25T19:00',
title: 'Excavate Foundation',
resource: 'bulldozer - TX1234',
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T18:00',
title: 'Install Framing',
resource: 'crane - NY9101',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T20:00',
title: 'Electrical Wiring',
resource: 'excavator - FL1213',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T22:00',
title: 'Roofing',
resource: 'crane - IL1617',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T19:00',
title: 'Site Cleanup',
resource: 'bulldozer - PA1819',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T18:00',
title: 'Foundation Work',
resource: 'concrete mixer - CA2223',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T22:00',
title: 'Steel Framing',
resource: 'crane - NY2425',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T16:00',
title: 'Interior Plumbing',
resource: 'excavator - FL2627',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T16:00',
title: 'Masonry Work',
resource: 'crane - IL3031',
},
{
start: '2026-10-25T06:00',
end: '2026-10-25T15:00',
title: 'Exterior Work',
resource: 'bulldozer - PA3233',
},
{
start: '2026-10-25T06:00',
end: '2026-10-25T15:00',
title: 'Ground Breaking',
resource: 'bulldozer - TX3435',
},
{
start: '2026-10-25T09:00',
end: '2026-10-25T21:00',
title: 'Wall Construction',
resource: 'crane - NY3839',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T16:00',
title: 'Roof Installation',
resource: 'excavator - FL4041',
},
{
start: '2026-10-25T06:00',
end: '2026-10-25T19:00',
title: 'Painting',
resource: 'crane - IL4445',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T20:00',
title: 'Driveway Paving',
resource: 'bulldozer - PA4647',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T18:00',
title: 'Foundation',
resource: 'concrete mixer - CA5051',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T19:00',
title: 'Demolition',
resource: 'crane - NY5253',
},
{
start: '2026-10-25T06:00',
end: '2026-10-25T16:00',
title: 'Electrical Wiring',
resource: 'excavator - FL5455',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T17:00',
title: 'Roofing',
resource: 'crane - IL5859',
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T18:00',
title: 'Finishing Touches',
resource: 'bulldozer - PA6061',
},
{
start: '2026-10-25T12:00',
end: '2026-10-25T22:00',
title: 'Site Preparation',
resource: 'bulldozer - TX6263',
},
{
start: '2026-10-25T08:00',
end: '2026-10-25T19:00',
title: 'Piling Work',
resource: 'crane - NY6667',
},
{
start: '2026-10-25T07:00',
end: '2026-10-25T18:00',
title: 'Concrete Pouring',
resource: 'excavator - FL6869',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T21:00',
title: 'Deck Construction',
resource: 'drill - OH7071',
},
{
start: '2026-10-25T05:00',
end: '2026-10-25T20:00',
title: 'Final Touches',
resource: 'bulldozer - PA7475',
}, // Showing partial data. Download full source.
];
myResources: MbscResource[] = [
{
id: 'site1',
name: '123 Main St, Downtown City',
eventCreation: false,
children: [
{
id: 'bulldozer - TX1234',
name: 'Bulldozer - TX1234',
color: '#1dab2f',
status: 'on site',
},
{
id: 'concrete mixer - CA5678',
name: 'Concrete Mixer - CA5678',
color: '#1dab2f',
status: 'in maintenance',
},
{
id: 'crane - NY9101',
name: 'Crane - NY9101',
color: '#1dab2f',
status: 'on site',
},
{
id: 'excavator - FL1213',
name: 'Excavator - FL1213',
color: '#1dab2f',
status: 'on site',
},
{
id: 'drill - OH1415',
name: 'Drill - OH1415',
color: '#1dab2f',
status: 'in maintenance',
},
{
id: 'crane - IL1617',
name: 'Crane - IL1617',
color: '#1dab2f',
status: 'on site',
},
{
id: 'bulldozer - PA1819',
name: 'Bulldozer - PA1819',
color: '#1dab2f',
status: 'on site',
},
],
},
{
id: 'site2',
name: '456 Elm St, Uptown City',
eventCreation: false,
children: [
{
id: 'bulldozer - TX2021',
name: 'Bulldozer - TX2021',
color: '#4981d6',
status: 'in maintenance',
},
{
id: 'concrete mixer - CA2223',
name: 'Concrete Mixer - CA2223',
color: '#4981d6',
status: 'on site',
},
{
id: 'crane - NY2425',
name: 'Crane - NY2425',
color: '#4981d6',
status: 'on site',
},
{
id: 'excavator - FL2627',
name: 'Excavator - FL2627',
color: '#4981d6',
status: 'on site',
},
{
id: 'drill - OH2829',
name: 'Drill - OH2829',
color: '#4981d6',
status: 'in maintenance',
},
{
id: 'crane - IL3031',
name: 'Crane - IL3031',
color: '#4981d6',
status: 'on site',
},
{
id: 'bulldozer - PA3233',
name: 'Bulldozer - PA3233',
color: '#4981d6',
status: 'on site',
},
],
},
{
id: 'site3',
name: '789 Maple Ave, Suburban Area',
eventCreation: false,
children: [
{
id: 'bulldozer - TX3435',
name: 'Bulldozer - TX3435',
color: '#f7961e',
status: 'on site',
},
{
id: 'concrete mixer - CA3637',
name: 'Concrete Mixer - CA3637',
color: '#f7961e',
status: 'in maintenance',
},
{
id: 'crane - NY3839',
name: 'Crane - NY3839',
color: '#f7961e',
status: 'on site',
},
{
id: 'excavator - FL4041',
name: 'Excavator - FL4041',
color: '#f7961e',
status: 'on site',
},
{
id: 'crane - IL4445',
name: 'Crane - IL4445',
color: '#f7961e',
status: 'on site',
},
{
id: 'bulldozer - PA4647',
name: 'Bulldozer - PA4647',
color: '#f7961e',
status: 'on site',
},
],
},
{
id: 'site4',
name: '101 Industrial Blvd, Industrial City',
eventCreation: false,
children: [
{
id: 'bulldozer - TX4849',
name: 'Bulldozer - TX4849',
color: '#e25dd2',
status: 'in maintenance',
},
{
id: 'concrete mixer - CA5051',
name: 'Concrete Mixer - CA5051',
color: '#e25dd2',
status: 'on site',
},
{
id: 'crane - NY5253',
name: 'Crane - NY5253',
color: '#e25dd2',
status: 'on site',
},
{
id: 'excavator - FL5455',
name: 'Excavator - FL5455',
color: '#e25dd2',
status: 'on site',
},
{
id: 'drill - OH5657',
name: 'Drill - OH5657',
color: '#e25dd2',
status: 'in maintenance',
},
{
id: 'crane - IL5859',
name: 'Crane - IL5859',
color: '#e25dd2',
status: 'on site',
},
{
id: 'bulldozer - PA6061',
name: 'Bulldozer - PA6061',
color: '#e25dd2',
status: 'on site',
},
],
},
{
id: 'site5',
name: '202 River Rd, Riverside City',
eventCreation: false,
children: [
{
id: 'bulldozer - TX6263',
name: 'Bulldozer - TX6263',
color: '#34c8e0',
status: 'on site',
},
{
id: 'concrete mixer - CA6465',
name: 'Concrete Mixer - CA6465',
color: '#34c8e0',
status: 'in maintenance',
},
{
id: 'crane - NY6667',
name: 'Crane - NY6667',
color: '#34c8e0',
status: 'on site',
},
{
id: 'excavator - FL6869',
name: 'Excavator - FL6869',
color: '#34c8e0',
status: 'on site',
},
{
id: 'drill - OH7071',
name: 'Drill - OH7071',
color: '#34c8e0',
status: 'on site',
},
{
id: 'crane - IL7273',
name: 'Crane - IL7273',
color: '#34c8e0',
status: 'in maintenance',
},
{
id: 'bulldozer - PA7475',
name: 'Bulldozer - PA7475',
color: '#34c8e0',
status: 'on site',
},
],
},
];
myFilters: { id: string; name: string; value: boolean }[] = [
{ id: 'on site', name: 'On site', value: true },
{ id: 'in maintenance', name: 'In maintenance', value: true },
];
@ViewChild('popup', { static: false })
popup!: MbscPopup;
@ViewChild('filterButton') anchorElm!: ElementRef;
popupAnchor!: HTMLButtonElement;
filteredResources: MbscResource[] = this.myResources;
searchQuery = '';
filters: Record<string, boolean> = {};
tempFilters: Record<string, boolean> = {};
searchTimeout: ReturnType<typeof setTimeout> | undefined;
filterResources(currentFilters: Record<string, boolean>, currentQuery: string) {
this.filteredResources = this.myResources
.map((site) => ({
id: site.id,
name: site.name,
eventCreation: site.eventCreation,
children: (site.children ?? []).filter(
(resource) =>
currentFilters[resource['status']] &&
(!currentQuery || (resource.name && resource.name.toLowerCase().includes(currentQuery.toLowerCase()))),
),
}))
.filter((site) => site.children.length > 0 && currentFilters[site.id]);
}
openFilters() {
this.popupAnchor = this.anchorElm.nativeElement;
this.tempFilters = { ...this.filters };
this.popup.open();
this.filterResources(this.tempFilters, this.searchQuery);
}
applyFilters() {
this.filters = { ...this.tempFilters };
this.filterResources(this.tempFilters, this.searchQuery);
this.popup.close();
this.notify.toast({
message: 'Filters applied',
});
}
resetFilters() {
const updatedFilters = this.myFilters.reduce<Record<string, boolean>>((map, filter) => {
map[filter.id] = true;
return map;
}, {});
this.searchQuery = '';
this.filters = { ...updatedFilters };
this.filterResources(updatedFilters, '');
this.notify.toast({
message: 'Filters cleared',
});
}
handleSearch() {
clearTimeout(this.searchTimeout);
this.searchTimeout = setTimeout(() => {
this.filterResources(this.filters, this.searchQuery);
}, 300);
}
handleCheckboxChange(key: string) {
this.tempFilters[key] = !this.tempFilters[key];
this.tempFilters = { ...this.tempFilters };
}
calendarOptions: MbscEventcalendarOptions = {
cssClass: 'mds-resource-filtering-calendar',
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
view: {
timeline: {
type: 'week',
startTime: '05:00',
endTime: '22:00',
startDay: 1,
endDay: 5,
timeCellStep: 60,
timeLabelStep: 60,
weekNumbers: true,
},
},
};
popupOptions: MbscPopupOptions = {
display: 'anchored',
contentPadding: false,
focusOnClose: false,
focusOnOpen: false,
showOverlay: false,
width: 400,
};
popupButtons: (MbscPopupButton | 'cancel')[] = [
'cancel',
{
handler: () => {
this.applyFilters();
},
keyCode: 'enter',
text: 'Apply',
cssClass: 'mbsc-popup-button-primary',
},
];
}
<mbsc-eventcalendar
[data]="myEvents"
[resources]="filteredResources"
[resourceTemplate]="customResourceTemplate"
[resourceHeaderTemplate]="customResourceHeaderTemplate"
[resourceEmptyTemplate]="customResourceEmptyTemplate"
[options]="calendarOptions"
>
</mbsc-eventcalendar>
<ng-template #customResourceHeaderTemplate>
<div class="mbsc-flex mbsc-align-items-center mbsc-font mds-resource-filtering-search">
<mbsc-input
type="text"
startIcon="material-search"
autocomplete="off"
class="mbsc-input"
inputStyle="outline"
placeholder="Search..."
[(ngModel)]="searchQuery"
(ngModelChange)="handleSearch()"
/>
<mbsc-button startIcon="material-filter-list" class="mbsc-flex-none" variant="outline" (click)="openFilters()" #filterButton>
Filter
</mbsc-button>
</div>
</ng-template>
<ng-template #customResourceTemplate let-resource>
<div>
<div class="mds-resource-filtering-name">{{ resource.name }}</div>
<div *ngIf="resource.status" class="mds-resource-filtering-status">
<span
class="mds-resource-filtering-status-dot"
[ngStyle]="{ backgroundColor: resource.status === 'on site' ? 'green' : 'orange' }"
></span>
{{ resource.status }}
</div>
</div>
</ng-template>
<ng-template #customResourceEmptyTemplate>
<div class="mds-resource-filtering-empty mbsc-flex mbsc-align-items-center">
<div class="mbsc-flex-1-1">
<img src="https://img.mobiscroll.com/demos/filter-no-result.png" alt="Empty list" style="width: 100px" />
<p class="mbsc-font mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">No resources match your search.</p>
<p class="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">Adjust your filters or try a different keyword.</p>
<mbsc-button variant="outline" (click)="resetFilters()">Reset Filters</mbsc-button>
</div>
</div>
</ng-template>
<mbsc-popup [options]="popupOptions" [anchor]="popupAnchor" [buttons]="popupButtons" #popup>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Operational Status</div>
<div *ngFor="let filter of myFilters.slice(0, 2)">
<mbsc-checkbox [label]="filter.name" [checked]="tempFilters[filter.id]" (change)="handleCheckboxChange(filter.id)" />
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Job sites</div>
<div *ngFor="let filter of myFilters.slice(2)">
<mbsc-checkbox [label]="filter.name" [checked]="tempFilters[filter.id]" (change)="handleCheckboxChange(filter.id)" />
</div>
</div>
</mbsc-popup>
.mds-resource-filtering-calendar .mbsc-timeline-resource-header {
height: 100%;
padding: 8px;
box-sizing: border-box;
}
.mds-resource-filtering-calendar .mbsc-timeline-resource-col {
width: 350px;
}
.mds-resource-filtering-calendar .mbsc-timeline-resource-title {
height: 100%;
box-sizing: border-box;
}
.mds-resource-filtering-calendar .mbsc-timeline-parent {
height: 34px;
}
.mds-resource-filtering-calendar .mbsc-timeline-row-gutter {
height: 6px;
}
.mds-resource-filtering-search {
height: 100%;
}
.mds-resource-filtering-search .mbsc-textfield-wrapper {
margin: 0;
}
.mds-resource-filtering-search .mbsc-textfield-wrapper.mbsc-ltr {
margin-right: 8px;
}
.mds-resource-filtering-search .mbsc-textfield-wrapper.mbsc-rtl {
margin-left: 8px;
}
.mds-resource-filtering-search .mbsc-textfield-wrapper.mbsc-material {
margin-top: 2px;
}
.mds-resource-filtering-search .mbsc-textfield {
height: 36px;
padding: 0 8px 0 38px;
}
.mds-resource-filtering-search .mbsc-textfield-icon {
top: 50%;
left: 8px;
font-size: 20px;
height: 24px;
line-height: 24px;
margin-top: -12px;
}
.mds-resource-filtering-search .mbsc-button {
margin: 0;
height: 36px;
font-size: 14px;
}
.mds-resource-filtering-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 7px;
}
.mds-resource-filtering-status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.mds-resource-filtering-status {
font-size: 13px;
font-weight: normal;
}
.mds-resource-filtering-empty {
height: 100%;
text-align: center;
}