HTML5 Scheduler: Hiding Rows without Events

How to hide Scheduler rows that have no events using row filtering feature.

Downloads Languages

Features

• Uses HTML5/JavaScript Scheduler from DayPilot Pro for JavaScript

• A custom filter that hides rows/resources without events

• Includes a trial version of DayPilot Pro for JavaScript (see License below)

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

We will use a simple Scheduler configuration:

• Displays a fixed month (April 2021)

• 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 = "2021-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: "2021-04-02", end: "2021-04-05", id: 1, text: "Event 1", resource: 1}
    ];
    dp.init();
</script>

Hiding Selected Scheduler Rows using a Filter

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 click event handler that calls DayPilot.Scheduler.rows.filter():

var elements = {
  hide: document.querySelector("#hide")
};

elements.hide.addEventListener("click", function() {
  var hideEmptyRows = this.checked;
  dp.rows.filter(hideEmptyRows);

});

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

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

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

The parameter passed to rows.filter(param) is available as args.filterParam. 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 = "2021-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: "2021-04-02", end: "2021-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>
  var elements = {
    hide: document.querySelector("#hide")
  };

  elements.hide.addEventListener("click", function() {
    var hideEmptyRows = this.checked;
    dp.rows.filter(hideEmptyRows);
  });
</script>

Share

Ask a Question

Ask a Question