Overview

  • Add checkboxes to the Scheduler row headers using onBeforeEventRender event handler.

  • Automatically select/deselect the Scheduler row when the checkbox is clicked.

  • 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.

Add a Checkbox to Scheduler Rows

javascript-scheduler-row-input-type-checkbox.png

The easiest way to add a checkbox to the JavaScript Scheduler row headers is to use onBeforeRowHeaderRender event handler and active areas (args.row.areas).

The following example adds a checkbox using <input type='checkbox'> HTML snippet.

onBeforeRowHeaderRender: function (args) {
  var row = args.row;

  if (row.children().length === 0) {
    row.areas = [
      {
        left: 0,
        top: 9,
        width: 13,
        height: 13,
        html: "<input type='checkbox'>";
      }
    ];
  }
},

At this point, it’s just a static checkbox that doesn’t perform any action.

Select a Scheduler Row on Checkbox Click

javascript-scheduler-row-checkbox-selected.png

Now we need to bind the row selection logic to the checkbox click.

First, we define onClick event handler for the active area that adds the row to the list of selected rows. The row can be selected/deselected using the row selection API (rows.selection.add() and rows.selection.remove() methods). You can check the current status of the row using rows.selection.isSelected() method.

onClick: function (args) {
  if (dp.rows.selection.isSelected(row)) {
    dp.rows.selection.remove(row);
  }
  else {
    dp.rows.selection.add(row);
  }
}

We also need to change the active area HTML depending on the selected status:

html: selected ? "<input type='checkbox' checked>" : "<input type='checkbox'>",

This is how onBeforeRowHeaderRender event handler looks now:

onBeforeRowHeaderRender: function (args) {
  var row = args.row;
  var selected = dp.rows.selection.isSelected(row);

  if (row.children().length === 0) {
    row.areas = [
      {
        left: 0,
        top: 9,
        width: 13,
        height: 13,
        html: selected ? "<input type='checkbox' checked>" : "<input type='checkbox'>",
        onClick: function (args) {
          if (dp.rows.selection.isSelected(row)) {
            dp.rows.selection.remove(row);
          }
          else {
            dp.rows.selection.add(row);
          }
        }
      }
    ];
  }
},

Support for Row Header Columns

javascript-scheduler-row-checkbox-columns.png

When displaying multiple row header columns in the JavaScript Scheduler, the active area needs to be added to the first column (args.row.columns[0].areas) instead of the row (args.row.areas).

rowHeaderColumns: [
  {name: "Name"},
  {name: "Id", display: "id"}
],

So we modify the logic to take this option into account:

onBeforeRowHeaderRender: function (args) {
  var row = args.row;
  var selected = dp.rows.selection.isSelected(row);
  var column = args.row.columns.length > 0 ? args.row.columns[0] : args.row;

  if (row.children().length === 0) {
    column.areas = [
      {
        left: 0,
        top: 9,
        width: 13,
        height: 13,
        html: selected ? "<input type='checkbox' checked>" : "<input type='checkbox'>",
        onClick: function (args) {
          if (dp.rows.selection.isSelected(row)) {
            dp.rows.selection.remove(row);
          }
          else {
            dp.rows.selection.add(row);
          }
        }
      }
    ];
  }
},

Full Source Code

And here is the full source code the example that adds checkboxes to the JavaScript Scheduler row headers:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript Scheduler: Using Checkboxes to Select Rows</title>

  <style type="text/css">
    /* ... */
  </style>

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>
</head>
<body>
<div class="header">
  <h1><a href='https://code.daypilot.org/63820/javascript-scheduler-using-checkboxes-to-select-rows'>JavaScript Scheduler: Using Checkboxes to Select Rows</a></h1>
  <div><a href="https://javascript.daypilot.org/">DayPilot for JavaScript</a> - HTML5 Calendar/Scheduling Components for JavaScript/Angular/React/Vue</div>
</div>

<div class="main">
  <div id="dp"></div>
  <div class="generated">Generated using <a href="https://builder.daypilot.org/">DayPilot UI Builder</a>.</div>
</div>

<script>
  var dp = new DayPilot.Scheduler("dp", {
    timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
    scale: "Day",
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    timeRangeSelectedHandling: "Enabled",
    rowHeaderColumns: [
      {name: "Name"},
      {name: "Id", display: "id"}
    ],
    onTimeRangeSelected: function (args) {
      var dp = this;
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        }));
      });
    },
    onBeforeRowHeaderRender: function (args) {
      var row = args.row;
      var selected = dp.rows.selection.isSelected(row);
      var column = args.row.columns.length > 0 ? args.row.columns[0] : args.row;

      if (row.children().length === 0) {
        column.areas = [
          {
            left: 0,
            top: 9,
            width: 13,
            height: 13,
            html: selected ? "<input type='checkbox' checked>" : "<input type='checkbox'>",
            onClick: function (args) {
              if (dp.rows.selection.isSelected(row)) {
                dp.rows.selection.remove(row);
              }
              else {
                dp.rows.selection.add(row);
              }
            }
          }
        ];
      }
    },
    treeEnabled: true,
  });
  dp.resources = [
    {name: "Resource 1", id: "R1"},
    {name: "Resource 2", id: "R2"},
    {name: "Resource 3", id: "R3"},
    {name: "Resource 4", id: "R4"},
    {name: "Resource 5", id: "R5"},
    {name: "Resource 6", id: "R6"},
    {name: "Resource 7", id: "R7"},
    {name: "Resource 8", id: "R8"},
    {name: "Resource 9", id: "R9"},
  ];
  dp.events.list = [];
  dp.init();
</script>

</body>
</html>