Timesheet

The scheduler can be switched to 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

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

Tutorial

• HTML5 Timesheet (JavaScript, PHP)

Angular 2+

Tutorial

• Angular 4 Timesheet Quick Start Project

AngularJS

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

• AngularJS Timesheet Tutorial

ASP.NET WebForms

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

Tutorial

• Timesheet for ASP.NET (C#, VB.NET, SQL Server)

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

• ASP.NET MVC 5 Timesheet (C#, VB)