A calendar component for Angular 4.0+ that can display events on a month, week or day view. The successor of angular-bootstrap-calendar.
First install through npm:
npm install --save angular-calendar
Next include the CSS file somewhere into your app:
Finally import the calendar module into your apps module:
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.
You can find quick start examples for all common module bundlers in the build-tool-examples folder.
See this comment for how to use with Universal.
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.
The last version of this library that supports 2.x is
0.9.1. However the upgrade from angular 2.x to 4.x is just a matter of changing the dependencies in your package.json and adding the
See the examples list.
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
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 and including hammerjs but your mileage may vary.
All parts of this calendar can be customised via the use of an
ng-template. The recipe for applying one is as follows:
cellTemplatefrom the month view.
<mwl-calendar-month-view [cellTemplate]="cellTemplateId" />
npm installwhile current directory is this repo
npm start to start a development server on port 8000 with auto reload + tests.
npm test to run tests once or
npm run test:watch to continually run tests.
npm run release