Angular Calendar: Displaying Custom Set of Days

Features

• Configures the Angular Calendar to display a custom set of days (two weeks without weekends).

• Angular project generated using Calendar UI Builder

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: DayPilot.CalendarConfig = {
  viewType: "Resources",
  columns: this.columns,
  // ..
};

In this mode we can generate the columns manually using a columns getter. 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

This is the source code of an Angular calendar component that displays a custom number of days as columns.

calendar.component.ts

import {AfterViewInit, Component, ViewChild} 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: DayPilot.EventData[] = [];

  config: DayPilot.CalendarConfig = {
    viewType: "Resources",
    columns: this.columns,
    onTimeRangeSelected: args => {
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(modal => {
        var dp = args.control;
        dp.clearSelection();
        if (modal.canceled) {
          return;
        }
        dp.events.add({
          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;
    });
  }

}