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 timeline 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>

API: onIncludeTimeCell.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onIncludeTimeCell: args => { if (args.cell.start.getDayOfWeek() === 0) { args.cell.visible = false; } }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onIncludeTimeCell={args => { if (args.cell.start.getDayOfWeek() === 0) { args.cell.visible = false; } }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onIncludeTimeCell = args => { if (args.cell.start.getDayOfWeek() === 0) { args.cell.visible = false; } };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onIncludeTimeCell="onIncludeTimeCell"
    />
  </div>
</template>

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;
  }
}