Features

  • A checkbox switches the Angular 2 Scheduler control to read-only mode by disabling all actions
  • Selected context menu items are disabled
  • Active area icons with context-specific actions (row editing) are hidden
  • Trial version of DayPilot Pro for JavaScript included
  • Built using Angular CLI 1.0.0-beta.25.5

For an introduction to Scheduler installation and configuration please see the basic tutorial:

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.

Live Demo

You can test this project in a live demo:

Actions Enabled by Default

angular2-scheduler-read-only-moving.png

By default, the following actions are enabled in the Scheduler:

  • drag and drop event moving
  • drag and drop event resizing
  • drag and drop time range selecting

When a user completes event moving or resizing the event the Scheduler is updated automatically to display the new event position (the default handling type is set to "Update"). Time range selection stays active but nothing else happens by default (event creating has to be mapped using onTimeRangeSelected event handler).

The following actions are also enabled by default but there is no default action specified:

  • time range context menu (on right click)
  • event clicking (single click, right click, double click)
  • row header clicking

Read-Only Mode

angular2-scheduler-read-only-enabled.png

You can switch the Scheduler to read-only mode by disabling individual actions.

The following code turns off and on all user actions. When activating the read-only mode, the current values are stored in this.original property. The original values are then restored when the read-only mode is deactivated:

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

@Component({
  selector: 'scheduler-component',
  template: `
  <div class="space">
    <label for="readonly"><input type="checkbox" id="readonly" [(ngModel)]="readonly" (change)="changed()"> Read-Only</label>
  </div>
  <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild("scheduler")
  scheduler: DayPilot.Angular.Scheduler;

  readonly: boolean = false;

  events: any[] = [];

  config: any = {
    timeHeaders : [
      {groupBy: "Month", format: "MMMM yyyy"},
      {groupBy: "Day", format: "d"}
    ],
    scale: "Day",
    days: 31,
    startDate: "2017-01-01"
  };

  constructor(private ds: DataService, private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.ds.getResources().subscribe(result => this.config.resources = result);

    var from = this.scheduler.control.visibleStart();
    var to = this.scheduler.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;

      // this is required for getEvents() that resolves immediately (no http)
      this.cdr.detectChanges();
    });
  }

  original: any;

  changed():void {
    let properties = [
      "eventClickHandling",
      "eventDeleteHandling",
      "eventHoverHandling",
      "eventDoubleClickHandling",
      "eventMoveHandling",
      "eventResizeHandling",
      "rowClickHandling",
      "rowDoubleClickHandling",
      "rowCreateHandling",
      "rowSelectedHandling",
      "rowMoveHandling",
      "timeRangeClickHandling",
      "timeRangeDoubleClickHandling",
      "timeRangeSelectedHandling",
      "timeRangeRightClickHandling"
    ];

    if (this.readonly) {
      this.original = {};

      properties.forEach(name => {
        this.original[name] = this.scheduler.control[name];
        this.config[name] = "Disabled";
      });

      this.scheduler.control.clearSelection();

    }
    else {
      properties.forEach(name => {
        this.config[name] = this.original[name];
      });
    }
  }

}

Disabling Context Menu Items

Event context menu in "edit" mode:

angular2-scheduler-context-menu-edit-mode.png

Event context menu in "read-only" mode:

angular2-scheduler-context-menu-read-only-mode.png

The Scheduler event context menu supports onShow() event handler that will let you customize the context menu properties and items in runtime depending on the current application state. In this case, we will enable/disable the "Edit" menu item depending on the read-only checkbox state:

config: any = {
  // ...
  contextMenu: new DayPilot.Menu({
    items: [
      { text: "Edit" },
      { text: "Details" }
      ],
    onShow: args => {
      args.menu.items[0].disabled = this.readonly;
    }
  }),
};

Active Areas

If you add any editing capabitilies using active areas they need to be turned off/hidden as well.

Our example adds a row header active area that activates inline row editing:

angular2-scheduler-row-editing-enabled.png

In the read-only mode, the active area is not visible:

angular2-scheduler-row-editing-disabled.png

config: any = {   
  // ...
  onBeforeRowHeaderRender: args => {
    if (!this.readonly) {
      args.row.areas = [
        { right: 3, top: 3, width: 14, height: 14, css:"icon icon-edit", visibility: "Hover", onClick: args => { this.scheduler.control.rows.edit(args.source); } }
      ];
    }
  }
  // ...
}