Event Filtering

JavaScript Calendar

The JavaScript Calendar component supports client-side event filtering.

• Use the onEventFilter event handler to implement the filtering rule.

• Use the events.filter() method to filter the events using the supplied parameter.

<div class="space">
  <label for="filter">Filter:</label>
  <input id="filter" aria-label="Filter events" /> 
  <button id="clear">Clear</button>
</div>

<div id="calendar"></div>

<script>

  const calendar = new DayPilot.Calendar("calendar", {
    onEventFilter: (args) => {
      // display only events that contain the specified text, case insensitive
      if (args.e.text().toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
        args.visible = false;
      }
    },
    // ...
  });
  calendar.init();
  
  const app = {
    elements: {
      filter: document.querySelector("#filter"),
      clear: document.querySelector("#clear")
    },
    addEventHandlers() {
      app.elements.filter.addEventListener("keyup", () => {
        const query = app.elements.filter.value;
        calendar.events.filter(query);
      });
      app.elements.clear.addEventListener("click", (ev) => {
        ev.preventDefault();
        app.elements.filter.value = "";
        calendar.events.filter(null);
      });
    }
  };
  app.addEventHandlers();

</script>

Demo

• Calendar Event Filtering Demo

Angular Calendar

The following example shows how to configure the event filtering feature in the Angular Calendar component.

See also the Angular Calendar: Event Filtering tutorial for a downloadable Angular project.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { DayPilot, DayPilotModule, DayPilotCalendarComponent } from "daypilot-pro-angular";
import { FormsModule } from "@angular/forms";

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [DayPilotModule, FormsModule],
  template: `
    <div class="toolbar">
      <label for="filter">Filter:</label>
      <input id="filter" [(ngModel)]="filterText" (input)="applyFilter()" placeholder="Type to filter events" />
      <button (click)="clearFilter()">Clear</button>
    </div>
    <daypilot-calendar [config]="config" [events]="events" #calendar></daypilot-calendar>
  `,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  @ViewChild("calendar")
  calendar!: DayPilotCalendarComponent;

  filterText: string = "";
  events: DayPilot.EventData[] = [];

  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    onEventFilter: (args) => {
      const filter = args.filter.text || "";
      if (filter === "") {
        args.visible = true;
        return;
      }
      const eventText = args.e.text() || "";
      args.visible = eventText.toUpperCase().includes(filter.toUpperCase());
    },
    // Additional configurations can be added here
  };

  constructor() { }

  ngAfterViewInit(): void {
    // Initialize with some sample events
    this.events = [
      {
        id: "1",
        text: "Meeting with Team",
        start: DayPilot.Date.today().addDays(0).toString(),
        end: DayPilot.Date.today().addDays(0).addHours(1).toString(),
        resource: "Room A"
      },
      // ...
    ];
  }

  applyFilter(): void {
    const filterParams = {
      text: this.filterText
    };
    this.calendar.control.events.filter(filterParams);
  }

  clearFilter(): void {
    this.filterText = "";
    this.calendar.control.events.filter(null);
  }
}

dpc.clientState.filterText = 'text';
dpc.clientState.filterType = 'finished';

string filterText = (string) DayPilotCalendar1.ClientState["filterText"];
string filterType = (string) DayPilotCalendar1.ClientState["filterType"];
DayPilotCalendar1.DataSource = LoadData(filterText, filterType);
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();

dpc.clientState.filterText = 'text';
dpc.clientState.filterType = 'finished';

string filterText = (string) ClientState["filterText"];
string filterType = (string) ClientState["filterType"];

Events = LoadEvents(filterText, filterType);
Update();