Features

  • Angular 2 Scheduler component from DayPilot Pro for JavaScript package
  • Navigator component is used as a date picker
  • Free-hand date selection is enabled (for selecting custom date range)
  • Collapsible sidebar with the date picker and other settings
  • Uses Angular CLI 1.0.0-beta.26
  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

For a basic tutorial on using the Angular 2 Scheduler, please see:

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:

Date Navigator Component

angular2-scheduler-date-navigator-component.png

We will use the Navigator component as a date picker which will let users select the date range for the Scheduler.

<daypilot-navigator [config]="navigatorConfig" (dateChange)="changeDate()" #navigator></daypilot-navigator>

By default the Navigator displays one months and selects a single day on click. We will switch the select mode to "month" (selectMode) and display three months at once (showMonths). Clicking previous/next icons in the Navigator header will change the date by three months (skipMonths).

navigatorConfig: any = {
  showMonths: 3,
  skipMonths: 3,
  selectMode: "month"
};

Whenever the user changes the selected date the "dateChange" event is fired. We will use this event to change the date range visible in the Scheduler control.

dateChange() {
  this.config.startDate = this.navigator.control.selectionStart;
  this.config.days = new DayPilot.Duration(this.navigator.control.selectionStart, this.navigator.control.selectionEnd).totalDays() + 1;
}

Loading Scheduler Events for the New Date Range

angular2-scheduler-date-navigation-loading-events.png

Now the Scheduler displays the month selected using the Navigator control. We need to load a new set of events when the view changes - this can be done using "viewChange" event.

viewChange event:

<daypilot-scheduler [config]="config" [events]="events" (viewChange)="viewChange()" #scheduler></daypilot-scheduler>

The viewChange() method checks the current date range using visibleStart() and visibleEnd() methods and requests the relevant events.

viewChange() {

  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();
  });
}

Free-Hand Date Range Selection

angular2-scheduler-date-navigation-free-hand-selection.png

The Navigator supports a couple of preconfigured select modes ("day", "week", "month") and a free-hand selection (drag a mouse to select a custom date range). Only one selectMode can be active at a time (we are using "month") but it can be combined with a free-hand selection. We will add this option using a checkbox that updates "freeHandSelectionEnabled" property of the Navigator:

<label class="row"><input type="checkbox" [(ngModel)]="navigatorConfig.freeHandSelectionEnabled"> Free-hand range</label>

Auto Cell Width

angular2-scheduler-date-navigation-auto-cell-width.png

By default, the Scheduler uses a fixed cell width. When the displayed date range is long a horizontal scrollbar is added automatically. Shorter date ranges make the grid shorter than the Scheduler width (that makes a free space appear after the end of the grid).

For reasonably-sized date ranges (such as one month, with a scale set to one day per cell) it's possible to let the Scheduler adjust the cell width automatically in order to fill the available space. That will eliminate the horizonal scrollbar.

We will let users switch the modes using a simple checkbox.

<label class="row"><input type="checkbox" (change)="changeAutoCellWidth($event)"> Auto cell width</label>

When the checkbox value changes the Scheduler properties are updated accordingly. The auto cell width mode updates the "cellWidth" property with the calculated value - that means we have to reset the cellWidth when switching back to fixed cell width mode.

  changeAutoCellWidth(checkbox) {
    if (checkbox.target.checked) {
      this.config.cellWidthSpec = "Auto";
    }
    else {
      this.config.cellWidthSpec = "Fixed";
      this.config.cellWidth = 40;
    }
  }