Overview

  • The JavaScript Scheduler component supports several standard time header group sizes.

  • If you need to display special groups, you can use the time header customization API to insert custom segments using active areas.

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

Scheduler Time Header Groups

The JavaScript Scheduler component supports the following time header groups:

  • Hour

  • Day

  • Week

  • Month

  • Quarter

  • Year

  • None

  • Cell

The time header group can be set using groupBy property of the time header row object. The time headers are specified using timeHeaders Scheduler property.

The following example displays three rows. The first row displays the month name, the second row displays the week number and the third row displays the day of month.

javascript scheduler time header segments group by week

var dp = new DayPilot.Scheduler("dp", {
  timeHeaders: [
    {groupBy: "Month"},
    {groupBy: "Week"},
    {groupBy: "Day", format:"d"}
  ],
  // ...
});

We will modify the second row to split the week group to two segments - work week and weekend.

Let’s start with changing the the group size of the second row to "None", which mean the whole row will display only one cell.

javascript scheduler time header segments group by none

var dp = new DayPilot.Scheduler("dp", {
  timeHeaders: [
    {groupBy: "Month"},
    {groupBy: "None"},
    {groupBy: "Day", format:"d"}
  ],
  // ...
});

Custom Segments in the Scheduler Time Header

javascript scheduler time header segments weekend

Now we will use onBeforeTimeHeaderRender event to insert our own date segments using active areas. The active areas can be used to add additional information to the time header cells, action icons, or customize the appearance (see also JavaScript Scheduler Time Header Customization tutorial).

var dp = new DayPilot.Scheduler("dp", {
  timeHeaders: [
    {groupBy: "Month"},
    {groupBy: "None"},
    {groupBy: "Day", format:"d"}
  ],
  onBeforeTimeHeaderRender: function(args) {
    if (args.header.level === 1) {
      var start = args.header.start;
      args.header.areas = [];
      while (start < args.header.end) {
        var dayOfWeek = start.getDayOfWeek();
        var isWeekend;
        var end;
        if (dayOfWeek === 0) {
          isWeekend = true;
          end = start.addDays(1);
        }
        else if (dayOfWeek === 6) {
          isWeekend = true;
          end = start.addDays(2);
        }
        else {
          isWeekend = false;
          end = start.addDays(6 - dayOfWeek);
        }

        if (end > args.header.end) {
          end = args.header.end;
        }
        args.header.areas.push({
          start: start,
          end: end,
          top: 0,
          bottom: 1,
          backColor: isWeekend ? "#e0e0e0" : null,
          style: "box-sizing: border-box; border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center;",
          html: isWeekend ? "Weekend" : "Week " + start.weekNumber()
        });

        start = end;
      }
    }
  },
  // ...
});

Full Source Code

This is the full source code of the Scheduler component with custom time header segments.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript Scheduler: Custom Time Header Segments</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/70037/javascript-scheduler-custom-time-header-segments'>JavaScript Scheduler: Custom Time Header Segments</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: "None"},
      {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
        }));
      });
    },
    onBeforeTimeHeaderRender: function(args) {
      if (args.header.level === 1) {
        var start = args.header.start;
        args.header.areas = [];
        while (start < args.header.end) {
          var dayOfWeek = start.getDayOfWeek();
          var isWeekend;
          var end;
          if (dayOfWeek === 0) {
            isWeekend = true;
            end = start.addDays(1);
          }
          else if (dayOfWeek === 6) {
            isWeekend = true;
            end = start.addDays(2);
          }
          else {
            isWeekend = false;
            end = start.addDays(6 - dayOfWeek);
          }

          if (end > args.header.end) {
            end = args.header.end;
          }
          args.header.areas.push({
            start: start,
            end: end,
            top: 0,
            bottom: 1,
            backColor: isWeekend ? "#e0e0e0" : null,
            style: "box-sizing: border-box; border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center;",
            html: isWeekend ? "Weekend" : "Week " + start.weekNumber()
          });

          start = end;
        }
      }
    }
  });
  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>