angular-calendar: a month, week and day calendar component for Angular 20.2+

What angular-calendar actually renders, and for whom

The library is a set of Angular components that draw a calendar and place your events on it. The README describes it as "a calendar component for angular 20.2+ that can display events on a month, week or day view", and names it the successor of angular-bootstrap-calendar. That scope matters: it is a view layer, not a scheduling backend. It does not store events, resolve conflicts, send invitations or talk to a server. You hand it an array of CalendarEvent objects and it positions them in the current view.

The intended user is an Angular application developer who already has event data and needs a calendar screen inside an existing app, sharing that app's routing, DI and styling. That is a different job from embedding a full scheduling product. The README is explicit that flexibility costs boilerplate: "there is a substantial amount of boilerplate required to get up and running", and it points readers to the demos list for complete examples. Expect to write the navigation buttons, the view switcher and the title yourself, because the library ships directives and pipes for those pieces rather than a finished toolbar.

The mechanism: provideCalendar, a DateAdapter and three view components

The architecture visible in the README is provider-based. You register the calendar through provideCalendar, which binds the DateAdapter token to an adapter factory. The date-fns adapter is imported from angular-calendar/date-adapters/date-fns, and the repository layout confirms it is a real entry point: package.json contains a build:date-adapters script that compiles tsconfig-date-adapters.json and emits both CommonJS and an esm directory under dist/angular-calendar/date-adapters. A moment adapter also exists in the build output, so the date library is a swappable layer rather than hardcoded date logic.

Above that sit three components, mwl-calendar-month-view, mwl-calendar-week-view and mwl-calendar-day-view. Each takes a viewDate and an events array. The README's example switches between them with Angular's @switch block on a CalendarView enum value, so the view is your state, not the component's. Navigation is handled by three directives, mwlCalendarPreviousView, mwlCalendarToday and mwlCalendarNextView, which bind two-way to viewDate and expose viewDateChange. The calendarDate pipe formats the header title from a view name and a locale, as in view + 'ViewTitle' : 'en'.

That split is the design decision worth noting. Directives and pipes instead of a monolithic calendar component mean you can place the controls anywhere in your template and style them as your own buttons. It also means nothing works until you wire it, which is why the README calls the boilerplate substantial. Data flow is one-directional in practice: your component owns viewDate and events, the view components read them, and user interaction comes back through output bindings such as viewDateChange.

Installing angular-calendar and getting a first month view on screen

The README recommends the schematic. Running ng add angular-calendar performs the setup for you, including the steps listed under manual setup.

ng add angular-calendar

If you prefer to do it by hand, the README's manual path installs the library together with date-fns, because the date-fns adapter is the one the example wires up.

npm install angular-calendar date-fns

The stylesheet is not component-scoped. The README shows it imported into the global styles file, and warns that it must not go into component styles.

/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";

Inside your component, import the pieces you use and register the adapter. The README's providers block is the minimum that makes the calendar render.

import { DateAdapter, provideCalendar } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

providers: [
  provideCalendar({
    provide: DateAdapter,
    useFactory: adapterFactory,
  }),
],

With the provider in place, a month view is a single element bound to your state. The README's events array starts with one entry.

events: CalendarEvent[] = [
  {
    start: new Date(),
    title: 'An event',
  },
];

<mwl-calendar-month-view [viewDate]="viewDate" [events]="events" />

After that you should see a month grid with the event placed on today's date. If the grid renders unstyled, the global CSS import is the first thing to check. If the calendar fails to construct, the DateAdapter provider is the second. Note also the README's disclosure that the library uses Scarf for anonymized installation analytics, and that you can opt out by setting scarfSettings.enabled = false in your project's package.json or by setting SCARF_ANALYTICS=false before installing.

Where angular-calendar stops: no scheduler, no timeline, and a version ceiling

The README documents three views. There is no resource scheduler, no multi-column timeline and no drag-to-create feature described in it, even though people search for those things under this project's name. If your requirement is assigning shifts across people or rooms in parallel lanes, this library is the wrong shape, and no amount of template customization turns a month grid into a Gantt chart.

The second constraint is version coupling. The README's compatibility table maps Angular majors to the last supported angular-calendar version: Angular 20.x and higher use the latest version, 15.x to 19.x map to 0.31.1, 14.x to 0.30.1, and 12.x to 13.x to 0.29.0. The current package.json version is 0.32.2, which sits on the latest line. Being on the latest line is a deliberate trade: the library tracks recent Angular releases rather than supporting a long tail.

The third limitation is stated by the maintainers themselves. The README says that while the library adheres to semver and introduces breaking API changes only in 0.x releases or new major versions post 1.0, there is an exception: if you use custom templates or extend the base components, "critical bug fixes may introduce breakages as the internal API changes". Custom templates are the usual reason to pick this library over a closed one, so the most invested users carry the most upgrade risk. That is a real trade-off, not a footnote.

angular-calendar vs FullCalendar for Angular

FullCalendar is the alternative most people compare against, and it is a fair comparison because both render events in month, week and day layouts. The difference is in what each one owns. angular-calendar is a set of Angular components with no built-in toolbar: you supply the buttons, the view switcher and the header text through directives and the calendarDate pipe. FullCalendar's approach is a configured calendar instance, where the toolbar, view names and interaction options are declared as configuration and the library renders the whole surface.

That leads to opposite costs. angular-calendar asks for more template code up front and gives you full control over markup and styling, which is why the README points to the demos list rather than a single canonical example. FullCalendar gives you a working calendar with less wiring, and correspondingly more of the presentation is decided inside the library. Neither is better in the abstract. If your calendar must match an existing design system exactly and you are already in Angular's DI and template model, angular-calendar's directive approach fits naturally. If you want a calendar running in an afternoon and are willing to accept its rendering conventions, FullCalendar is the shorter path. Note that date handling differs too: angular-calendar routes dates through a DateAdapter you provide, with a date-fns adapter in the README example and a moment adapter present in the build output.

Maintenance status, licence and what upgrades cost you

The repository is not archived, and the last push was on 2026-04-08. That is roughly five months before today, so the project is not abandoned, but there is no recent release data to point at and no basis for calling it fast-moving. Treat it as a library that receives maintenance rather than one that ships frequently.

The licence is MIT, which permits commercial use, modification and redistribution provided the copyright notice and permission notice are preserved. That is the extent of what can be said here; the LICENSE file in the repository is the authoritative text and any redistribution question belongs with your own legal review.

Upgrade cost has two components. The first is Angular major versions: because the compatibility table ties each Angular range to a specific angular-calendar version, moving your app from Angular 19 to 20 means moving onto the latest angular-calendar line, not staying put. The second is your own customization surface. If you only bind events and viewDate, upgrades should be mechanical. If you wrote custom templates or extended the base components, the README's semver exception applies to you, and you should read the CHANGELOG.md at the repository root before bumping. There is also a small operational cost in the Scarf analytics disclosure, which you can disable in package.json or via SCARF_ANALYTICS=false.

Editorial conclusion

Adopt angular-calendar when you are on Angular 20.2+ and want month, week and day views that render from a CalendarEvent[] you already own, with navigation directives and a calendarDate pipe handling the chrome. Do not adopt it if you need a scheduler with resource lanes or a timeline, since the README documents three views and nothing else, or if you are pinned below Angular 20 and unwilling to run the older line the version table lists. Before committing, verify three things on your own branch: that ng add or the manual npm install resolves the date-fns peer, that the global stylesheet import lands outside component encapsulation, and that your custom templates do not reach into internals, because the README states critical bug fixes may break custom templates and extended base components.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. mattlewis92/angular-calendar on GitHub
4. Project website
5. README