Timesheet Row Header Date Format

The HeaderDateFormat determines the format of the date in row header in Timesheet mode (one day per row). It accepts the same values as DateTime.ToString(string) method.

API: viewType, onBeforeRowHeaderRender.

In the JavaScript-based framework components, use onBeforeRowHeaderRender to format the date for each row in Days view. The examples assign args.row.start.toString("ddd d MMM") to the row text.

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: 7,
    scale: "Hour",
    timeHeaders: [{groupBy: "Hour"}],
    resources: [],
    events: [],
    viewType: "Days",
    onBeforeRowHeaderRender: args => { args.row.text = args.row.start.toString("ddd d MMM"); }
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={7}
      scale={"Hour"}
      timeHeaders={[{groupBy: "Hour"}]}
      resources={[]}
      events={[]}
      viewType={"Days"}
      onBeforeRowHeaderRender={args => { args.row.text = args.row.start.toString("ddd d MMM"); }}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-01";
const days = 7;
const scale = "Hour";
const timeHeaders = [{groupBy: "Hour"}];
const resources = [];
const events = [];
const viewType = "Days";
const onBeforeRowHeaderRender = args => { args.row.text = args.row.start.toString("ddd d MMM"); };

</script>

<template>
  <div>

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

JavaScript

The date format is determined by DayPilot.Locale.datePattern property. See also DayPilot.Scheduler.locale.

ASP.NET WebForms

The default value is "d" which will use the default format set for the current Culture.