Exciting news!Announcing our $4.6M Series Seed. Learn more
Log in


Package Overview
File Explorer

Advanced tools


A calendar component for angular 12.0+ that can display events on a month, week or day view


Version published
Yearly downloads
increased by35.2%

Weekly downloads



0.29.0 (2021-12-11)


  • angular 12 or higher is now required to use this package
  • if you are implementing your own date adapter you will now need to implement the getTimezoneOffset method
  • week-view: Previously when resizing events the minimum event height would be calculated based on hourSegments, hourSegmentHeight and hourDuration. It now respects the minimumEventHeight input instead.

To restore the old behaviour you will need to set minimumEventHeight appropriately (by default it's 30 so should continue to work as expected for most users)

  • when using the moment date formatter, the day view title format has changed to be locale aware. If you prefer the old behaviour you can restore it by overriding the dayViewTitle method in the moment date formatter like so:
class CustomMomentDateFormatter extends CalendarMomentDateFormatter { public dayViewTitle({ date, locale }: DateFormatterParams): string { return this.moment(date).locale(locale).format('dddd, D MMMM, YYYY'); } }
  • week-view: the drag behaviour now mimicks the resize behaviour where you can drag an event down to move it into the next day. To restore the old behaviour you can use the new validateEventTimesChanged input to control where an event can be dragged.
  • week-view: events on the week and day view will now always be at least 30 pixels high by default. To restore the old behaviour you can set [minimumEventHeight]="1".


  • add support for rtl (caaf96c), closes #1203
  • allow timezone offset to be overridden in the date adapter (96726e1)
  • publish package in ivy partial compilation mode (29eb8c9), closes #1536
  • week-view: add hourDuration option (6a72448), closes #1080
  • week-view: add minimumEventHeight option (7789fda), closes #1192
  • week-view: allow customising where events can be dragged (cd12d3c), closes #1183
  • week-view: allow customising where events can be resized (ba45051), closes #1183

Bug Fixes

  • use locale aware day view title for moment date formatter (acf93a3), closes #1396
  • week-view: allow dragging events to span multiple days (ef5749c), closes #1234
  • week-view: respect minimumEventHeight input when resizing (5f0f6be)



angular 12.0+ calendar



Table of contents


A calendar component for Angular 12.0+ that can display events on a month, week or day view. The successor of angular-bootstrap-calendar.

Getting started

ng add angular-calendar

Manual setup (ng add will do this all for you)

First install through npm:

npm install --save 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 import the calendar module into your apps module:

import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CalendarModule, DateAdapter } from 'angular-calendar'; import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; @NgModule({ imports: [ BrowserAnimationsModule, CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory, }), ], }) export class MyModule {}

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.

If you would like a one on one consultation with me where I can show you the best way to integrate and customise this calendar within your application, then you can get this by becoming a Platinum Sponsor on GitHub.

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 = false in your project's package.json. Alternatively, you can set the environment variable SCARF_ANALYTICS=false before 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.

Breaking changes

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.


Is this library AoT and universal compatible?


What major versions of angular does this library support?

Angular majorLast supported angular-calendar version
12.x and higherlatest version
6.x - 11.x0.28.28

No styles are appearing?

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.

How come there are so many dependencies?

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.

The month, week or day view doesn’t meet my project requirements, but the other views do.

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.

How come there’s no year view like the ng1 version?

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 ;)

Does this calendar work with mobile?

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.

How do I use a custom template?

All parts of this calendar can be customised via the use of an ng-template. The recipe for applying one is as follows:

  • Find the template you would like to customise for the month, week or day view component. You can find all available custom templates by reading the documentation for each component. For this example we will pick the cellTemplate from the month view.
  • Next find the corresponding child component that will render the template by viewing the source. For our example of the month view cell it is this component
  • Now copy the template source for your chosen template into your own component and modify as your see fit.
  • Finally pass the template to the components input: <mwl-calendar-month-view [cellTemplate]="cellTemplateId" />
  • You can see an e2e working example of this here

What is the browser compatibility?

All browsers supported by angular, apart from IE9 as it doesn't support flexbox.

Does this library require bootstrap?

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.

Angular 1 version


Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.


Run npm test to run tests once or npm run test:watch to continually run tests.


  • Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run release



What is angular-calendar?

A calendar component for angular 12.0+ that can display events on a month, week or day view

Is angular-calendar popular?

The npm package angular-calendar receives a total of 74,702 weekly downloads. As such, angular-calendar popularity was classified as popular.

Is angular-calendar well maintained?

We found that angular-calendar demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 11 Dec 2021


Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc