Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michelebombardi/angular-calendar-scheduler
A scheduler view component for
https://github.com/michelebombardi/angular-calendar-scheduler
Last synced: 23 days ago
JSON representation
A scheduler view component for
- Host: GitHub
- URL: https://github.com/michelebombardi/angular-calendar-scheduler
- Owner: michelebombardi
- License: mit
- Created: 2017-11-16T15:07:34.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-09-03T16:57:22.000Z (3 months ago)
- Last Synced: 2024-11-11T18:57:58.464Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://github.com/mattlewis92/angular-calendar
- Size: 1.67 MB
- Stars: 103
- Watchers: 6
- Forks: 47
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-calendar-scheduler - A scheduler view component for angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-calendar-scheduler - A scheduler view component for angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-calendar-scheduler - A scheduler view component for angular. (Table of contents / Third Party Components)
README
# Angular Calendar Scheduler
[](https://travis-ci.org/michelebombardi/angular-calendar-scheduler)
[](https://www.npmjs.com/package/angular-calendar-scheduler)
[](https://codecov.io/gh/michelebombardi/angular-calendar-scheduler)
[](https://github.com/michelebombardi/angular-calendar-scheduler/issues)
[](https://github.com/michelebombardi/angular-calendar-scheduler/network)
[](https://github.com/michelebombardi/angular-calendar-scheduler/stargazers)
[](https://github.com/michelebombardi/angular-calendar-scheduler/blob/master/LICENSE)
___
## Demo
[StackBlitz](https://stackblitz.com/edit/angular-calendar-scheduler-demo-kvmava?file=src%2Fapp%2Fapp.component.ts)
## Table of contents
* [About](#about)
* [Compatibility](#compatibility)
* [Getting Started](#getting-started)
* [Install](#install)
* [Include Component](#include-component)
* [Usage](#usage)
* [License](#license)
## About
This project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).
## Compatibility
### What major versions of angular and bootstrap does this library support?
| Angular major | Boostrap major | Last supported angular-calendar-scheduler version |
| --------------- | -------------- | ------------------------------------------------------------------------------------ |
| 12.x and higher | 5.x.x | latest version |
| 6.x - 11.x | 4.x.x | [11.0.7](https://github.com/mounthorse-slns/angular-calendar-scheduler/tree/v11.0.7) |
## Getting Started
### Install
#### NPM
```sh
npm install angular-calendar-scheduler date-fns --save
```
#### Yarn
```sh
yarn add angular-calendar-scheduler date-fns
```
### Include Component
#### 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 { }
```
### Usage
#### 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
...
...
```
## License
This software is released under the MIT license. See [LICENSE](LICENSE) for more details.