Timesheet

The scheduler can be switched to a timesheet mode:

• The vertical (Y) axis displays days. The number of days is configurable using Days property. It can be a single day, a week, a month or a longer period.

• The height is controlled using HeightSpec property. You can display the timesheet in full height (all days) or limit it to the maximum number of pixels. A vertical scrollbar will be added if necessary.

• The horizontal (X) axis displays 24 hours of day. Business hours are highlighted by default. The default business hours are defined as 9am - 5pm. You can customize them using BusinessBeginsHour and BusinessEndsHour properties.

• You can apply the standard CSS themes created for the scheduler.

• You can display additional columns in the row header. This is useful for displaying daily summary.

JavaScript Timesheet

Here is an example configuration of the JavaScript Scheduler that displays a timesheet UI:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.viewType = "Days";
  dp.startDate = new DayPilot.Date().firstDayOfMonth();
  dp.days = dp.startDate.daysInMonth();
  /// ...
  dp.init();
</script>

JavaScript Tutorials

• HTML5 Timesheet (JavaScript, PHP)

• ASP.NET Core Timesheet

API: viewType.

The framework examples show a week in Days view. Event dates determine their rows, so these events do not need resource assignments and the resource collection is empty.

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: [{id: 1, text: "Planning", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}],
    viewType: "Days"
  };

}

Angular Tutorials

• Angular 14 Timesheet Quick Start Project

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={[{id: 1, text: "Planning", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]}
      viewType={"Days"}
    />
  </div>;
}

React Tutorials

• React Timesheet Tutorial

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 = [{id: 1, text: "Planning", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}];
const viewType = "Days";

</script>

<template>
  <div>

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

Vue Tutorials

• Vue Timesheet Tutorial

<!-- AngularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<!-- DayPilot -->
<script src="js/daypilot/daypilot-all.min.js"></script>

<!-- HTML -->
<div ng-app="timesheetApp" ng-controller="TimesheetCtrl">
  <daypilot-scheduler id="dp" config="scheduler" events="events"></daypilot-scheduler>
</div>


<script>
var app = angular.module('timesheetApp', ['daypilot']);

app.controller('TimesheetCtrl', function($scope) {

    $scope.scheduler = {
        viewType: "Days",
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        days: DayPilot.Date.today().daysInMonth(),
        cellWidthSpec: "Auto",
        businessBeginsHour: 9,
        businessEndsHour: 17,
        showNonBusiness: false
    };
    
    $scope.events = [
      { id: 1, start: "2016-01-01T10:00:00", end: "2016-01-01T12:00:00", text: "Activity 1" }
    ];
});

</script>

<DayPilot:DayPilotScheduler runat="server"
  ...
  ViewType="Days"
  StartDate="2021-01-01"
  Days="31"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  ViewType = DayPilot.Web.Mvc.Enums.Scheduler.ViewType.Gantt,
  StartDate = DateTime.Today,
  Days = 31
})