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
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
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
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
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
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
- ASP.NET MVC 5 Timesheet (C#, VB)