Angular Calendar Component

Calendar

The Angular Calendar Component is a versatile, customizable tool for creating responsive calendars in Angular, supporting day, month, and year selection, with global locales.

Available in Other JavaScript Frameworks

CoreUI Angular Calendar Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Example

Explore the Angular Calendar basic usage through sample code snippets demonstrating its core functionality.

Days

Select specific days using the Angular Calendar component. The example below shows basic usage.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-days',
  imports: [CalendarComponent],
  templateUrl: './calendar-days.component.html'
})
export class CalendarDaysComponent {
  startDate = new Date();
}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" locale="en-US" [startDate]="startDate" />
</div>

Weeks

Set the selectionType to week to enable selection of entire week. You can also add showWeekNumber to show week numbers.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-weeks',
  imports: [CalendarComponent],
  templateUrl: './calendar-weeks.component.html'
})
export class CalendarWeeksComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" selectionType="week" showWeekNumber startDate="2024W42" calendarDate="2024W42" />
</div>

Months

Set the selectionType property to month to enable selection of entire months.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-months',
  imports: [CalendarComponent],
  templateUrl: './calendar-months.component.html'
})
export class CalendarMonthsComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" selectionType="month" />
</div>

Years

Set the selectionType property to year to enable years range selection.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-years',
  imports: [CalendarComponent],
  templateUrl: './calendar-years.component.html'
})
export class CalendarYearsComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" selectionType="year" />
</div>

Multiple calendar panels

Display multiple calendar panels side by side by setting the calendars property. This can be useful for selecting ranges or comparing dates across different months.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-multiple-panels',
  imports: [CalendarComponent],
  templateUrl: './calendar-multiple-panels.component.html'
})
export class CalendarMultiplePanelsComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" calendars="2" />
</div>

Range selection

Enable range selection to allow users to pick a start and end date. This example shows how to configure the Angular Calendar component to handle date ranges.

import { Component, signal } from '@angular/core';
import { ButtonDirective, CalendarComponent } from '@coreui/angular';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'docs-calendar-range-selection',
  imports: [CalendarComponent, DatePipe, ButtonDirective],
  templateUrl: './calendar-range-selection.component.html'
})
export class CalendarRangeSelectionComponent {
  readonly startDate = signal<Date | null>(new Date());
  readonly endDate = signal<Date | null>(
    new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7)
  );

  handleClear() {
    this.endDate.set(null);
    this.startDate.set(null);
  }
}

<div class="d-flex justify-content-center">
  <c-calendar
    [(endDate)]="endDate"
    [(startDate)]="startDate"
    calendars="2"
    class="border rounded"
    range
  />
</div>
<hr>
<button (click)="handleClear()" cButton>Clear</button> {{ startDate() | date }} - {{ endDate() | date }}

Disabled dates

The Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the disabledDates prop. This prop takes an array of dates to determine which dates should be disabled. Other useful props include minDate and maxDate to set the minimum and maximum selectable dates. The dateFilter prop can be used to apply custom logic to determine which dates are selectable.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-disabled-dates',
  imports: [CalendarComponent],
  templateUrl: './calendar-disabled-dates.component.html'
})
export class CalendarDisabledDatesComponent {
  public calendarDate = new Date(2024, 2, 1);
  public disabledDates = [
    [new Date(2024, 2, 4), new Date(2024, 2, 7)], // range of dates that cannot be selected
    new Date(2024, 2, 16), // single date that cannot be selected
    new Date(2024, 3, 16),
    [new Date(2024, 4, 2), new Date(2024, 4, 8)]
  ];
  public maxDate = new Date(2024, 5, 0);
  public minDate = new Date(2024, 0, 1);

  dateFilter = (date: Date | null): boolean => {
    // Sundays cannot be selected
    const day = date?.getDay();
    return day !== 0;
  };
}

<div class="d-flex justify-content-center">
  <c-calendar [calendarDate]="calendarDate"
              [dateFilter]="dateFilter"
              [disabledDates]="disabledDates"
              [maxDate]="maxDate"
              [minDate]="minDate"
              calendars="2"
              class="border rounded"
  />
</div>

Disabling weekends

Pass a function to dateFilter to decide which dates can be selected: it receives a date and returns true when the date is selectable. To disable weekends, return false for Sunday (0) and Saturday (6).

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-disabling-weekends',
  templateUrl: './calendar-disabling-weekends.component.html',
  imports: [CalendarComponent]
})
export class CalendarDisablingWeekendsComponent {
  readonly disableWeekends = (date: Date): boolean => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };
}

<div class="d-flex justify-content-center">
  <c-calendar [dateFilter]="disableWeekends" calendars="2" class="border rounded" locale="en-US" />
</div>

Combining functions and specific dates

Use dateFilter together with disabledDates to disable a rule-based set of dates and a list of specific dates at once. Here weekends and three specific dates cannot be selected.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-combining-functions-and-specific-dates',
  templateUrl: './calendar-combining-functions-and-specific-dates.component.html',
  imports: [CalendarComponent]
})
export class CalendarCombiningFunctionsAndSpecificDatesComponent {
  readonly calendarDate = new Date(2024, 10, 1);
  readonly specificDates = [new Date(2024, 10, 25), new Date(2024, 11, 4), new Date(2024, 11, 12)];

  readonly disableWeekends = (date: Date): boolean => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };
}

<div class="d-flex justify-content-center">
  <c-calendar
    [calendarDate]="calendarDate"
    [dateFilter]="disableWeekends"
    [disabledDates]="specificDates"
    calendars="2"
    class="border rounded"
    locale="en-US"
  />
</div>

Non-english locale

The CoreUI Angular Calendar allows users to display dates in non-English locales, making it suitable for international applications.

Auto

By default, the Calendar component uses the browser’s default locale. However, you can easily configure it to use a different locale supported by the JavaScript Internationalization API. This feature helps create inclusive and accessible applications for a diverse audience.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-auto',
  imports: [CalendarComponent],
  templateUrl: './calendar-auto.component.html'
})
export class CalendarAutoComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" />
</div>

Chinese

Here is an example of the Angular Calendar component with Chinese locale settings.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-chinese',
  imports: [CalendarComponent],
  templateUrl: './calendar-chinese.component.html'
})
export class CalendarChineseComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" locale="zh-CN" />
</div>

Japanese

Below is an example of the Angular Calendar component with Japanese locale settings.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-japanese',
  imports: [CalendarComponent],
  templateUrl: './calendar-japanese.component.html'
})
export class CalendarJapaneseComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" locale="ja" />
</div>

Korean

Here is an example of the Angular Calendar component with Korean locale settings.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-korean',
  imports: [CalendarComponent],
  templateUrl: './calendar-korean.component.html'
})
export class CalendarKoreanComponent {}

<div class="d-flex justify-content-center">
  <c-calendar class="border rounded" locale="ko" />
</div>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

Example of the Angular Calendar component with RTL support, using the Hebrew locale.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-hebrew',
  imports: [CalendarComponent],
  templateUrl: './calendar-hebrew.component.html'
})
export class CalendarHebrewComponent {}

<div class="d-flex justify-content-center" dir="rtl">
  <c-calendar class="border rounded" locale="he-IL" weekdayFormat="narrow" />
</div>

Persian

Example of the Angular Calendar component with Persian locale settings.

import { Component } from '@angular/core';
import { CalendarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-calendar-persian',
  imports: [CalendarComponent],
  templateUrl: './calendar-persian.component.html'
})
export class CalendarPersianComponent {}

<div class="d-flex justify-content-center" dir="rtl">
  <c-calendar class="border rounded" locale="fa-IR" weekdayFormat="narrow"/>
</div>

Format options

monthFormat and yearFormat are available since 5.7.38. You can control the display format of calendar elements using format inputs:

dayFormat - Controls how day numbers are displayed ('numeric', '2-digit', or a function that returns the text)
monthFormat - Controls how month names are displayed in the months view ('long', 'narrow', 'short', 'numeric', or '2-digit')
yearFormat - Controls how years are displayed in the years view ('numeric' or '2-digit')
weekdayFormat - Controls how weekday names are displayed (number for character length, 'long', 'narrow', 'short', or a function that returns the text)

These format options use the JavaScript Intl.DateTimeFormat API and respect the locale input. The navigation keeps the full month name and the numeric year, and screen readers announce each month and year cell by its full name whatever the format.

Keyboard behavior

Each month of the calendar is a grid with one tab stop when it has a date that can take the focus: Tab enters it once and leaves it, and the keys below move inside it. The tab stop sits on the date you focused last while the page shows it, else on the selected date, else on the cell of calendarDate (the first day of its month in the days view, its month or year in the other views) or the closest cell that can take the focus. A selection set from outside, such as a date typed in the picker, takes the place of the date you focused last. A date inside minDate / maxDate that cannot be picked, such as one in disabledDates, still takes the focus and is announced as unavailable (aria-disabled="true"); Enter and Space do nothing there. Dates outside minDate / maxDate, and days of adjacent months without selectAdjacentDays, cannot take the focus. When nothing on the shown page can take the focus, the grid itself takes the tab stop and the arrows move to the limit they point toward.

Key	Action
`ArrowRight`	Move to the next day (the previous one in right-to-left layouts)
`ArrowLeft`	Move to the previous day (the next one in right-to-left layouts)
`ArrowDown`	Move to the same day of the next week
`ArrowUp`	Move to the same day of the previous week
`Home`	Move to the first day of the week
`End`	Move to the last day of the week
`PageDown`	Move to the same day of the next month
`PageUp`	Move to the same day of the previous month
`Shift` + `PageDown`	Move to the same day of the next year
`Shift` + `PageUp`	Move to the same day of the previous year
`Enter` / `Space`	Pick the focused date, as a click does: with `range` the first pick sets the start and the next one the end (or the start again, when it is earlier), and a pick on a complete range clears it
`Tab`	Leave the grid

Past the edge of the shown months, the arrow keys turn the calendar by one month, and so do Home / End on a week that reaches into the next or previous month; all of them stop at minDate / maxDate. A series of PageDown / PageUp presses keeps the day it started from (January 31, February 28, March 31); any other key or a click in the calendar starts a new series, except a key that cannot move the focus any further, such as an arrow at minDate / maxDate, and Shift, Ctrl, Alt or Cmd alone.

In the months and years views the arrows move by cell and by row of three, Home / End move to the first / last cell of the row, PageDown / PageUp turn by a year or by the twelve years of a page, and Enter / Space open the month or year, unless selectionType picks it. With selectionType="week" the week row is the tab stop, named by the days it spans, all four arrows move by a week, and Home / End move to the first / last week of the month. Keys pressed with Alt, Ctrl or Cmd are left to the browser and assistive technology. No key moves the focus outside minDate / maxDate.

The month and year buttons of the navigation open the months and years views, and when the focus is in the calendar it moves to the month or year they show. When the focused date or navigation button goes away, because calendarDate, calendars, navigation, minDate or maxDate changed, the focus stays in the calendar: on the nearest date that can take it when the limits took the focused one, else on the tab stop of the month it was in, else on the first tab stop.

Customizing

CSS variables

The Angular Calendar uses local CSS variables on .calendar for real-time customization. Values for these CSS variables are set via Sass, but they can also be overridden directly in the component for dynamic styling.

--cui-calendar-table-margin: #{$calendar-table-margin};
--cui-calendar-table-cell-size: #{$calendar-table-cell-size};
--cui-calendar-nav-padding: #{$calendar-nav-padding};
--cui-calendar-nav-border-color: #{$calendar-nav-border-color};
--cui-calendar-nav-border: #{$calendar-nav-border-width} solid var(--cui-calendar-nav-border-color);
--cui-calendar-nav-date-color: #{$calendar-nav-date-color};
--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
--cui-calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
--cui-calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
--cui-calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
--cui-calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
--cui-calendar-nav-icon-color: #{$calendar-nav-icon-color};
--cui-calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
--cui-calendar-cell-hover-color: #{$calendar-cell-hover-color};
--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--cui-calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--cui-calendar-cell-today-color: #{$calendar-cell-today-color};
--cui-calendar-cell-week-number-color: #{$calendar-cell-week-number-color};

How to use CSS variables

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}

<c-calendar [ngStyle]="vars" />

SASS variables

$calendar-table-margin:                      .5rem !default;
$calendar-table-cell-size:                   2.75rem !default;

$calendar-nav-padding:                       .5rem !default;
$calendar-nav-border-width:                  1px !default;
$calendar-nav-border-color:                  var(--cui-border-color) !default;
$calendar-nav-date-color:                    var(--cui-body-color) !default;
$calendar-nav-date-hover-color:              var(--cui-primary) !default;
$calendar-nav-icon-width:                    1rem !default;
$calendar-nav-icon-height:                   1rem !default;
$calendar-nav-icon-color:                    var(--cui-tertiary-color) !default;
$calendar-nav-icon-hover-color:              var(--cui-body-color) !default;

$calendar-nav-icon-double-next:              url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'>&lt;polygon fill='#000' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'>&lt;/polygon>&lt;polygon fill='#000' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'>&lt;/polygon>&lt;/svg>") !default;
$calendar-nav-icon-double-prev:              url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'>&lt;polygon fill='#000' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'>&lt;/polygon>&lt;polygon fill='#000' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'>&lt;/polygon>&lt;/svg>") !default;
$calendar-nav-icon-next:                     url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'>&lt;polygon fill='#000' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'>&lt;/polygon>&lt;/svg>") !default;
$calendar-nav-icon-prev:                     url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'>&lt;polygon fill='#000' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'>&lt;/polygon>&lt;/svg>") !default;

$calendar-cell-header-inner-color:           var(--cui-secondary-color) !default;
$calendar-cell-week-number-color:            var(--cui-secondary-color) !default;

$calendar-cell-hover-color:                  var(--cui-body-color) !default;
$calendar-cell-hover-bg:                     var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color:               var(--cui-tertiary-color) !default;

$calendar-cell-focus-box-shadow:             $focus-ring-box-shadow !default;

$calendar-cell-selected-color:               $white !default;
$calendar-cell-selected-bg:                  var(--cui-primary) !default;

$calendar-cell-range-bg:                     rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg:               rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color:     var(--cui-primary) !default;

$calendar-cell-today-color:                  var(--cui-danger) !default;

$calendar-cell-week-number-color:            var(--cui-tertiary-color) !default;

API

Import

// standalone components
import { CalendarComponent } from '@coreui/angular';

@Component({
    standalone: true,
    imports: [CalendarComponent]
    // ...   
})
export class ...

// ng modules
import { CalendarModule } from '@coreui/angular';

@NgModule({
    imports: [CalendarModule]
    // ...
})
export class ...

c-calendar

component

jsx

import { CalendarComponent } from '@coreui/angular-pro'

Props

Property	Default	Type
ariaNextMonthLabel	`'Next month'`	`string`
A string that provides an accessible label for the button that moves to the next month.
ariaNextYearLabel	`'Next year'`	`string`
A string that provides an accessible label for the button that moves to the next year.
ariaPrevMonthLabel	`'Previous month'`	`string`
A string that provides an accessible label for the button that moves to the previous month.
ariaPrevYearLabel	`'Previous year'`	`string`
A string that provides an accessible label for the button that moves to the previous year.
calendarDate	`new Date(new Date().setDate(1)).setHours(0`	`string`, `number`, `Date`
Default date of the component
calendars	`1`	`number`
The number of calendars that render on desktop devices.
dateFilter	-	`DateFilterType`
Custom function to determine selectable dates.
dayFormat	`'numeric'`	`DayFormatType`
Set the format of day number.
disabledDates	`[]`	`(Date \| Date[])[]`
Specify the list of dates that cannot be selected.
endDate	`null`	`string`, `number`, `Date`, `null`
Initial selected to date (range).
firstDayOfWeek	`1`	`DaysOfWeek`
Sets the first day of the week. - `0` - Sunday - `1` - Monday - `2` - Tuesday - `3` - Wednesday - `4` - Thursday - `5` - Friday - `6` - Saturday
locale	`'default'`	`string`
Sets the default locale for components. If not set, it is inherited from the browser.
maxDate	`null`	`string`, `number`, `Date`, `null`
Max selectable date.
minDate	`null`	`string`, `number`, `Date`, `null`
Min selectable date.
monthFormat5.7.38+	`'short'`	`MonthFormatType`
Sets the format of month names in the months view: 'long', 'narrow', 'short', 'numeric' or '2-digit'.
navigation	`true`	`boolean`
Show navigation.
navYearFirst	`false`	`boolean`
Reorder year-month navigation, and render year first.
range	`false`	`boolean`
Allow range selection.
selectAdjacentDays4.4.10+	`false`	`boolean`
Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true.
selectionType5.0.0+	`'day'`	`SelectionType`
Specify the type of date selection as day, week, month, or year.
showAdjacentDays4.4.10+	`true`	`boolean`
Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
showWeekNumber5.0.0+	`false`	`boolean`
Set whether to display ISO week numbers in the calendar.
startDate	`null`	`string`, `number`, `Date`, `null`
Initial selected date.
view	`'days'`	`CalendarView`
Set calendar view: 'days', 'months' or 'years'.
weekdayFormat	`'short'`	`WeekdayFormatType`
Set length or format of day name.
weekNumbersLabel5.0.0+	`undefined`	`string`
Label displayed over week numbers in the calendar.
yearFormat5.7.38+	`'numeric'`	`YearFormatType`
Sets the format of years in the years view: 'numeric' or '2-digit'.

Events

Event name
calendarCellHover
Event emitted on calendar cell hover. `$event` `Date \| null`
calendarDateChange
Event emitted on calendar month change. `$event` `Date`
endDateChange
Event emitted on `endDate` change. `$event` `Date \| null`
startDateChange
Event emitted on `startDate` change. `$event` `Date \| null`
viewChange
Emitted when `view` changes. `$event` `CalendarView`