angular-calendar
Advanced tools
A calendar component for angular 20.2+ that can display events on a month, week or day view
A calendar component for angular 20.2+ that can display events on a month, week or day view. The successor of angular-bootstrap-calendar.
ng add angular-calendar
First install through npm:
npm install angular-calendar date-fns
Next include the CSS file in the global (not component scoped) styles of your app:
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";
Finally add the calendar to a component in your app:
import { Component } from '@angular/core';
import { DateAdapter, provideCalendar, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarEvent, CalendarView, CalendarDatePipe } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@Component({
imports: [CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe],
providers: [
provideCalendar({
provide: DateAdapter,
useFactory: adapterFactory,
}),
],
template: `
<button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">Previous</button>
<button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
<button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">Next</button>
<h3>{{ viewDate | calendarDate: view + 'ViewTitle' : 'en' }}</h3>
<button (click)="setView(CalendarView.Month)" [class.active]="view === CalendarView.Month">Month</button>
<button (click)="setView(CalendarView.Week)" [class.active]="view === CalendarView.Week">Week</button>
<button (click)="setView(CalendarView.Day)" [class.active]="view === CalendarView.Day">Day</button>
@switch (view) {
@case (CalendarView.Month) {
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events" />
}
@case (CalendarView.Week) {
<mwl-calendar-week-view [viewDate]="viewDate" [events]="events" />
}
@case (CalendarView.Day) {
<mwl-calendar-day-view [viewDate]="viewDate" [events]="events" />
}
}
`,
})
export class MyComponent {
readonly CalendarView = CalendarView;
viewDate = new Date();
events: CalendarEvent[] = [
{
start: new Date(),
title: 'An event',
},
];
setView(view: CalendarView) {
this.view = view;
}
}
In order to allow the most flexibility for all users there is a substantial amount of boilerplate required to get up and running. Please see the demos list for a series of comprehensive examples of how to use this library within your application.
Once you are up and running, to access a full list of options for each component, the individual APIs are documented here: mwl-calendar-month-view, mwl-calendar-week-view and mwl-calendar-day-view.
Please note: angular-calendar uses Scarf to collect anonymized installation analytics. These analytics help support the maintainers of this library. However, if you'd like to opt out, you can do so by setting
scarfSettings.enabled = falsein your project's package.json. Alternatively, you can set the environment variableSCARF_ANALYTICS=falsebefore you install.
To see all available API options, take a look at the auto generated documentation. You may find it helpful to view the examples on the demo page.
Where possible this library will strictly adhere to semver and only introduce API breaking changes in 0.x releases or new major versions post 1.0. The only exception to this is if you are using custom templates or extending the base components to add additional functionality, whereby critical bug fixes may introduce breakages as the internal API changes.
Yes.
| Angular major | Last supported angular-calendar version |
|---|---|
| 20.x and higher | latest version |
| 15.x - 19.x | 0.31.1 |
| 14.x | 0.30.1 |
| 12.x - 13.x | 0.29.0 |
| 6.x - 11.x | 0.28.28 |
| 5.x | 0.24.1 |
| 4.x | 0.22.3 |
| 2.x | 0.9.1 |
No component styles are included with each component to make it easier to override them (otherwise you’d have to use !important on every rule that you customised). Thus you need to import the CSS file separately from node_modules/angular-calendar/css/angular-calendar.css.
When building the calendar some parts were found to be reusable so they were split out into their own modules. Only the bare minimum that is required is included with the calendar, there is no extra code than if there were no dependencies. date-fns especially only imports directly the functions it needs and not the entire library.
Build your own component to replace that view, and use it in place of the one this library provides. It’s impossible to provide a calendar component that meets everyones use cases, hopefully though at least some of the day / week / month view components provided can be customised with the calendars API enough to be of some use to most projects.
As there are so many events to show on each month, it doesn’t provide a lot of value and is just an extra burden to maintain. There is nothing to stop someone from building a new lib like angular-calendar-year-view though ;)
This library is not optimised for mobile. Due to the complex nature of a calendar component, it is non trivial to build a calendar that has a great UX on both desktop and mobile. It is recommended to build your own calendar component for mobile that has a dedicated UX. You may be able to get some degree of mobile support by setting some custom CSS rules for smaller screens on the month view and showing less days on the week view.
All parts of this calendar can be customised via the use of an ng-template. The recipe for applying one is as follows:
cellTemplate from the month view.<mwl-calendar-month-view [cellTemplate]="cellTemplateId" />All evergreen browsers supported by angular.
No! While the demo site uses bootstrap, it isn't a requirement of this library. The styling is designed to adapt to whatever global styling your app has.
corepack enablepnpm install while current directory is this repoRun pnpm start to start a development server on port 8000 with auto reload + tests.
Run pnpm test to run tests once or pnpm test:watch to continually run tests.
pnpm release
0.32.0 (2025-09-01)
super() with any injectablesCalendarWeekViewComponent or CalendarMonthViewComponent components, or using custom templates, all track by helper functions have been removed in favor of @for and inlining the track expression inside the templateBefore:
<ng-template let-day="day" let-trackByEventId="trackByEventId">
<div *ngFor="let event of day.events; trackBy: trackByEventId">{{ event.title }}</div>
</ng-template>
After:
<ng-template let-day="day">
@for (event of day.events; track event.id ?? event) {
<div>{{ event.title }}</div>
}
</ng-template>
FAQs
A calendar component for angular 20.2+ that can display events on a month, week or day view
The npm package angular-calendar receives a total of 89,261 weekly downloads. As such, angular-calendar popularity was classified as popular.
We found that angular-calendar demonstrated a healthy version release cadence and project activity because the last version was released less than 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
175 malicious npm packages (26k+ downloads) used unpkg CDN to host redirect scripts for a credential-phishing campaign targeting 135+ organizations worldwide.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.