Features

  • Angular 2 Scheduler from DayPilot Pro for JavaScript with support for row filtering
  • Real-time filtering by row name
  • Allows hiding rows with no events
  • Includes trial version of DayPilot Pro for JavaScript
  • Uses Angular CLI 1.0.0-beta.25.5

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

See also a similar tutorial on 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. Buy a license.

Live Demo

You can test this project in a live demo:

Filtering Scheduler Rows by Name

Full Scheduler with all rows:

angular-2-scheduler-row-filtering-full.png

Filtered rows:

angular-2-scheduler-row-filtering-name.png

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 wheter it should be visible or not)

Filter input UI:

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

Filter update:

export class SchedulerComponent implements AfterViewInit {

  @ViewChild("scheduler") scheduler: DayPilot.Angular.Scheduler;

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

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

  applyFilter() {
    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} 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: DayPilot.Angular.Scheduler;

  events: any[] = [];

  filter = {
    text: ""
  };

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


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

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

}

Filtering by Events

angular-2-scheduler-row-filtering-with-events.png

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().isEmpty()) {
    args.visible = false;
  }
}

scheduler.component.ts

import {Component, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
import {DayPilot} 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: DayPilot.Angular.Scheduler;

  events: any[] = [];

  filter = {
    eventsOnly: false
  };

  config: any = {
    // ...
    onRowFilter: args => {
      if (args.filter.eventsOnly && args.row.events.all().isEmpty()) {
        args.visible = false;
      }
    }
  };

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

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

}

Clearing the Filter

angular-2-scheduler-row-filter-clear.png

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() {
    this.scheduler.control.rows.filter(this.filter);
  }

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

}