DayPilot.Month.events.filter

The events.filter() method applies custom criteria to events loaded in the JavaScript Monthly Calendar. The onEventFilter handler decides which events match.

This method redraws the Month immediately. It does not remove items from events.list, load a different event collection or return a filtered array. Use null to clear the filter.

Available in DayPilot Pro for JavaScript, including Angular, React and Vue. TypeScript declarations are available from 2026.4.7158; JavaScript filtering was already supported in earlier versions.

Declaration

DayPilot.Month.events.filter(param): void

Parameters

• param (any): criteria passed to onEventFilter as args.filter. A string or object can be used; its meaning is defined by your handler. Use null to clear the filter.

Return Value

No return value.

Behavior

Call this method on an initialized Month control. The criteria remain active for subsequent redraws, including event updates, until replaced or cleared. No filtering predicate is built in: configure onEventFilter to set args.visible.

An empty string also makes the filter inactive. Clearing stops filter-handler calls and restores normal event visibility, subject to other visibility settings and the displayed date range.

Examples

The examples call the text-matching handler shown in onEventFilter. Keep that handler, event data and other options in the existing Month component. The buttons apply the filter after the child component has initialized.

JavaScript

// Apply criteria to an initialized Month with onEventFilter configured.
month.events.filter("plan");

// Restore normal event visibility.
month.events.filter(null);

Angular

<button type="button" (click)="applyFilter()">Find planning events</button>
<button type="button" (click)="clearFilter()">Clear</button>
<daypilot-month #month [config]="config"></daypilot-month>

import {ViewChild} from "@angular/core";
import {DayPilotMonthComponent} from "daypilot-pro-angular";

@ViewChild("month") month!: DayPilotMonthComponent;

applyFilter() {
  this.month.control.events.filter("plan");
}

clearFilter() {
  this.month.control.events.filter(null);
}

React

import {useState} from "react";
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

const [month, setMonth] = useState<DayPilot.Month | null>(null);

const applyFilter = () => {
  month?.events.filter("plan");
};

const clearFilter = () => {
  month?.events.filter(null);
};

<>
  <button type="button" onClick={applyFilter}>Find planning events</button>
  <button type="button" onClick={clearFilter}>Clear</button>
  <DayPilotMonth controlRef={setMonth} onEventFilter={onEventFilter} />
</>

Vue

<script setup lang="ts">
import {ref} from "vue";
import {DayPilot, DayPilotMonth} from "daypilot-pro-vue";

const month = ref<InstanceType<typeof DayPilotMonth> | null>(null);

const onEventFilter = (args: DayPilot.MonthEventFilterArgs) => {
  const query = String(args.filter).trim().toLowerCase();
  args.visible = args.e.text().toLowerCase().includes(query);
};

const applyFilter = () => {
  month.value?.control.events.filter("plan");
};

const clearFilter = () => {
  month.value?.control.events.filter(null);
};
</script>

<template>
  <button type="button" @click="applyFilter">Find planning events</button>
  <button type="button" @click="clearFilter">Clear</button>
  <DayPilotMonth ref="month" :onEventFilter="onEventFilter" />
</template>

See Also

• DayPilot.Month.onEventFilter
• Month Event Filtering
• DayPilot.Month.events.list
• DayPilot.Month Class