Features

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.

Angular Calendar Component Configuration

The calendar config object switches the calendar component to the resources view:

config: any = {
  viewType: "Resources",
  columns: this.columns,
  // ..
};

In this mode we can generate the columns manually using a new columns property. This generator starts this weeks and adds work days to the array:

get columns(): any[] {
  let result = [];
  let first = DayPilot.Date.today().firstDayOfWeek();

  for (let i = 0; i < 14; i++) {
    let day = first.addDays(i);
    let dayOfWeek = day.getDayOfWeek();

    // skip weekends
    if (dayOfWeek === 0 || dayOfWeek === 6) {
      continue;
    }
    result.push({start: day, name: day.toString("ddd M/d/yyyy")});
  }
  return result;
}

Source Code

calendar.component.ts

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

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

  @ViewChild("calendar")
  calendar: DayPilotCalendarComponent;

  events: any[] = [];

  config: any = {
    viewType: "Resources",
    columns: this.columns,
    onTimeRangeSelected: function (args) {
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        var dp = args.control;
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          text: modal.result
        }));
      });
    },
  };

  constructor(private ds: DataService) {
  }

  get columns(): any[] {
    let result = [];
    let first = DayPilot.Date.today().firstDayOfWeek();

    for (let i = 0; i < 14; i++) {
      let day = first.addDays(i);
      let dayOfWeek = day.getDayOfWeek();

      // skip weekends
      if (dayOfWeek === 0 || dayOfWeek === 6) {
      continue;
    }
    result.push({start: day, name: day.toString("ddd M/d/yyyy")});
    }
    return result;
  }

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

}