DayPilot.Calendar.onIncludeTimeCell

Customizes each generated time cell before the shared vertical timeline is prepared.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.onIncludeTimeCell(args)

Parameters

• args.cell.start (DayPilot.Date): editable interval start.
• args.cell.end (DayPilot.Date): editable interval end.
• args.cell.height (number or null): optional pixel height; null uses cellHeight.
• args.cell.visible (boolean): set false to omit the interval.

Behavior

The callback runs for generated cells, once for the shared axis rather than once per resource. It is not called for scale "Manual". Updated intervals must be positive, ordered and non-overlapping, and heights must be positive.

The handler takes precedence over automatic showNonBusiness filtering. Include every desired weekday/hour rule in the handler. Use onBeforeCellRender for resource-specific appearance or business flags; it does not change shared timeline geometry.

These examples configure an existing DayPilot Pro Calendar. Keep its event data and other options.

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Hour",
  onIncludeTimeCell: args => {
    const day = args.cell.start.dayOfWeek();
    const hour = args.cell.start.getHours();
    args.cell.visible = day !== 0 && day !== 6 && hour >= 8 && hour < 18 && hour !== 12;
  }
});
calendar.init();

Angular

Add the configuration to an existing Calendar component.

<daypilot-calendar [config]="config"></daypilot-calendar>

import {DayPilot} from "daypilot-pro-angular";

config: DayPilot.CalendarConfig = {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Hour",
  onIncludeTimeCell: args => {
    const day = args.cell.start.dayOfWeek();
    const hour = args.cell.start.getHours();
    args.cell.visible = day !== 0 && day !== 6 && hour >= 8 && hour < 18 && hour !== 12;
  }
};

React

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

<DayPilotCalendar
  startDate="2028-04-03"
  viewType="Resources"
  days={7}
  columns={[{id: "A", name: "Cedar room"}]}
  scale="Hour"
  onIncludeTimeCell={args => {
    const day = args.cell.start.dayOfWeek();
    const hour = args.cell.start.getHours();
    args.cell.visible = day !== 0 && day !== 6 && hour >= 8 && hour < 18 && hour !== 12;
  }}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";
const columns: NonNullable<DayPilot.CalendarConfig["columns"]> = [{id: "A", name: "Cedar room"}];
const onIncludeTimeCell: NonNullable<DayPilot.CalendarConfig["onIncludeTimeCell"]> = args => {
    const day = args.cell.start.dayOfWeek();
    const hour = args.cell.start.getHours();
    args.cell.visible = day !== 0 && day !== 6 && hour >= 8 && hour < 18 && hour !== 12;
  };
</script>

<template>
  <DayPilotCalendar
    startDate="2028-04-03"
    viewType="Resources"
    :days="7"
    :columns="columns"
    scale="Hour"
    :onIncludeTimeCell="onIncludeTimeCell"
  />
</template>

See Also

Nonlinear Timeline · DayPilot.Calendar Class