Column Filtering

In the resource calendar mode, you can use a filter to hide selected columns.

JavaScript

Filter Definition

You can define your own filter rule using onColumnFilter event handler:

<script type="text/javascript">

    var dp = new DayPilot.Calendar("dp");

    dp.onColumnFilter = function(args) {
        if (args.column.name.toUpperCase().indexOf(args.filter.toUpperCase()) === -1) {
            args.visible = false;
        }
    };

    dp.viewType = "Resources";
    dp.headerLevels = 2;
    dp.columns.list = [
        { 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"}
        ]}
    ];

    // ...
    
    dp.init();

</script>

Applying the Filter

Apply the filter using columns.filter() method:

var query = "big";
dp.columns.filter(query);

Clearing the Filter

You can clear the filter by calling columns.filter() without a parameter:

dp.columns.filter();

Demo

Column Filtering Demo

Tutorial

JavaScript Resource Calendar: Column Filtering