Features
- Configures the Angular Calendar to display a custom set of days (two weeks without weekends).
- Angular 5 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: 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; }); } }