Hiding Time Columns

You can hide selected time columns of the JavaScript Scheduler using the onIncludeTimeCell event handler.

This event handler is called once for every time header cell.

• In the event handler, you can hide the cell using args.cell.visible property (by default all cells are set to visible).

• You can also use the onIncludeTimeCell event handler to adjust the time cell start and end (args.cell.start and args.cell.end). The cells don’t need to follow the previous cell immediately (there can be a gap) but they are not allowed to overlap.

• The break in the timeline is represented by a dark vertical line.

Another way to create a custom timeline is to generate it manually.

JavaScript

This example removes all Sunday cells from the Scheduler timeline:

<div id="dp"></div>
<script type="text/javascript">
  const dp = new DayPilot.Scheduler("dp", {
    onIncludeTimeCell: (args) => {
      if (args.cell.start.getDayOfWeek() === 0) { // hide Sundays
        args.cell.visible = false;
      }
    },
    // ...
  });
  dp.init();
</script>

protected void DayPilotScheduler1_IncludeCell(object sender, IncludeCellEventArgs e)
{
  // hiding lunch break
  if (e.Start.Hour == 13)
  {
    e.Visible = false;
  }
}

protected override void OnIncludeCell(IncludeCellArgs e)
{
  // hiding lunch break
  if (e.Start.Hour == 13)
  {
    e.Visible = false;
  }
}