angular-customizable-calendar
Advanced tools
A customizable Angular calendar component
https://twinssbc.github.io/Angular-Customizable-Calendar-Demo/
version 0.1.x supports Angular 6+
Install: npm install angular-customizable-calendar --save
Import the angular-customizable-calendar module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgCalendarModule } from 'angular-customizable-calendar/calendar';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgCalendarModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
Add the directive in the html page
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
<calendar ... [step]="30"></calendar>
<calendar ... [timeInterval]="30"></calendar>
<calendar ... [locale]="calendar.locale"></calendar>
calendar = {
locale: 'en-GB'
};
<calendar ... [markDisabled]="markDisabled"></calendar>
markDisabled = (date: Date) => {
var current = new Date();
return date < current;
}
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
},
formatMonthViewDayHeader: function(date:Date) {
return 'testMDH';
},
formatMonthViewTitle: function(date:Date) {
return 'testMT';
},
formatWeekViewDayHeader: function(date:Date) {
return 'testWDH';
},
formatWeekViewTitle: function(date:Date) {
return 'testWT';
},
formatWeekViewHourColumn: function(date:Date) {
return 'testWH';
},
formatDayViewHourColumn: function(date:Date) {
return 'testDH';
},
formatDayViewTitle: function(date:Date) {
return 'testDT';
}
}
};
<calendar ... startHour="9"></calendar>
<calendar ... endHour="19"></calendar>
<calendar ... (onCurrentDateChanged)="onCurrentDateChanged($event)"></calendar>
onCurrentChanged = (ev: Date) => {
console.log('Currently viewed date: ' + ev);
};
<calendar ... (onRangeChanged)="onRangeChanged($event)"></calendar>
onRangeChanged = (ev: { startTime: Date, endTime: Date }) => {
Events.query(ev, (events) => {
this.eventSource = events;
});
};
<calendar ... (onEventSelected)="onEventSelected($event)"></calendar>
onEventSelected = (event) => {
console.log(event.title);
};
<calendar ... (onTimeSelected)="onTimeSelected($event)"></calendar>
onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
};
<calendar ... (onTitleChanged)="onViewTitleChanged($event)"></calendar>
onViewTitleChanged = (title: string) => {
this.viewTitle = title;
};
There 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.
monthview-primary-with-event
The date that is in current month and having events
monthview-secondary-with-event
The date that is in previous/next month and having events
monthview-selected
The selected date
monthview-current
The current date
monthview-disabled
The disabled date
weekview-with-event
The date having all day events, applied to the day header in week view
week-view-current
The current date, applied to the day header in week view
weekview-selected
The selected date, applied to the day header in week view
weekview-allday-label
Applied to the all day label in week view
dayview-allday-label
Applied to the all day label in day view
calendar-hour-column
Applied to the hour column in both weekview and day view
weekview-normal-event-container
Applied to the normal event section in weekview, you could override the default height
dayview-normal-event-container
Applied to the normal event section in dayview, you could override the default height
Note: 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.
<ng-template #template let-view="view" let-row="row" let-col="col">
{{view.dates[row*7+col].label}}
</ng-template>
<calendar ... [monthviewDisplayEventTemplate]="template"></calendar>
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
...
</ng-template>
<calendar ... [monthviewEventDetailTemplate]="template"></calendar>
<ng-template #template let-viewDate="viewDate">
<div class="custom-day-header"> {{ viewDate.dayHeader }} </div>
</ng-template>
<calendar ... [weekviewHeaderTemplate]="template"></calendar>
<ng-template #template let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [weekviewAllDayEventTemplate]="template"></calendar>
<ng-template #template let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [weekviewNormalEventTemplate]="template"></calendar>
<ng-template #template let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [dayviewAllDayEventTemplate]="template"></calendar>
<ng-template #template let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [dayviewNormalEventTemplate]="template"></calendar>
<ng-template #template let-day="day" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
[ngStyle]="{height: 25*day.events.length+'px'}">
<div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewAllDayEventSectionTemplate]="template"></calendar>
<ng-template #template let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[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'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewNormalEventSectionTemplate]="template"></calendar>
<ng-template #template let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
<div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</ng-template>
<calendar ... [dayviewAllDayEventSectionTemplate]="template"></calendar>
<ng-template #template let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[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'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [dayviewNormalEventSectionTemplate]="template"></calendar>
EventSource is an array of event object which contains at least below fields:
var startTime = new Date(Date.UTC(2014, 4, 8));
var endTime = new Date(Date.UTC(2014, 4, 9));
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.
import { CalendarComponent } from "angular-customizable-calendar/calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent) myCalendar:CalendarComponent;
eventSource;
…
loadEvents: function() {
this.eventSource.push({
title: 'test',
startTime: startTime,
endTime: endTime,
allDay: false
});
this.myCalendar.loadEvents();
}
}
import { CalendarComponent } from "angular-customizable-calendar/calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent) myCalendar:CalendarComponent;
eventSource;
…
previous: function() {
this.myCalendar.previous();
}
}
import { CalendarComponent } from "angular-customizable-calendar/calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent) myCalendar:CalendarComponent;
eventSource;
…
next: function() {
this.myCalendar.next();
}
}
You could use locale option to achieve the localization.
If locale option is not specified, the calendar will use the LOCALE_ID set at the module level.
By 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.
Note 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.
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);
@NgModule({
…
providers: [
{ provide: LOCALE_ID, useValue: 'zh-CN' }
]
})
If you want to change the locale dynamically, you should use locale option instead of LOCALE_ID.
If 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.
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
}
}
};
Error: Cannot read property 'getFullYear' of undefined
Answer: If you bind currentDate like this: [currentDate]="calendar.currentDate". You need to assign calendar.currentDate a valid Date object.
How to switch the calendar to previous/next month programmatically?
Answer: You can change currentDate to the date in previous/next month or call the instance method previous()/next().
Error: Cannot read property 'dayHeaders' of undefined
Answer: Take a look at the Localization section.
FAQs
A customizable Angular calendar component
The npm package angular-customizable-calendar receives a total of 1 weekly downloads. As such, angular-customizable-calendar popularity was classified as not popular.
We found that angular-customizable-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.