Overview

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.

Time Separators in the Grid

javascript scheduler separators grid

The JavaScript Scheduler component can display vertical lines in the grid at specified positions - they are called separators. In addition to the separator position (date/time), you can specify custom color, width, opacity, CSS class etc.

The separators will be displayed above the grid cells but you can choose if they will be below or above the events. By default, they are displayed below events.

<script>
  var dp = new DayPilot.Scheduler("dp", {
    // ...
  });
  dp.separators = [
    { location: DayPilot.Date.today(), color: "red"},
    { location: DayPilot.Date.now(), color: "orange"},
  ];
  dp.init();
</script>

Separators in the Time Header

javascript scheduler separators time header

In order to display the separators in the time header, you can use onBeforeTimeHeaderRender event and insert custom active areas at the specified positions.

The separators use a position shifted 1px to the left, so it is necessary to add a horizontal offset of -1 using area.offsetX property. Please note that area.offsetX is available in DayPilot Pro since version 2020.3.4659.

The following example works for all time header rows. If you want to display a separator in selected time header rows only, check args.header.level.

<script>
  var dp = new DayPilot.Scheduler("dp", {
    // ...
  });
  dp.separators = [
    { location: DayPilot.Date.today(), color: "red"},
    { location: DayPilot.Date.now(), color: "orange"},
  ];
  dp.onBeforeTimeHeaderRender = function(args) {
    var separators = dp.separators.filter(function(s) {
      return args.header.start < s.location && s.location <= args.header.end;
    });
    separators.forEach(function(s) {
      if (!args.header.areas) {
        args.header.areas = [];
      }
      args.header.areas.push({
        start: s.location,
        width: 1,
        top: 0,
        bottom: 0,
        offsetX: -1,
        backColor: s.color
      });
    });
  };
  dp.events.list = [];
  dp.init();
</script>

Full Source Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript Scheduler: Show Separators in the Time Header</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/97796/javascript-scheduler-show-separators-in-the-time-header'>JavaScript Scheduler: Show Separators in the Time Header</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",
    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
        }));
      });
    },
    eventMoveHandling: "Update",
    onEventMoved: function (args) {
      this.message("Event moved: " + args.e.text());
    },
    eventResizeHandling: "Update",
    onEventResized: function (args) {
      this.message("Event resized: " + args.e.text());
    },
    eventDeleteHandling: "Update",
    onEventDeleted: function (args) {
      this.message("Event deleted: " + args.e.text());
    },
    eventClickHandling: "Disabled",
    eventHoverHandling: "Bubble",
    bubble: new DayPilot.Bubble({
      onLoad: function(args) {
        // if event object doesn't specify "bubbleHtml" property
        // this onLoad handler will be called to provide the bubble HTML
        args.html = "Event details";
      }
    }),
    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.separators = [
    { location: DayPilot.Date.today(), color: "red"},
    { location: DayPilot.Date.now(), color: "orange"},
  ];
  dp.onBeforeTimeHeaderRender = function(args) {
    var separators = dp.separators.filter(function(s) {
      return args.header.start < s.location && s.location <= args.header.end;
    });
    separators.forEach(function(s) {
      if (!args.header.areas) {
        args.header.areas = [];
      }
      args.header.areas.push({
        start: s.location,
        width: 1,
        top: 0,
        bottom: 0,
        offsetX: -1,
        backColor: s.color
      });
    });
  };
  dp.events.list = [];
  dp.init();
</script>

</body>
</html>