{"id":13808201,"url":"https://github.com/michelebombardi/angular-calendar-scheduler","last_synced_at":"2026-03-06T09:34:01.166Z","repository":{"id":26896068,"uuid":"110985884","full_name":"michelebombardi/angular-calendar-scheduler","owner":"michelebombardi","description":"A scheduler view component for","archived":false,"fork":false,"pushed_at":"2026-02-28T04:09:53.000Z","size":2256,"stargazers_count":107,"open_issues_count":21,"forks_count":45,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-02-28T10:47:06.353Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/mattlewis92/angular-calendar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michelebombardi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-11-16T15:07:34.000Z","updated_at":"2026-02-25T23:09:40.000Z","dependencies_parsed_at":"2024-11-19T00:32:38.285Z","dependency_job_id":"cec440b8-fbbe-4ea5-90ae-bfe9037c3e9c","html_url":"https://github.com/michelebombardi/angular-calendar-scheduler","commit_stats":null,"previous_names":["mounthorse-slns/angular-calendar-scheduler","bm-software/angular-calendar-scheduler"],"tags_count":154,"template":false,"template_full_name":null,"purl":"pkg:github/michelebombardi/angular-calendar-scheduler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michelebombardi%2Fangular-calendar-scheduler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michelebombardi%2Fangular-calendar-scheduler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michelebombardi%2Fangular-calendar-scheduler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michelebombardi%2Fangular-calendar-scheduler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michelebombardi","download_url":"https://codeload.github.com/michelebombardi/angular-calendar-scheduler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michelebombardi%2Fangular-calendar-scheduler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30169034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T07:56:45.623Z","status":"ssl_error","status_checked_at":"2026-03-06T07:55:55.621Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:37.252Z","updated_at":"2026-03-06T09:34:01.157Z","avatar_url":"https://github.com/michelebombardi.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Angular Calendar Scheduler\n\n[![Build Status](https://travis-ci.org/michelebombardi/angular-calendar-scheduler.svg?branch=main)](https://travis-ci.org/michelebombardi/angular-calendar-scheduler)\n[![npm version](https://badge.fury.io/js/angular-calendar-scheduler.svg)](https://www.npmjs.com/package/angular-calendar-scheduler)\n[![codecov](https://codecov.io/gh/michelebombardi/angular-calendar-scheduler/branch/master/graph/badge.svg)](https://codecov.io/gh/michelebombardi/angular-calendar-scheduler)\n[![issues](https://img.shields.io/github/issues/michelebombardi/angular-calendar-scheduler.svg)](https://github.com/michelebombardi/angular-calendar-scheduler/issues)\n[![forks](https://img.shields.io/github/forks/michelebombardi/angular-calendar-scheduler.svg)](https://github.com/michelebombardi/angular-calendar-scheduler/network)\n[![stars](https://img.shields.io/github/stars/michelebombardi/angular-calendar-scheduler.svg)](https://github.com/michelebombardi/angular-calendar-scheduler/stargazers)\n[![license](https://img.shields.io/github/license/michelebombardi/angular-calendar-scheduler.svg)](https://github.com/michelebombardi/angular-calendar-scheduler/blob/master/LICENSE)\n\n___\n\n## Demo\n\n\u003c!--https://angular-calendar-scheduler-demo-kvmava.stackblitz.io--\u003e\n[StackBlitz](https://stackblitz.com/edit/angular-calendar-scheduler-demo-kvmava?file=src%2Fapp%2Fapp.component.ts)\n\n## Table of contents\n\n* [About](#about)\n* [Compatibility](#compatibility)\n* [Getting Started](#getting-started)\n    * [Install](#install)\n    * [Include Component](#include-component)\n    * [Usage](#usage)\n\u003c!-- * [API](#api)\n  * [Properties](#properties) --\u003e\n* [License](#license)\n\n## About\n\nThis project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).\n\n## Compatibility\n### What major versions of angular and bootstrap does this library support?\n\n| Angular major   | Boostrap major | Last supported angular-calendar-scheduler version                                    |\n|-----------------| -------------- |--------------------------------------------------------------------------------------|\n| 20.x and higher | 5.x.x          | 20+                                                                                  |\n| 18.x and higher | 5.x.x          | 18                                                                                   |\n| 12.x and higher | 5.x.x          | 12-17                                                                                |\n| 6.x - 11.x      | 4.x.x          | [11.0.7](https://github.com/mounthorse-slns/angular-calendar-scheduler/tree/v11.0.7) |\n\n\n## Getting Started\n\n### Install\n\n#### NPM\n\n```sh\nnpm install angular-calendar-scheduler date-fns --save\n```\n\n#### Yarn\n\n```sh\nyarn add angular-calendar-scheduler date-fns\n```\n\n### Include Component\n\n#### Import\n\n```ts\nimport { CalendarModule, MOMENT } from 'angular-calendar';\nimport { SchedulerModule } from 'angular-calendar-scheduler';\n\nimport moment from 'moment';\n\n@NgModule({\n    ...\n    imports: [\n        ...,\n        CalendarModule.forRoot(),\n        SchedulerModule.forRoot({ locale: 'en', headerDateFormat: 'daysRange' }),\n        ...\n    ],\n    providers: [\n        ...\n        { provide: LOCALE_ID, useValue: 'en-US' },\n        { provide: MOMENT, useValue: moment }\n        ...\n    ],\n    ...\n})\nclass AppModule { }\n```\n\n### Usage\n\n#### app.component.ts\n\n```ts\nimport {\n    CalendarView,\n    CalendarDateFormatter,\n    DateAdapter\n} from 'angular-calendar';\nimport {\n    ...\n} from 'angular-calendar-scheduler';\n\n@Component({\n    selector: 'app-component',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss'],\n    providers: [{\n        provide: CalendarDateFormatter,\n        useClass: SchedulerDateFormatter\n    }]\n})\nexport class AppComponent implements OnInit {\n    title = 'Angular Calendar Scheduler Demo';\n\n    CalendarView = CalendarView;\n\n    view: CalendarView = CalendarView.Week;\n    viewDate: Date = new Date();\n    viewDays: number = DAYS_IN_WEEK;\n    refresh: Subject\u003cany\u003e = new Subject();\n    locale: string = 'en';\n    hourSegments: number = 4;\n    weekStartsOn: number = 1;\n    startsWithToday: boolean = true;\n    activeDayIsOpen: boolean = true;\n    excludeDays: number[] = []; // [0];\n    weekendDays: number[] = [0,6];\n    dayStartHour: number = 6;\n    dayEndHour: number = 22;\n\n    minDate: Date = new Date();\n    maxDate: Date = endOfDay(addMonths(new Date(), 1));\n    \n    dayModifier: Function;\n    hourModifier: Function;\n    segmentModifier: Function;\n    eventModifier: Function;\n\n    prevBtnDisabled: boolean = false;\n    nextBtnDisabled: boolean = false;\n\n    actions: CalendarSchedulerEventAction[] = [\n        {\n            when: 'enabled',\n            label: '\u003cspan class=\"valign-center\"\u003e\u003ci class=\"material-icons md-18 md-red-500\"\u003ecancel\u003c/i\u003e\u003c/span\u003e',\n            title: 'Delete',\n            onClick: (event: CalendarSchedulerEvent): void =\u003e {\n                console.log('Pressed action \\'Delete\\' on event ' + event.id);\n            }\n        },\n        {\n            when: 'disabled',\n            label: '\u003cspan class=\"valign-center\"\u003e\u003ci class=\"material-icons md-18 md-red-500\"\u003eautorenew\u003c/i\u003e\u003c/span\u003e',\n            title: 'Restore',\n            onClick: (event: CalendarSchedulerEvent): void =\u003e {\n                console.log('Pressed action \\'Restore\\' on event ' + event.id);\n            }\n        }\n    ];\n\n    events: CalendarSchedulerEvent[];\n\n    @ViewChild(CalendarSchedulerViewComponent) calendarScheduler: CalendarSchedulerViewComponent;\n\n    constructor(@Inject(LOCALE_ID) locale: string, private appService: AppService, private dateAdapter: DateAdapter) {\n        this.locale = locale;\n\n        this.dayModifier = ((day: SchedulerViewDay): void =\u003e {\n            if (!this.isDateValid(day.date)) {\n                day.cssClass = 'cal-disabled';\n            }\n        }).bind(this);\n\n        this.hourModifier = ((hour: SchedulerViewHour): void =\u003e {\n            if (!this.isDateValid(hour.date)) {\n                hour.cssClass = 'cal-disabled';\n            }\n        }).bind(this);\n\n        this.segmentModifier = ((segment: SchedulerViewHourSegment): void =\u003e {\n            if (!this.isDateValid(segment.date)) {\n                segment.isDisabled = true;\n            }\n        }).bind(this);\n\n        this.eventModifier = ((event: CalendarSchedulerEvent): void =\u003e {\n            event.isDisabled = !this.isDateValid(event.start);\n        }).bind(this);\n\n        this.dateOrViewChanged();\n    }\n\n    ngOnInit(): void {\n        this.appService.getEvents(this.actions)\n            .then((events: CalendarSchedulerEvent[]) =\u003e this.events = events);\n    }\n\n    viewDaysOptionChanged(viewDays: number): void {\n        console.log('viewDaysOptionChanged', viewDays);\n        this.calendarScheduler.setViewDays(viewDays);\n    }\n\n    changeDate(date: Date): void {\n        console.log('changeDate', date);\n        this.viewDate = date;\n        this.dateOrViewChanged();\n    }\n\n    changeView(view: CalendarView): void {\n        console.log('changeView', view);\n        this.view = view;\n        this.dateOrViewChanged();\n    }\n\n    dateOrViewChanged(): void {\n        if (this.startsWithToday) {\n            this.prevBtnDisabled = !this.isDateValid(subPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, this.viewDate, 1));\n            this.nextBtnDisabled = !this.isDateValid(addPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, this.viewDate, 1));\n        } else {\n            this.prevBtnDisabled = !this.isDateValid(endOfPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, subPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, this.viewDate, 1)));\n            this.nextBtnDisabled = !this.isDateValid(startOfPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, addPeriod(this.dateAdapter, CalendarView.Day/*this.view*/, this.viewDate, 1)));\n        }\n\n        if (this.viewDate \u003c this.minDate) {\n            this.changeDate(this.minDate);\n        } else if (this.viewDate \u003e this.maxDate) {\n            this.changeDate(this.maxDate);\n        }\n    }\n\n    private isDateValid(date: Date): boolean {\n        return /*isToday(date) ||*/ date \u003e= this.minDate \u0026\u0026 date \u003c= this.maxDate;\n    }\n\n    viewDaysChanged(viewDays: number): void {\n        console.log('viewDaysChanged', viewDays);\n        this.viewDays = viewDays;\n    }\n\n    dayHeaderClicked(day: SchedulerViewDay): void {\n        console.log('dayHeaderClicked Day', day);\n    }\n\n    hourClicked(hour: SchedulerViewHour): void {\n        console.log('hourClicked Hour', hour);\n    }\n\n    segmentClicked(action: string, segment: SchedulerViewHourSegment): void {\n        console.log('segmentClicked Action', action);\n        console.log('segmentClicked Segment', segment);\n    }\n\n    eventClicked(action: string, event: CalendarSchedulerEvent): void {\n        console.log('eventClicked Action', action);\n        console.log('eventClicked Event', event);\n    }\n\n    eventTimesChanged({ event, newStart, newEnd }: SchedulerEventTimesChangedEvent): void {\n        console.log('eventTimesChanged Event', event);\n        console.log('eventTimesChanged New Times', newStart, newEnd);\n        let ev = this.events.find(e =\u003e e.id === event.id);\n        ev.start = newStart;\n        ev.end = newEnd;\n        this.refresh.next();\n    }\n}\n```\n\n#### app.component.html\n\n```html\n    ...\n    \u003cselect #viewDayOptionSelect class=\"form-select\" [ngModel]=\"viewDays\" (change)=\"viewDaysOptionChanged(viewDayOptionSelect.value)\"\u003e\n            \u003coption [value]=\"1\"\u003eOne day\u003c/option\u003e\n            \u003coption [value]=\"3\"\u003eThree days\u003c/option\u003e\n            \u003coption [value]=\"7\"\u003eOne week\u003c/option\u003e\n    \u003c/select\u003e\n    ...\n    \u003ccalendar-scheduler-view *ngSwitchCase=\"CalendarView.Week\"\n                            [viewDays]=\"viewDays\"\n                            [viewDate]=\"viewDate\"\n                            [events]=\"events\"\n                            [locale]=\"locale\"\n                            [responsive]=\"true\"\n                            [weekStartsOn]=\"weekStartsOn\"\n                            [excludeDays]=\"excludeDays\"\n                            [startsWithToday]=\"startsWithToday\"\n                            [hourSegments]=\"hourSegments\"\n                            [dayStartHour]=\"dayStartHour\"\n                            [dayEndHour]=\"dayEndHour\"\n                            [dayModifier]=\"dayModifier\"\n                            [hourModifier]=\"hourModifier\"\n                            [segmentModifier]=\"segmentModifier\"\n                            [eventModifier]=\"eventModifier\"\n                            [showEventActions]=\"true\"\n                            [showSegmentHour]=\"true\"\n                            [zoomEventOnHover]=\"true\"\n                            (viewDaysChanged)=\"viewDaysChanged($event)\"\n                            (dayHeaderClicked)=\"dayHeaderClicked($event.day)\"\n                            (hourClicked)=\"hourClicked($event.hour)\"\n                            (segmentClicked)=\"segmentClicked('Clicked', $event.segment)\"\n                            (eventClicked)=\"eventClicked('Clicked', $event.event)\"\n                            (eventTimesChanged)=\"eventTimesChanged($event)\"\n                            [refresh]=\"refresh\"\u003e\n      \u003c/calendar-scheduler-view\u003e\n    ...\n```\n\n## License\n\nThis software is released under the MIT license. See [LICENSE](LICENSE) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichelebombardi%2Fangular-calendar-scheduler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichelebombardi%2Fangular-calendar-scheduler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichelebombardi%2Fangular-calendar-scheduler/lists"}