Angular 6 Timesheet Quick Start Project

Features

• Simple Angular 6 timesheet project

• Created using DayPilot Angular Scheduler component, switched to "Days" mode

• How to customize the day header format

• Includes all required boilerplate code and dependencies

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

New version of Angular timesheet project

There is a new version of this tutorial available:

• Angular Timesheet Quick Start Project

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.

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

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

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

  @ViewChild("timesheet")
  timesheet: DayPilotSchedulerComponent;

  events: any[] = [];

  config: any = {
    locale: "en-us",
    onBeforeRowHeaderRender: args => {
      args.row.horizontalAlignment = "right";
    },
    timeHeaders: [{"groupBy":"Hour"},{"groupBy":"Cell","format":"mm"}],
    scale: "CellDuration",
    cellDuration: 15,
    days: 7,
    viewType: "Days",
    startDate: DayPilot.Date.today().firstDayOfWeek(),
    onTimeRangeSelected: args => {
      var dp = this.timesheet.control;
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        }));
      });
    },
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    let from = this.timesheet.control.visibleStart();
    let to = this.timesheet.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

}

Custom Date Format

By default, the day headers use the short date format specified by the selected locale. However, it's possible to customize the HTML of the row headers using onBeforeRowHeaderRender event handler.

We will use it to specify custom date format ("dddd M/d/yyyy"). You can also use this event handler to set custom background color, add your own CSS class or set the text alignment directly.

config: any = {
  // ...
  onBeforeRowHeaderRender: args => {
    args.row.html = args.row.start.toString("dddd M/d/yyyy", this.config.locale);
    args.row.horizontalAlignment = "right";
  },
  // ...
};

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.

import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {DayPilot} from "daypilot-pro-angular";
import {HttpClient} from "@angular/common/http";

@Injectable()
export class DataService {

  events: any[] = [
    {
      id: 1,
      start: DayPilot.Date.today().addHours(5),
      end: DayPilot.Date.today().addHours(7),
      text: "Record 1"
    },
    {
      id: 2,
      start: DayPilot.Date.today().addHours(11),
      end: DayPilot.Date.today().addHours(14),
      text: "Record 2"
    }
  ];

  constructor(private http : HttpClient){
  }

  getEvents(from: DayPilot.Date, to: DayPilot.Date): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.events);
        observer.complete();
      }, 200);
    });

    // return this.http.get("/api/events?from=" + from.toString() + "&to=" + to.toString());
  }
}