Agent-readable demo data

Title
Column Filtering (JavaScript Resource Calendar) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Columns are filtered by name in real time. The filter is only applied to the bottom level columns. Read more about column filtering.

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            onColumnFilter: args => {
                if (args.column.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
                    args.visible = false;
                }
            },
            startDate: DayPilot.Date.today(),
            viewType: "Resources",
            headerLevels: 2,
            columns: [
                {
                    name: "Big Cars", children: [
                        {name: "Big Car #1", id: "big1"},
                        {name: "Big Car #2", id: "big2"},
                        {name: "Big Car #3", id: "big3"}
                    ]
                },
                {
                    name: "Small Cars", children: [
                        {name: "Small Car #1", id: "small1"},
                        {name: "Small Car #2", id: "small2"},
                        {name: "Small Car #3", id: "small3"}
                    ]
                }
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: "Event"
                });
                dp.clearSelection();
                dp.message("Created");
            },
            headerHeightAutoFit: true,
            showCurrentTime: false
        });
        dp.init();

        const app = {
            elements: {
                filter: document.querySelector("#filter"),
                clear: document.querySelector("#clear"),
            },
            init() {
                this.addEventHandlers();
                this.loadEventData();
            },
            addEventHandlers() {
                app.elements.filter.addEventListener("keyup", function() {
                    const query = this.value;
                    dp.columns.filter(query); // see dp.onColumnFilter below
                });

                app.elements.clear.addEventListener("click", function(ev) {
                    ev.preventDefault();
                    app.elements.filter.value = "";
                    dp.columns.filter(null);
                });
            },
            loadEventData() {
                const events = [
                    {
                        start: DayPilot.Date.today().firstDayOfWeek().addHours(12),
                        end: DayPilot.Date.today().firstDayOfWeek().addHours(15),
                        id: DayPilot.guid(),
                        resource: "big1",
                        text: "Special event"
                    }
                ];
                dp.update({events});
            }
        };
        app.init();