{"id":19924051,"url":"https://github.com/twinssbc/angular-customizable-calendar","last_synced_at":"2025-08-13T20:20:22.474Z","repository":{"id":57178246,"uuid":"163669180","full_name":"twinssbc/Angular-Customizable-Calendar","owner":"twinssbc","description":"A customizable Angular calendar component","archived":false,"fork":false,"pushed_at":"2019-01-03T15:08:58.000Z","size":60,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-19T11:54:17.898Z","etag":null,"topics":["angular","calendar","customizable"],"latest_commit_sha":null,"homepage":"https://twinssbc.github.io/Angular-Customizable-Calendar-Demo/","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/twinssbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-31T12:57:21.000Z","updated_at":"2023-05-11T11:02:08.000Z","dependencies_parsed_at":"2022-09-14T02:10:26.467Z","dependency_job_id":null,"html_url":"https://github.com/twinssbc/Angular-Customizable-Calendar","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/twinssbc/Angular-Customizable-Calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngular-Customizable-Calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngular-Customizable-Calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngular-Customizable-Calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngular-Customizable-Calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twinssbc","download_url":"https://codeload.github.com/twinssbc/Angular-Customizable-Calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twinssbc%2FAngular-Customizable-Calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270305723,"owners_count":24562095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","calendar","customizable"],"created_at":"2024-11-12T22:16:13.826Z","updated_at":"2025-08-13T20:20:22.417Z","avatar_url":"https://github.com/twinssbc.png","language":"TypeScript","readme":"# Angular-Customizable-Calendar component\n\nA customizable Angular calendar component\n\n[![Version](https://img.shields.io/npm/v/angular-customizable-calendar/latest.svg)](https://www.npmjs.com/package/angular-customizable-calendar)\n[![GitHub License](https://img.shields.io/github/license/twinssbc/angular-customizable-calendar.svg)](https://raw.githubusercontent.com/twinssbc/Angular-Customizable-Calendar/master/LICENSE)\n\n# Demo\nhttps://twinssbc.github.io/Angular-Customizable-Calendar-Demo/\n\n# Dependency\nversion 0.1.x supports Angular 6+\n\n# Usage\n\nInstall: `npm install angular-customizable-calendar --save`\n\nImport the angular-customizable-calendar module:\n\n``` typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { NgCalendarModule  } from 'angular-customizable-calendar/calendar';\n\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        BrowserModule,\n        AppRoutingModule,\n        NgCalendarModule\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nAdd the directive in the html page\n\n``` html\n    \u003ccalendar [eventSource]=\"eventSource\"\n        [calendarMode]=\"calendar.mode\"\n        [currentDate]=\"calendar.currentDate\"\n        (onCurrentDateChanged)=\"onCurrentDateChanged($event)\"\n        (onRangeChanged)=\"reloadSource(startTime, endTime)\"\n        (onEventSelected)=\"onEventSelected($event)\"\n        (onTitleChanged)=\"onViewTitleChanged($event)\"\n        (onTimeSelected)=\"onTimeSelected($event)\"\n        step=\"30\"\u003e\n        \n    \u003c/calendar\u003e\n```\n\n# Options\n\n* formatDay    \nThe format of the date displayed in the month view.    \nDefault value: 'dd'\n* formatDayHeader    \nThe format of the header displayed in the month view.    \nDefault value: 'EEE'\n* formatDayTitle    \nThe format of the title displayed in the day view.    \nDefault value: 'MMMM dd, yyyy'\n* formatWeekTitle    \nThe format of the title displayed in the week view.    \nDefault value: 'MMMM yyyy, \\'Week\\' w'\n* formatMonthTitle    \nThe format of the title displayed in the month view.    \nDefault value: 'MMMM yyyy'\n* formatWeekViewDayHeader    \nThe format of the header displayed in the week view.    \nDefault value: 'EEE d'\n* formatHourColumn    \nThe format of the hour column displayed in the week and day view.    \nDefault value: 'ha'\n* calendarMode    \nThe initial mode of the calendar.    \nDefault value: 'month'\n* showEventDetail    \nIf set to true, when selecting the date in the month view, the events happened on that day will be shown below.    \nDefault value: true\n* startingDayMonth    \nControl month view starting from which day.    \nDefault value: 0\n* startingDayWeek    \nControl week view starting from which day.     \nDefault value: 0\n* allDayLabel    \nThe text displayed in the allDay column header.    \nDefault value: 'all day'\n* noEventsLabel    \nThe text displayed when there’s no event on the selected date in month view.    \nDefault value: 'No Events'\n* eventSource    \nThe data source of the calendar, when the eventSource is set, the view will be updated accordingly.    \nDefault value: null    \nThe format of the eventSource is described in the EventSource section\n* queryMode    \nIf queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view    \nIf queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.    \nUsers will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.    \nDefault value: 'local'\n* step    \nIt is used to display the event using more accurate time interval in weekview and dayview. For example, if set to 30, then the event will only occupy half of the row height (If timeInterval option uses default value).   The unit is minute. It can be set to 15 or 30.    \nDefault value: 60\n``` html\n        \u003ccalendar ... [step]=\"30\"\u003e\u003c/calendar\u003e\n```\n\n* timeInterval    \nIt is used to display the rows using more accurate time interval in weekview and dayview. For example, if set to 30, then the time interval between each row is 30 mins.  \nThe unit is minute. It should be the factor or multiple of 60, which means 60%timeInterval=0 or timeInterval%60=0.  \nDefault value: 60\n``` html\n        \u003ccalendar ... [timeInterval]=\"30\"\u003e\u003c/calendar\u003e\n```\n\n* autoSelect  \nIf set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month and week view.  \nDefault value: true\n* locale  \nThe locale used to display text in the calendar.  \nDefault value: undefined (which means the local language)\n``` html\n    \u003ccalendar ... [locale]=\"calendar.locale\"\u003e\u003c/calendar\u003e\n```\n``` json\n    calendar = {\n        locale: 'en-GB'\n    };\n```\n* markDisabled    \nThe callback function used to determine if the time should be marked as disabled.    \n``` html\n    \u003ccalendar ... [markDisabled]=\"markDisabled\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    markDisabled = (date: Date) =\u003e {\n        var current = new Date();\n        return date \u003c current;\n    }\n```\n* dateFormatter    \nThe custom date formatter to transform date to text.    \nIf the custom date formatter is not set, the default Angular DatePipe is used.  \nThe format method in dateFormatter is optional, if omitted, the default Angular DatePipe is used.\n``` html\n    \u003ccalendar ... [dateFormatter]=\"calendar.dateFormatter\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    calendar = {\n        dateFormatter: {\n            formatMonthViewDay: function(date:Date) {\n                return date.getDate().toString();\n            },\n            formatMonthViewDayHeader: function(date:Date) {\n                return 'testMDH';\n            },\n            formatMonthViewTitle: function(date:Date) {\n                return 'testMT';\n            },\n            formatWeekViewDayHeader: function(date:Date) {\n                return 'testWDH';\n            },\n            formatWeekViewTitle: function(date:Date) {\n                return 'testWT';\n            },\n            formatWeekViewHourColumn: function(date:Date) {\n                return 'testWH';\n            },\n            formatDayViewHourColumn: function(date:Date) {\n                return 'testDH';\n            },\n            formatDayViewTitle: function(date:Date) {\n                return 'testDT';\n            }\n        }\n    };        \n```\n\n* startHour  \nLimit the weekview and dayview starts from which hour (0-23).  \nDefault value: 0\n``` html\n    \u003ccalendar ... startHour=\"9\"\u003e\u003c/calendar\u003e\n```\n\n* endHour  \nLimit the weekview and dayview ends until which hour (1-24).  \nDefault value: 24\n``` html\n    \u003ccalendar ... endHour=\"19\"\u003e\u003c/calendar\u003e\n```\n\n* onCurrentDateChanged  \nThe callback function triggered when the date that is currently viewed changes.\n``` html\n    \u003ccalendar ... (onCurrentDateChanged)=\"onCurrentDateChanged($event)\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    onCurrentChanged = (ev: Date) =\u003e {\n        console.log('Currently viewed date: ' + ev);\n    };\n```\n* onRangeChanged    \nThe callback function triggered when the range or mode is changed if the queryMode is set to 'remote'.    \nThe ev parameter contains two fields, startTime and endTime.\n``` html\n    \u003ccalendar ... (onRangeChanged)=\"onRangeChanged($event)\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    onRangeChanged = (ev: { startTime: Date, endTime: Date }) =\u003e {\n        Events.query(ev, (events) =\u003e {\n            this.eventSource = events;\n        });\n    };\n```\n* onEventSelected    \nThe callback function triggered when an event is clicked.\n``` html\n    \u003ccalendar ... (onEventSelected)=\"onEventSelected($event)\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    onEventSelected = (event) =\u003e {\n        console.log(event.title);\n    };\n```\n* onTimeSelected    \nThe callback function triggered when a date is selected in the monthview.    \nThe ev parameter contains two fields, selectedTime and events, if there's no event at the selected time, the events field will be either undefined or empty array.\n``` html\n    \u003ccalendar ... (onTimeSelected)=\"onTimeSelected($event)\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    onTimeSelected = (ev: { selectedTime: Date, events: any[] }) =\u003e {\n        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined \u0026\u0026 ev.events.length !== 0));\n    };\n```\n* onTitleChanged    \nThe callback function triggered when the view title is changed\n``` html\n    \u003ccalendar ... (onTitleChanged)=\"onViewTitleChanged($event)\"\u003e\u003c/calendar\u003e\n```\n``` typescript\n    onViewTitleChanged = (title: string) =\u003e {\n        this.viewTitle = title;\n    };\n```\n# View Customization Option\nThere are two ways to customize the look and feel. If you just want to simply change the color or size of certain element, you could override the styles of the predefined css classes. **CSS Customization** section lists some important css classes. If you need to change the layout of certain element, you could refer to the **Template Customization** part.\n\n## CSS Customization  \n\n* monthview-primary-with-event  \nThe date that is in current month and having events\n\n* monthview-secondary-with-event  \nThe date that is in previous/next month and having events\n\n* monthview-selected  \nThe selected date\n\n* monthview-current  \nThe current date\n\n* monthview-disabled  \nThe disabled date\n\n* weekview-with-event  \nThe date having all day events, applied to the day header in week view\n\n* week-view-current  \nThe current date, applied to the day header in week view\n\n* weekview-selected  \nThe selected date, applied to the day header in week view\n\n* weekview-allday-label  \nApplied to the all day label in week view\n\n* dayview-allday-label  \nApplied to the all day label in day view\n\n* calendar-hour-column  \nApplied to the hour column in both weekview and day view\n\n* weekview-normal-event-container  \nApplied to the normal event section in weekview, you could override the default height\n\n* dayview-normal-event-container  \nApplied to the normal event section in dayview, you could override the default height\n\n## Template Customization  \n\nNote: For any css class appear in the customized template, you need to specify the styles by yourself. The styles defined in the calendar component won’t be applied because of the view encapsulation. You could refer to calendar.ts to get the definition of context types.   \n\n* monthviewDisplayEventTemplate    \nType: TemplateRef\\\u003cIMonthViewDisplayEventTemplateContext\\\u003e    \nThe template provides customized view for event displayed in the active monthview\n``` html\n    \u003cng-template #template let-view=\"view\" let-row=\"row\" let-col=\"col\"\u003e\n        {{view.dates[row*7+col].label}}\n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [monthviewDisplayEventTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n* monthviewEventDetailTemplate  \nType: TemplateRef\\\u003cIMonthViewEventDetailTemplateContext\\\u003e    \nThe template provides customized view for event detail section in the monthview\n``` html\n    \u003cng-template #template let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\"\u003e\n    ... \n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [monthviewEventDetailTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n* weekviewHeaderTemplate  \nType: TemplateRef\\\u003cIDisplayWeekViewHeader\\\u003e     \nThe template provides customized view for day header in the weekview \n``` html \n    \u003cng-template #template let-viewDate=\"viewDate\"\u003e \n        \u003cdiv class=\"custom-day-header\"\u003e {{ viewDate.dayHeader }} \u003c/div\u003e \n    \u003c/ng-template\u003e \n \n    \u003ccalendar ... [weekviewHeaderTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n* weekviewAllDayEventTemplate    \nType: TemplateRef\\\u003cIDisplayAllDayEvent\\\u003e    \nThe template provides customized view for all day event in the weekview\n``` html\n    \u003cng-template #template let-displayEvent=\"displayEvent\"\u003e\n        \u003cdiv class=\"calendar-event-inner\"\u003e{{displayEvent.event.title}}\u003c/div\u003e\n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [weekviewAllDayEventTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n* weekviewNormalEventTemplate    \nType: TemplateRef\\\u003cIDisplayEvent\\\u003e    \nThe template provides customized view for normal event in the weekview\n\n``` html\n    \u003cng-template #template let-displayEvent=\"displayEvent\"\u003e\n        \u003cdiv class=\"calendar-event-inner\"\u003e{{displayEvent.event.title}}\u003c/div\u003e\n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [weekviewNormalEventTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* dayviewAllDayEventTemplate  \nType: TemplateRef\\\u003cIDisplayAllDayEvent\\\u003e    \nThe template provides customized view for all day event in the dayview\n``` html\n    \u003cng-template #template let-displayEvent=\"displayEvent\"\u003e\n        \u003cdiv class=\"calendar-event-inner\"\u003e{{displayEvent.event.title}}\u003c/div\u003e\n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [dayviewAllDayEventTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* dayviewNormalEventTemplate  \nType: TemplateRef\\\u003cIDisplayEvent\\\u003e    \nThe template provides customized view for normal event in the dayview\n\n``` html\n    \u003cng-template #template let-displayEvent=\"displayEvent\"\u003e\n        \u003cdiv class=\"calendar-event-inner\"\u003e{{displayEvent.event.title}}\u003c/div\u003e\n    \u003c/ng-template\u003e\n\n    \u003ccalendar ... [dayviewNormalEventTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* weekviewAllDayEventSectionTemplate  \nType: TemplateRef\\\u003cIWeekViewAllDayEventSectionTemplateContext\\\u003e    \nThe template provides customized view for all day event section (table part) in the weekview\n\n``` html\n        \u003cng-template #template let-day=\"day\" let-eventTemplate=\"eventTemplate\"\u003e\n            \u003cdiv [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                 [ngStyle]=\"{height: 25*day.events.length+'px'}\"\u003e\n                \u003cdiv *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                     (click)=\"onEventSelected(displayEvent.event)\"\n                     [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\"\u003e\n                    \u003cng-template [ngTemplateOutlet]=\"eventTemplate\"\n                                 [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\u003e\n                    \u003c/ng-template\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/ng-template\u003e\n\n        \u003ccalendar ... [weekviewAllDayEventSectionTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* weekviewNormalEventSectionTemplate  \nType: TemplateRef\\\u003cIWeekViewNormalEventSectionTemplateContext\\\u003e    \nThe template provides customized view for normal event section (table part) in the weekview\n\n``` html\n        \u003cng-template #template let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\"\u003e\n            \u003cdiv [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\"\u003e\n                \u003cdiv *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                     (click)=\"onEventSelected(displayEvent.event)\"\n                     [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\"\u003e\n                    \u003cng-template [ngTemplateOutlet]=\"eventTemplate\"\n                                 [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\u003e\n                    \u003c/ng-template\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/ng-template\u003e\n\n        \u003ccalendar ... [weekviewNormalEventSectionTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* dayviewAllDayEventSectionTemplate  \nType: TemplateRef\\\u003cIDayViewAllDayEventSectionTemplateContext\\\u003e    \nThe template provides customized view for all day event section (table part) in the dayview\n\n``` html\n        \u003cng-template #template let-allDayEvents=\"allDayEvents\" let-eventTemplate=\"eventTemplate\"\u003e\n            \u003cdiv *ngFor=\"let displayEvent of allDayEvents; let eventIndex=index\"\n                 class=\"calendar-event\" tappable\n                 (click)=\"onEventSelected(displayEvent.event)\"\n                 [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\"\u003e\n                \u003cng-template [ngTemplateOutlet]=\"eventTemplate\"\n                             [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\u003e\n                \u003c/ng-template\u003e\n            \u003c/div\u003e\n        \u003c/ng-template\u003e\n\n        \u003ccalendar ... [dayviewAllDayEventSectionTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n* dayviewNormalEventSectionTemplate  \nType: TemplateRef\\\u003cIDayViewNormalEventSectionTemplateContext\\\u003e    \nThe template provides customized view for normal event section (table part) in the dayview\n\n``` html\n        \u003cng-template #template let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\"\u003e\n            \u003cdiv [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\"\u003e\n                \u003cdiv *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                     (click)=\"onEventSelected(displayEvent.event)\"\n                     [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\"\u003e\n                    \u003cng-template [ngTemplateOutlet]=\"eventTemplate\"\n                                 [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\"\u003e\n                    \u003c/ng-template\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/ng-template\u003e\n\n        \u003ccalendar ... [dayviewNormalEventSectionTemplate]=\"template\"\u003e\u003c/calendar\u003e\n```\n\n# EventSource\n\nEventSource is an array of event object which contains at least below fields:\n\n* title  \n* startTime    \nIf allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.    \nFor example, if an allDay event starting from 2014-05-09, then startTime is\n\n``` javascript\n    var startTime = new Date(Date.UTC(2014, 4, 8));\n```\n\n* endTime  \nIf allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.    \nFor example, if an allDay event ending to 2014-05-10, then endTime is\n``` javascript\n    var endTime = new Date(Date.UTC(2014, 4, 9));\n```\n* allDay  \nIndicates the event is allDay event or regular event\n\n**Note** The calendar only watches for the eventSource reference for performance consideration. That means only you manually reassign the eventSource value, the calendar gets notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend. In case you want to manually insert/remove/update the element in the eventSource array, you can call instance method ‘loadEvents’ event to notify the calendar manually.\n\n# Instance Methods\n* loadEvents  \nWhen this method is called, the calendar will be forced to reload the events in the eventSource array. This is only necessary when you directly modify the element in the eventSource array.\n\n``` typescript\nimport { CalendarComponent } from \"angular-customizable-calendar/calendar\";\n\n@Component({\n    selector: 'page-home',\n    templateUrl: 'home.html'\n})\nexport class HomePage {\n    @ViewChild(CalendarComponent) myCalendar:CalendarComponent;\n    eventSource;\n    …\n    loadEvents: function() {\n        this.eventSource.push({\n            title: 'test',\n            startTime: startTime,\n            endTime: endTime,\n            allDay: false\n        });\n        this.myCalendar.loadEvents();\n    }\n}\n```\n\n* previous  \nNavigate the calendar to previous date range.\n\n``` typescript\nimport { CalendarComponent } from \"angular-customizable-calendar/calendar\";\n\n@Component({\n    selector: 'page-home',\n    templateUrl: 'home.html'\n})\nexport class HomePage {\n    @ViewChild(CalendarComponent) myCalendar:CalendarComponent;\n    eventSource;\n    …\n    previous: function() {\n        this.myCalendar.previous();\n    }\n}\n```\n\n* next  \nNavigate the calendar to next date range.\n\n``` typescript\nimport { CalendarComponent } from \"angular-customizable-calendar/calendar\";\n\n@Component({\n    selector: 'page-home',\n    templateUrl: 'home.html'\n})\nexport class HomePage {\n    @ViewChild(CalendarComponent) myCalendar:CalendarComponent;\n    eventSource;\n    …\n    next: function() {\n        this.myCalendar.next();\n    }\n}\n```\n\n# Localization    \nYou could use *locale* option to achieve the localization.  \nIf locale option is not specified, the calendar will use the LOCALE_ID set at the module level.  \nBy default, the LOCALE_ID is **en-US**. You can override it in the module as below. If you pass **undefined**, the LOCALE_ID will be detected using the browser language setting. But using explicit value is recommended, as browser has different level of localization support.    \nNote that the event detail section in the month view doesn't support *locale* option, only LOCALE_ID takes effect. This is because it uses DatePipe in html directly. You could easily leverage customized event detail template to switch to other locale. \n\n``` typescript\nimport { NgModule, LOCALE_ID } from '@angular/core';\nimport { registerLocaleData } from '@angular/common';\nimport localeZh from '@angular/common/locales/zh';\nregisterLocaleData(localeZh);\n\n@NgModule({\n    …\n    providers: [\n        { provide: LOCALE_ID, useValue: 'zh-CN' }\n    ]\n})\n```\n\nIf you want to change the locale dynamically, you should use *locale* option instead of LOCALE_ID.\n\n# Performance Tuning    \nIf you don’t need localization on certain parts, you can use the custom dateFormatter to override the date transform method. For example, the date in month view usually doesn’t require localization, you could use below code to just display the date part. If the month view day header doesn’t need to include the date, you could also use a string array containing static labels to save the date calculation.\n\n``` html\n\u003ccalendar ... [dateFormatter]=\"calendar.dateFormatter\"\u003e\u003c/calendar\u003e\n```\n``` typescript\ncalendar = {\n    dateFormatter: {\n        formatMonthViewDay: function(date:Date) {\n            return date.getDate().toString();\n        }            \n    }\n};\n```\n\n\n# Common Questions\n* Error: Cannot read property 'getFullYear' of undefined  \nAnswer: If you bind currentDate like this: [currentDate]=\"calendar.currentDate\". You need to assign calendar.currentDate a valid Date object.\n\n* How to switch the calendar to previous/next month programmatically?  \nAnswer: You can change currentDate to the date in previous/next month or call the instance method previous()/next().\n\n* Error: Cannot read property 'dayHeaders' of undefined  \nAnswer: Take a look at the Localization section.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fangular-customizable-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwinssbc%2Fangular-customizable-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwinssbc%2Fangular-customizable-calendar/lists"}