Displaying total hours when adding or editing shifts in daypilot scheduler control

The following tutorial (for AngularJS 1.x) shows how to display total time occupied by events in each row:
https://code.daypilot.org/54503/angularjs-timesheet-tutorial-javascript-php

You can use the same approach in Angular 2:

import {Component} from '@angular/core';
import {DayPilot} from "daypilot-pro-angular";

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler`
})
export class AppComponent {

  config: any = {
    
    // ...
    rowHeaderColumns: [
        {title: "Date"},
        {title: "Total"}
    ],
    onBeforeRowHeaderRender: function(args) {
        var duration = args.row.events.totalDuration();
        if (duration.ticks > 0) {
            args.row.columns[0].html = duration.toString("h") + "h " + duration.toString("m") + "m";
        }
    }
  }
}

You can also display total time available by summing up the cell durations:

import {Component} from '@angular/core';
import {DayPilot} from "daypilot-pro-angular";

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler`
})
export class AppComponent {

  config: any = {
    
    // ...
    rowHeaderColumns: [
        {title: "Date"},
        {title: "Total"}
    ],
    onBeforeRowHeaderRender: function(args) {
        var total = args.row.cells.all()
            .map(function(cell) { return cell.end.getTime() - cell.start.getTime(); })
            .reduce(function(total, duration) { return total + duration; }, 0);

        var duration = new DayPilot.Duration(total);

        if (duration.ticks > 0) {
            args.row.columns[0].html = duration.toString();
        }
    }
  }
}

Showing vertical summaries is not easy to implement at this moment.