Overview

  • Select one or more Calendar columns using click or Ctrl + click.

  • Highlight the full selected column/day.

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

Selecting a Column on Click

Let’s create a new JavaScript Calendar project using UI Builder.

The first step will be to create an object that will store the column selection:

var selection = {
  columns: []
};

The selection.columns property is an array that will hold the column IDs.

Header Click

The first version of the onHeaderClick handler clears the existing selection and stores the ID of the current column in selections.columns.

onHeaderClick: function(args) {
  var id = args.header.start.toString();
  selection.columns = [];
  selection.columns.push(id);
  dp.update();
},

The update() call is necessary to refresh the Calendar.

Highlighting Selected Column

javascript calendar selecting highlighting columns header

The onBeforeHeaderRender event handler is called during Calendar update. Our handler checks if the column being rendered is in the selected list and applies the highlight background color:

onBeforeHeaderRender: function(args) {
  var id = args.header.start.toString();
  if (selection.columns.includes(id)) {
    args.header.backColor = "#e06666";
  }
},

Selecting Multiple Columns

javascript calendar selecting highlighting multiple columns

Now we will extend the onHeaderClick handler to allow selection of multiple columns. Click will select a single column. Ctrl+click will toggle the selection for the given column.

Please note that args.ctrl and args.meta properties are available since 2020.2.4545.

onHeaderClick: function(args) {
  var id = args.header.start.toString();
  var ctrl = args.ctrl || args.meta;

  var alreadySelected = selection.columns.includes(id);

  if (alreadySelected) {
    if (ctrl) {
      var index = selection.columns.indexOf(id);
      selection.columns.splice(index, 1);
    }
    else {
      selection.columns = [id];
    }
  }
  else {
    if (!ctrl) {
      selection.columns = [];
    }
    selection.columns.push(id);
  }
  dp.update();
},

Highlighting Full Column

javascript calendar selecting highlighting columns full

In the last step, we will add a new onBeforeCellRender event handler that will highlight all grid cells for the selected column (in addition to the header).

onBeforeCellRender: function(args) {
  var id = args.cell.start.getDatePart().toString();
  if (selection.columns.includes(id)) {
    args.cell.backColor = "#ea9999";
  }
}

Full Source Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript Calendar: Selecting and Highlighting Columns</title>

  <!-- ... -->

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>

</head>
<body>
<div class="header">
  <h1><a href='https://code.daypilot.org/68382/javascript-calendar-selecting-and-highlighting-columns'>JavaScript Calendar: Selecting and Highlighting Columns</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 selection = {
    columns: []
  };

  var dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    cellHeight: 30,
    timeRangeSelectedHandling: "Enabled",
    onTimeRangeSelected: function (args) {
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        var dp = args.control;
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          text: modal.result
        }));
      });
    },
    onHeaderClick: function(args) {
      var id = args.header.start.toString();
      var ctrl = args.ctrl || args.meta;

      var alreadySelected = selection.columns.includes(id);

      if (alreadySelected) {
        if (ctrl) {
          var index = selection.columns.indexOf(id);
          selection.columns.splice(index, 1);
        }
        else {
          selection.columns = [id];
        }
      }
      else {
        if (!ctrl) {
          selection.columns = [];
        }
        selection.columns.push(id);
      }
      dp.update();
    },
    onBeforeHeaderRender: function(args) {
      var id = args.header.start.toString();
      if (selection.columns.includes(id)) {
        args.header.backColor = "#e06666";
      }
    },
    onBeforeCellRender: function(args) {
      var id = args.cell.start.getDatePart().toString();
      if (selection.columns.includes(id)) {
        args.cell.backColor = "#ea9999";
      }
    }
  });
  dp.events.list = [
    {
      id: "1",
      start: DayPilot.Date.today().addHours(10),
      end: DayPilot.Date.today().addHours(12),
      text: "Event 1"
    }
  ];
  dp.init();
</script>

</body>
</html>