Overview

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

  • Highlight the full selected column/day.

  • Uses the open-source DayPilot Lite for JavaScript (Apache License 2.0)

License

Licensed under the Apache License 2.0. See the license file included in the sample project for details.

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: 

const 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: (args) => {
  const id = args.column.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: (args) => {
  const id = args.column.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.

The args.ctrl and args.meta properties are used to detect modifier keys. 

onHeaderClick: (args) => {
  const id = args.column.start.toString();
  const ctrl = args.ctrl || args.meta;

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

  if (alreadySelected) {
    if (ctrl) {
      const 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: (args) => {
  const id = args.cell.start.getDatePart().toString();
  if (selection.columns.includes(id)) {
    args.cell.properties.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>
  const selection = {
    columns: []
  };

  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    cellHeight: 30,
    timeRangeSelectedHandling: "Enabled",
    onTimeRangeSelected: async (args) => {
      const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
      const calendar = args.control;
      calendar.clearSelection();
      if (modal.canceled) { return; }
      calendar.events.add({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        text: modal.result
      });
    },
    onHeaderClick: (args) => {
      const id = args.column.start.toString();
      const ctrl = args.ctrl || args.meta;

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

      if (alreadySelected) {
        if (ctrl) {
          const 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: (args) => {
      const id = args.column.start.toString();
      if (selection.columns.includes(id)) {
        args.header.backColor = "#e06666";
      }
    },
    onBeforeCellRender: (args) => {
      const id = args.cell.start.getDatePart().toString();
      if (selection.columns.includes(id)) {
        args.cell.properties.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>

History

  • March 23, 2026: Converted from DayPilot Pro to DayPilot Lite (open source). Modernized JavaScript (const/let, arrow functions, async/await). Updated deprecated args.header to args.column in event handlers.

  • June 29, 2020: Initial release.