Features

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Basic Scheduler Configuration

html5-scheduler-hiding-rows-basic-configuration.png

We will use a simple Scheduler configuration:

  • Displays a fixed month (April 2017)
  • Day scale (one grid cell = one day)
  • Time headers grouped by month and day
  • Static resources and sample events
<script src="daypilot-all.min.js"></script>

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

<script>
    var dp = new DayPilot.Scheduler("dp");
    dp.startDate = "2017-04-01";
    dp.days = 30;
    dp.scale = "Day";
    dp.timeHeaders = [
        {groupBy: "Month"},
        {groupBy: "Day", format: "d"}
    ];
    dp.resources = [
        {name: "Resource 1", id: 1},
        {name: "Resource 2", id: 2},
        {name: "Resource 3", id: 3},
        {name: "Resource 4", id: 4},
    ];
    dp.events.list = [
        {start: "2017-04-02", end: "2017-04-05", id: 1, text: "Event 1", resource: 1}
    ];
    dp.init();
</script>

Hiding Selected Scheduler Rows using a Filter

html5-scheduler-hiding-rows-javascript.png

You can filter the Scheduler rows using DayPilot.Scheduler.rows.filter() method. This method triggers onRowFilter event for every row to determine whether it should be visible or not.

First, we add a checkbox for the filtering option:

<input type="checkbox" id="hide"> Hide rows without events

And a simple jQuery handler that calls DayPilot.Scheduler.rows.filter():

$("#hide").click(function () {
    var hideEmptyRows = $(this).is(":checked");
    dp.rows.filter(hideEmptyRows);
});

It passes the checkbox value as a parameter to the rows.filter() method.

The filter() method invokes a Scheduler refresh and triggers onRowFilter for every Scheduler row:

dp.onRowFilter = function (args) {
  var hideEmptyRows = args.filter;
  args.visible = !hideEmptyRows || !args.row.events.isEmpty();
};

The parameter passed to rows.filter(param) is available as args.filter. The onRowFilter() event handler checks if there are any events in the row using DayPilot.Row.events.isEmpty() method and sets args.visible value accordingly.

Complete example:

<div class="space"><label><input type="checkbox" id="hide"> Hide rows without events</label></div>
<div id="dp"></div>

<script>
    var dp = new DayPilot.Scheduler("dp");
    dp.startDate = "2017-04-01";
    dp.days = 30;
    dp.scale = "Day";
    dp.timeHeaders = [
        {groupBy: "Month"},
        {groupBy: "Day", format: "d"}
    ];
    dp.resources = [
        {name: "Resource 1", id: 1},
        {name: "Resource 2", id: 2},
        {name: "Resource 3", id: 3},
        {name: "Resource 4", id: 4},
    ];
    dp.events.list = [
        {start: "2017-04-02", end: "2017-04-05", id: 1, text: "Event 1", resource: 1}
    ];

    dp.onRowFilter = function (args) {
        var hideEmptyRows = args.filter;
        args.visible = !hideEmptyRows || !args.row.events.isEmpty();
    };
    dp.init();
</script>

<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            var hideEmptyRows = $(this).is(":checked");
            dp.rows.filter(hideEmptyRows);
        });
    });
</script>