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

Angular Timesheet

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

• Angular 14 Timesheet Quick Start Project

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

• React Timesheet Tutorial

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

• 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
})