Angular Scheduler: Row Filtering

Features

• Angular Scheduler component with support for row filtering from DayPilot Pro for JavaScript

• Real-time filtering by row name

• Allows hiding rows with no events

• Uses Angular 12

For an introduction to using Angular Scheduler, please see the following tutorial:

• Angular Scheduler Tutorial (TypeScript + PHP/MySQL)

See also a similar tutorial on event filtering:

• Angular Scheduler: Event Filtering

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Live Demo

You can test this project in a live demo:

• Angular Scheduler Row Filtering Demo

Filtering Scheduler Rows by Name

Full Scheduler with all rows:

Filtered rows:

The row filter implementation has three parts:

• The filter UI (<input> element for the filter text)

• rows.filter() method that is invoked on every filter UI change - it passes the filter parameters to the Scheduler and requests an update

• onRowFilter event handler which resolves the filter parameters for every row (to determine whether it should be visible or not)

Filter input UI:

<input type="text" [ngModel]="filter.text" (ngModelChange)="changeText($event)" />

Filter update logic:

export class SchedulerComponent implements AfterViewInit {

  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;

  filter = {
    text: ""
  };
  
  // ...

  changeText(text: string): void {
    this.filter.text = text;
    this.applyFilter();
  }

  applyFilter(): void {
    this.scheduler.control.rows.filter(this.filter);
  }

}

Row filter event handler:

config: any = {
  // ...
  onRowFilter: args => {
    if (args.row.name.toLowerCase().indexOf(args.filter.text.toLowerCase()) < 0) {
      args.visible = false;
    }
  }
};

By default all rows are visible (args.visible is set to false). The onRowFilter event handler checks the filter condition sent from the rows.filter() method (it's available as args.filter in the event handler). If the row doesn't meet the filter condition it's marked as not visible (args.visible = false).

Note that the parent row will always be displayed (even if marked with args.visible = false).

Full row name filter implementation (scheduler.component.ts):

import {Component, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";

@Component({
  selector: 'scheduler-component',
  template: `
  <div class="space">
    Filter: <input type="text" [ngModel]="filter.text" (ngModelChange)="changeText($event)" />
    ...
  </div>
  <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;

  events: any[] = [];

  filter = {
    text: ""
  };

  config: DayPilot.SchedulerConfig = {
    // ...
    onRowFilter: args => {
      if (args.row.name.toLowerCase().indexOf(args.filter.text.toLowerCase()) < 0) {
        args.visible = false;
      }
    }
  };


  changeText(text: string): void {
    this.filter.text = text;
    this.applyFilter();
  }

  applyFilter(): void {
    this.scheduler.control.rows.filter(this.filter);
  }

}

Filtering by Events

The same approach is used for filtering the rows depending on their content. The onRowFilter event handler checks if there are any events in the row using args.row.events.all():

onRowFilter: args => {
  if (args.filter.eventsOnly && args.row.events.all().length === 0) {
    args.visible = false;
  }
}

scheduler.component.ts

import {Component, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";

@Component({
  selector: 'scheduler-component',
  template: `
  <div class="space">
    ... 
    <label for="eventsonly"><input type="checkbox" id="eventsonly" [ngModel]="filter.eventsOnly" (ngModelChange)="changeWithEvents($event)"> Only rows with events</label>
    ...
  </div>
  <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;

  events: any[] = [];

  filter = {
    eventsOnly: false
  };

  config: DayPilot.SchedulerConfig = {
    // ...
    onRowFilter: args => {
      if (args.filter.eventsOnly && args.row.events.all().length === 0) {
        args.visible = false;
      }
    }
  };

  changeWithEvents(val: string): void {
    this.filter.eventsOnly = val;
    this.applyFilter();
  }

  applyFilter(): void {
    this.scheduler.control.rows.filter(this.filter);
  }

}

Clearing the Filter

In order to clear the filter, we simply reset the filter object and apply the filter:

export class SchedulerComponent implements AfterViewInit {

  filter = {
    text: "",
    eventsOnly: false
  };
  
  // ...

  applyFilter(): void {
    this.scheduler.control.rows.filter(this.filter);
  }

  clearFilter(): boolean {
    this.filter.text = "";
    this.filter.eventsOnly = false;
    this.applyFilter();
    return false;
  }

}