Angular Calendar Scheduler


___

Demo

StackBlitz

Table of contents

* About
* Compatibility
* Getting Started
* Install
* Include Component
* Usage

* License

About

This project provide a scheduler view component for mattlewis92/angular-calendar.

Compatibility

$3

| Angular major | Boostrap major | Last supported angular-calendar-scheduler version |
|-----------------| -------------- |--------------------------------------------------------------------------------------|
| 20.x and higher | 5.x.x | 20+ |
| 18.x and higher | 5.x.x | 18 |
| 12.x and higher | 5.x.x | 12-17 |
| 6.x - 11.x | 4.x.x | 11.0.7 |

Getting Started

$3

#### NPM

``sh
npm install angular-calendar-scheduler date-fns --save
`

#### Yarn

`sh
yarn add angular-calendar-scheduler date-fns
`

$3

#### Import

`ts
import { CalendarModule, MOMENT } from 'angular-calendar';
import { SchedulerModule } from 'angular-calendar-scheduler';

import moment from 'moment';

@NgModule({
...
imports: [
...,
CalendarModule.forRoot(),
SchedulerModule.forRoot({ locale: 'en', headerDateFormat: 'daysRange' }),
...
],
providers: [
...
{ provide: LOCALE_ID, useValue: 'en-US' },
{ provide: MOMENT, useValue: moment }
...
],
...
})
class AppModule { }
`

$3

#### app.component.ts

`ts
import {
CalendarView,
CalendarDateFormatter,
DateAdapter
} from 'angular-calendar';
import {
...
} from 'angular-calendar-scheduler';

@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [{
provide: CalendarDateFormatter,
useClass: SchedulerDateFormatter
}]
})
export class AppComponent implements OnInit {
title = 'Angular Calendar Scheduler Demo';

CalendarView = CalendarView;

view: CalendarView = CalendarView.Week;
viewDate: Date = new Date();
viewDays: number = DAYS_IN_WEEK;
refresh: Subject = new Subject();
locale: string = 'en';
hourSegments: number = 4;
weekStartsOn: number = 1;
startsWithToday: boolean = true;
activeDayIsOpen: boolean = true;
excludeDays: number[] = []; // [0];
weekendDays: number[] = [0,6];
dayStartHour: number = 6;
dayEndHour: number = 22;

minDate: Date = new Date();
maxDate: Date = endOfDay(addMonths(new Date(), 1));

dayModifier: Function;
hourModifier: Function;
segmentModifier: Function;
eventModifier: Function;

prevBtnDisabled: boolean = false;
nextBtnDisabled: boolean = false;

actions: CalendarSchedulerEventAction[] = [
{
when: 'enabled',
label: 'cancel',
title: 'Delete',
onClick: (event: CalendarSchedulerEvent): void => {
console.log('Pressed action \'Delete\' on event ' + event.id);
}
},
{
when: 'disabled',
label: 'autorenew',
title: 'Restore',
onClick: (event: CalendarSchedulerEvent): void => {
console.log('Pressed action \'Restore\' on event ' + event.id);
}
}
];

events: CalendarSchedulerEvent[];

@ViewChild(CalendarSchedulerViewComponent) calendarScheduler: CalendarSchedulerViewComponent;

constructor(@Inject(LOCALE_ID) locale: string, private appService: AppService, private dateAdapter: DateAdapter) {
this.locale = locale;

this.dayModifier = ((day: SchedulerViewDay): void => {
if (!this.isDateValid(day.date)) {
day.cssClass = 'cal-disabled';
}
}).bind(this);

this.hourModifier = ((hour: SchedulerViewHour): void => {
if (!this.isDateValid(hour.date)) {
hour.cssClass = 'cal-disabled';
}
}).bind(this);

this.segmentModifier = ((segment: SchedulerViewHourSegment): void => {
if (!this.isDateValid(segment.date)) {
segment.isDisabled = true;
}
}).bind(this);

this.eventModifier = ((event: CalendarSchedulerEvent): void => {
event.isDisabled = !this.isDateValid(event.start);
}).bind(this);

this.dateOrViewChanged();
}

ngOnInit(): void {
this.appService.getEvents(this.actions)
.then((events: CalendarSchedulerEvent[]) => this.events = events);
}

viewDaysOptionChanged(viewDays: number): void {
console.log('viewDaysOptionChanged', viewDays);
this.calendarScheduler.setViewDays(viewDays);
}

changeDate(date: Date): void {
console.log('changeDate', date);
this.viewDate = date;
this.dateOrViewChanged();
}

changeView(view: CalendarView): void {
console.log('changeView', view);
this.view = view;
this.dateOrViewChanged();
}

dateOrViewChanged(): void {
if (this.startsWithToday) {
this.prevBtnDisabled = !this.isDateValid(subPeriod(this.dateAdapter, CalendarView.Day/this.view/, this.viewDate, 1));
this.nextBtnDisabled = !this.isDateValid(addPeriod(this.dateAdapter, CalendarView.Day/this.view/, this.viewDate, 1));
} else {
this.prevBtnDisabled = !this.isDateValid(endOfPeriod(this.dateAdapter, CalendarView.Day/this.view/, subPeriod(this.dateAdapter, CalendarView.Day/this.view/, this.viewDate, 1)));
this.nextBtnDisabled = !this.isDateValid(startOfPeriod(this.dateAdapter, CalendarView.Day/this.view/, addPeriod(this.dateAdapter, CalendarView.Day/this.view/, this.viewDate, 1)));
}

if (this.viewDate < this.minDate) {
this.changeDate(this.minDate);
} else if (this.viewDate > this.maxDate) {
this.changeDate(this.maxDate);
}
}

private isDateValid(date: Date): boolean {
return /isToday(date) ||/ date >= this.minDate && date <= this.maxDate;
}

viewDaysChanged(viewDays: number): void {
console.log('viewDaysChanged', viewDays);
this.viewDays = viewDays;
}

dayHeaderClicked(day: SchedulerViewDay): void {
console.log('dayHeaderClicked Day', day);
}

hourClicked(hour: SchedulerViewHour): void {
console.log('hourClicked Hour', hour);
}

segmentClicked(action: string, segment: SchedulerViewHourSegment): void {
console.log('segmentClicked Action', action);
console.log('segmentClicked Segment', segment);
}

eventClicked(action: string, event: CalendarSchedulerEvent): void {
console.log('eventClicked Action', action);
console.log('eventClicked Event', event);
}

eventTimesChanged({ event, newStart, newEnd }: SchedulerEventTimesChangedEvent): void {
console.log('eventTimesChanged Event', event);
console.log('eventTimesChanged New Times', newStart, newEnd);
let ev = this.events.find(e => e.id === event.id);
ev.start = newStart;
ev.end = newEnd;
this.refresh.next();
}
}
`

#### app.component.html

`html
...

One day
Three days
One week

...
[viewDays]="viewDays"
[viewDate]="viewDate"
[events]="events"
[locale]="locale"
[responsive]="true"
[weekStartsOn]="weekStartsOn"
[excludeDays]="excludeDays"
[startsWithToday]="startsWithToday"
[hourSegments]="hourSegments"
[dayStartHour]="dayStartHour"
[dayEndHour]="dayEndHour"
[dayModifier]="dayModifier"
[hourModifier]="hourModifier"
[segmentModifier]="segmentModifier"
[eventModifier]="eventModifier"
[showEventActions]="true"
[showSegmentHour]="true"
[zoomEventOnHover]="true"
(viewDaysChanged)="viewDaysChanged($event)"
(dayHeaderClicked)="dayHeaderClicked($event.day)"
(hourClicked)="hourClicked($event.hour)"
(segmentClicked)="segmentClicked('Clicked', $event.segment)"
(eventClicked)="eventClicked('Clicked', $event.event)"
(eventTimesChanged)="eventTimesChanged($event)"
[refresh]="refresh">

...
``

License

This software is released under the MIT license. See LICENSE for more details.