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

javascript html5 timesheet component

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

Angular Timesheet

angular timesheet quick start project

The Angular Scheduler component can display a timesheet if you switch the view type to "Days".

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'timesheet-component',
  template: `<daypilot-scheduler [config]="config" [events]="events" #timesheet></daypilot-scheduler>`,
  styles: [``]
})
export class TimesheetComponent {

  @ViewChild('timesheet')
  timesheet!: DayPilotSchedulerComponent;

  events: DayPilot.EventData[] = [];

  config: DayPilot.SchedulerConfig = {
    viewType: 'Days',
    // ...
  };

}

Angular Tutorials

React Timesheet

react timesheet

In the React Scheduler, you can activate the timesheet mode using viewType attribute of the <DayPilotScheduler> JSX tag:

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

class Timesheet extends Component {

  render() {
    return (
      <div>
        <DayPilotScheduler
          viewType={"Days"}
        />
      </div>
    );
  }
}

export default Timesheet;

React Tutorials

Vue Timesheet

vue timesheet

The Vue Scheduler component can display a timesheet using the following configuration:

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Timesheet',
  data: function() {
    return {
      config: {
        viewType: "Days",
        timeHeaders: [{groupBy: "Hour"},{groupBy:"Cell", format:"mm"}],
        scale: "CellDuration",
        cellDuration: 15,
        viewType: "Days",
        startDate: "2021-10-01",
        days: 31,
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
}
</script>

Vue Tutorials

ASP.NET WebForms

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

Tutorial

ASP.NET MVC

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

Tutorial

AngularJS Timesheet

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

Tutorial