Agent-readable demo data

Title

Row Filtering (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox

Tree

DayPilot JavaScript Sandbox

Catalog root

Default

Description

You can filter the Scheduler rows using specified criteria in real time. This demo filters rows using the resource name. Read more about row filtering.

• Canonical HTML: /sandbox/scheduler/rowfiltering.html
• Markdown companion: /sandbox/scheduler/rowfiltering.md
• Folder: /sandbox/scheduler/
• Root: /sandbox/
• Catalog: /sandbox/llms.txt

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            rowFilterParentsAlwaysVisible: true,
            onRowFilter: (args) => {
                const query = args.filterParam.query;
                const hideEmpty = args.filterParam.hideEmpty;

                if (args.row.name.toUpperCase().indexOf(query.toUpperCase()) === -1) {
                    args.visible = false;
                } else if (hideEmpty && args.row.events.isEmpty()) {
                    args.visible = false;
                }

            },
            startDate: "2026-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            treeEnabled: true,
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            resources: [
                {
                    name: "Top 1",
                    id: "top1",
                    frozen: "top"
                },
                {
                    name: "Top 2",
                    id: "top2",
                    frozen: "top"
                },
                {
                    name: "Bottom 1",
                    id: "bottom1",
                    frozen: "bottom"
                },
                {
                    name: "Bottom 2",
                    id: "bottom2",
                    frozen: "bottom"
                },
                {
                    name: "Group 1", id: "G1", expanded: true, children: [
                        {name: "Resource 1", id: "R1"},
                        {name: "Resource 2", id: "R2"},
                    ]
                },
                {
                    name: "Group 2", id: "G2", expanded: true, children: [
                        {name: "Resource 3", id: "R3"},
                        {name: "Resource 4", id: "R4"},
                    ]
                },
            ],
            events: [
                {
                    start: "2026-01-05T00:00:00",
                    end: "2026-01-10T00:00:00",
                    id: DayPilot.guid(),
                    resource: "R1",
                    text: "Event 1"
                }
            ],
            height: 300
        });
        dp.init();

        const app = {
            elements: {
                filter: document.querySelector("#filter"),
                hideEmpty: document.querySelector("#hideEmpty"),
                clear: document.querySelector("#clear")
            },
            filter() {
                // see dp.onRowFilter above
                dp.rows.filter({
                    query: app.elements.filter.value,
                    hideEmpty: app.elements.hideEmpty.checked
                });
            },
            init() {
                app.elements.filter.addEventListener("keyup", function() {
                    app.filter();
                });

                app.elements.hideEmpty.addEventListener("change", function() {
                    app.filter();
                });

                app.elements.clear.addEventListener("click", function(ev) {
                    ev.preventDefault();
                    app.elements.filter.value = "";
                    app.filter();
                });
            }
        };

        app.init();