Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Timesheet UI Builder

This project was generated using Timesheet UI Builder - an online tool that lets you customize the timesheet component and generate a complete Angular project.

Angular 6 Timesheet Component

Below, you will find the source code of the timesheet component. It's a simplified version of the code generated by the UI Builder.

This instance is configured to show the current week (days are displayed on the vertical axis and time of day is displayed on the horizontal axis).

The non-business hours are visible as well (highlighted using a gray color).

Each column displays 15 minutes, the time headers are grouped by hour and minutes

Timesheet Records

The timesheet component loads the using DataService class. It is implemented as a simple static storage - in real world you'll want to replace this implementation with HTTP calls that load the timesheet data from the server side.

AngularJS web application that displays a timesheet for a team of people working on multiple projects. It uses automatic AngularJS data bindings to display the timesheet records. Includes a sample project with PHP/SQLite backend.