@angx/ngx-modern-calendar

A calendar for Angular apps — pick a date, block out the days you don't want bookable, and show it in the visitor's own language.

● v3.0.0 MIT Angular 21 · 22 5 languages No dependencies

See it running npm Source

Live demo

The real component, running here

The published package, built and embedded below. Click a date, change month, switch language.

demo Open in a new tab ↗

Usage

Drop it in and listen for a date

install

npm i @angx/ngx-modern-calendar

component.ts

import { NgxModernCalendarComponent }
  from '@angx/ngx-modern-calendar';

@Component({
  imports: [NgxModernCalendarComponent],
  template: `
    <modern-calendar
      language="es"
      [pastDates]="false"
      (dateSelected)="onPick($event)" />
  `,
})

Five languages ship with it — English, Spanish, French, Hebrew and Hindi. Pass a language code and the month names, weekday names and first day of the week all follow. An unknown code falls back to English rather than breaking.

Need a sixth? Pass your own locale object and it wins over the built-in list — you're not limited to what I shipped.

To use it as a booking calendar, turn on datesFilter and supply the dates or weekdays that should be selectable. Everything else is greyed out, and each available date can carry a payload that comes back to you when it's picked.

API

Inputs & outputs

Selector: <modern-calendar>

Name	Type	Default	What it does
language	string	'en'	Built-in locale: `en`, `es`, `fr`, `he` or `hi`. Unknown codes fall back to English.
locale	CalendarLocale	null	A full locale object, for languages beyond the built-in five. Takes precedence over `language`.
selectedDates	Date[]	[]	Dates to render as already selected.
datesFilter	boolean	false	Restrict what can be picked to `availableDates` / `availableWeekDays`.
pastDates	boolean	true	Allow selecting days before today. Set false for booking flows.
availableDates	AvailableDate[]	[]	Specific selectable dates, used when `datesFilter` is on. Each can carry a payload returned on selection.
availableWeekDays	AvailableWeekDay[]	[]	Selectable weekdays, used when `datesFilter` is on — e.g. weekdays only.
firstDayOfWeek	number	null	Override the locale's first day of the week. 0 = Sunday.
dateSelected	output<CalendarSelection>	—	Emits the picked date plus any payload attached to it.
monthChanged	output<Date>	—	Emits the first of the month whenever the visible month changes — useful for fetching that month's availability.

Locale objects and the full type definitions are documented in the repository README.

Free to use, MIT licensed

Use it, fork it, ship it. Issues and pull requests are welcome.

Install from npm Source

← All my open source work