Event Filtering

The JavaScript Scheduler component supports fast client-side filtering. It lets you hide events that don’t match the specified criteria.

You can use it to implement following features:

• Fast search (show only events that contain the specified text)

• Show/hide events of a certain type

How to implement event filter

1. To apply the filter, call events.filter() with a non-null value. It can be a dynamic value (a text from a “search” input field), a complex object (with multiple filter criteria) or a fixed value (e.g. "hideTentativeEvents").

2. The Scheduler uses the onBeforeEventFilter event handler to determine which events match the filter. You need to provide the implementation, based on your rules.

By default, all events are visible - you need to set args.visible = false for events that don't match the filter. The original event data object (including custom fields) is accessible as args.e.data.

onEventFilter: (args) => {
  if (args.filter === "hideTentativeEvents" && args.e.data.type === "tentative") {
    args.visible = false;
  }
}

To apply the filter, call events.filter():

dp.events.filter("hideTentativeEvents");

This example assumes the event object has a type property:

{
  id: 1,
  start: "2024-10-01T00:00:00",
  end: "2024-10-05T00:00:00",
  text: "Meeting",
  resource: "A",
  type: "tentative"
}

3. To clear the filter, call event.filter() without any parameter:

dp.events.filter();

See also

• DayPilot.Scheduler.events.filter()

• DayPilot.Scheduler.onEventFilter

Examples

Text filter

The code includes a text input field and a clear button for user input. When a user types into the filter input field, an event listener attached to the keyup event initiates the filtering process. This filtering process is implemented by the onEventFilter event of the DayPilot.Scheduler object. It compares the entered filter text (ignoring case) with the text of each Scheduler event. If an event doesn't contain the entered text, it is hidden from view.

When the clear button is clicked, it clears the content of the filter input field and resets the filter, making all Scheduler events visible again. This is done by calling dp.events.filter(null).

<div class="space">
  Filter: <input id="filter" /> <a href="#" id="clear">Clear</a>
</div>

<div id="dp"></div>

<script>

  const dp = new DayPilot.Scheduler("dp", {
    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;
      }
    }
  });
  dp.init();


  const app = {
    elements: {
      filter: document.querySelector("#filter"),
      clear: document.querySelector("#clear")
    },
    init() {
      app.elements.filter.addEventListener("keyup", () => {
        const query = app.elements.filter.value;
        dp.events.filter(query);
      });
      app.elements.clear.addEventListener("click", (ev) => {
        ev.preventDefault();
        app.elements.filter.value = "";
        dp.events.filter(null);
      }
    }
  };
  app.init();

</script>

Text filter + display overlapping events

This filter implementation displays events that contain the searched text and any events that overlap with them.

onEventFilter: (args) => {
  const events = dp.events.forRange(args.e.start(), args.e.end()).filter(e => e.resource() === args.e.resource());

  const textFound = events.some((e) => {
      return e.text.toUpperCase().indexOf(args.filter.toUpperCase()) > -1;
  });

  if (!textFound) {
      args.visible = false;
  }
}

Live Demo

• Scheduler Event Filtering Demo [javascript.daypilot.org]

Angular Scheduler

This tutorial implements a complex filter (text, category, duration) in Angular:

• Angular Scheduler: Event Filtering

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

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

DayPilotScheduler1.DataSource = LoadData(filterText, filterType);
DayPilotScheduler1.DataBind();
DayPilotScheduler1.Update();

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

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

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