On this page
Angular Calendar Component
The Angular Calendar Component is a versatile, customizable tool for creating responsive calendars in Angular, supporting day, month, and year selection, with global locales.
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.
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
Loading...
Weeks
Set theselectionType toweek to enable selection of entire week. You can also addshowWeekNumber to show week numbers.
Mon | Tue | Wed | Thu | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| 40 | 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| 41 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 42 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 43 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 44 | 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 45 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Loading...
Months
Set theselectionType property tomonth to enable selection of entire months.
Jan | Feb | Mar |
Apr | May | Jun |
Jul | Aug | Sep |
Oct | Nov | Dec |
Loading...
Years
Set theselectionType property toyear to enable years range selection.
2019 | 2020 | 2021 |
2022 | 2023 | 2024 |
2025 | 2026 | 2027 |
2028 | 2029 | 2030 |
Loading...
Multiple calendar panels
Display multiple calendar panels side by side by setting thecalendars property. This can be useful for selecting ranges or comparing dates across different months.
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Loading...
Range selection
Enablerange 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.
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Oct 3, 2025 - Oct 10, 2025
Loading...
Loading...
Disabled dates
The Calendar component includes functionality to disable specific dates, such as weekends or holidays, using thedisabledDates prop. This prop takes an array of dates to determine which dates should be disabled.Other useful props includeminDate andmaxDate to set the minimum and maximum selectable dates. ThedateFilter prop can be used to apply custom logic to determine which dates are selectable.
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
Loading...
Loading...
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.
Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
Loading...
Chinese
Here is an example of the Angular Calendar component with Chinese locale settings.
周一 | 周二 | 周三 | 周四 | 周五 | 周六 | 周日 |
|---|---|---|---|---|---|---|
29日 | 30日 | 1日 | 2日 | 3日 | 4日 | 5日 |
6日 | 7日 | 8日 | 9日 | 10日 | 11日 | 12日 |
13日 | 14日 | 15日 | 16日 | 17日 | 18日 | 19日 |
20日 | 21日 | 22日 | 23日 | 24日 | 25日 | 26日 |
27日 | 28日 | 29日 | 30日 | 31日 | 1日 | 2日 |
3日 | 4日 | 5日 | 6日 | 7日 | 8日 | 9日 |
Loading...
Japanese
Below is an example of the Angular Calendar component with Japanese locale settings.
月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
29日 | 30日 | 1日 | 2日 | 3日 | 4日 | 5日 |
6日 | 7日 | 8日 | 9日 | 10日 | 11日 | 12日 |
13日 | 14日 | 15日 | 16日 | 17日 | 18日 | 19日 |
20日 | 21日 | 22日 | 23日 | 24日 | 25日 | 26日 |
27日 | 28日 | 29日 | 30日 | 31日 | 1日 | 2日 |
3日 | 4日 | 5日 | 6日 | 7日 | 8日 | 9日 |
Loading...
Korean
Here is an example of the Angular Calendar component with Korean locale settings.
월 | 화 | 수 | 목 | 금 | 토 | 일 |
|---|---|---|---|---|---|---|
29일 | 30일 | 1일 | 2일 | 3일 | 4일 | 5일 |
6일 | 7일 | 8일 | 9일 | 10일 | 11일 | 12일 |
13일 | 14일 | 15일 | 16일 | 17일 | 18일 | 19일 |
20일 | 21일 | 22일 | 23일 | 24일 | 25일 | 26일 |
27일 | 28일 | 29일 | 30일 | 31일 | 1일 | 2일 |
3일 | 4일 | 5일 | 6일 | 7일 | 8일 | 9일 |
Loading...
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.
ב׳ | ג׳ | ד׳ | ה׳ | ו׳ | ש׳ | א׳ |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
Loading...
Persian
Example of the Angular Calendar component with Persian locale settings.
د | س | چ | پ | ج | ش | ی |
|---|---|---|---|---|---|---|
۷ | ۸ | ۹ | ۱۰ | ۱۱ | ۱۲ | ۱۳ |
۱۴ | ۱۵ | ۱۶ | ۱۷ | ۱۸ | ۱۹ | ۲۰ |
۲۱ | ۲۲ | ۲۳ | ۲۴ | ۲۵ | ۲۶ | ۲۷ |
۲۸ | ۲۹ | ۳۰ | ۱ | ۲ | ۳ | ۴ |
۵ | ۶ | ۷ | ۸ | ۹ | ۱۰ | ۱۱ |
۱۲ | ۱۳ | ۱۴ | ۱۵ | ۱۶ | ۱۷ | ۱۸ |
Loading...
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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><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'></polygon><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'></polygon></svg>") !default;$calendar-nav-icon-double-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><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'></polygon><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'></polygon></svg>") !default;$calendar-nav-icon-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><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'></polygon></svg>") !default;$calendar-nav-icon-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><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'></polygon></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 componentsimport { CalendarComponent } from '@coreui/angular';@Component({ standalone: true, imports: [CalendarComponent] // ... })export class ...// ng modulesimport { CalendarModule } from '@coreui/angular';@NgModule({ imports: [CalendarModule] // ...})export class ...c-calendar
component
Inputs
| name | description | type | default |
|---|---|---|---|
ariaNextMonthLabel | A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button. | string | Next month |
ariaNextYearLabel | A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality. | string | Next year |
ariaPrevMonthLabel | A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button. | string | Previous month |
ariaPrevYearLabel | A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function. | string | Previous year |
calendarDate | Default date month of the component. | Date | undefined |
calendars | The number of calendars that render on desktop devices. | number | 1 |
dateFilter | Custom function to determine selectable dates. | (date: Date) => boolean) | undefined |
dayFormat | Set the format of day number. | numeric |2-digit |(date: Date) => string | number | numeric |
disabledDates | List of dates that cannot be selected. | (Date |Date[])[] | undefined |
endDate | Initial selected start date. | Date | undefined |
firstDayOfWeek | Sets the first day of a week. | number | 1 (Monday) |
locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
maxDate | Max selectable date. | Date | undefined |
minDate | Min selectable date. | Date | undefined |
navYearFirst | Reorder year-month navigation, and render year first. | boolean | false |
navigation | Show arrows navigation. | boolean | true |
range | Allow range selection. | boolean | undefined |
selectAdjacentDays | Days in adjacent months shown before or after the current month are selectable. This only applies if theshowAdjacentDays option is set totrue. | boolean | false |
selectionType | Specify the type of date selection as day, week, month, or year. | day |week |month |year | day |
showAdjacentDays | Display dates in adjacent months (non-selectable) at the start/end of the current month. | boolean | true |
showWeekNumber | Display ISO week numbers in month view. | boolean | undefined |
startDate | Initial selected start date. | Date | undefined |
weekNumbersLabel | Label displayed over week numbers in the calendar. | string | undefined |
weekdayFormat | Set length or format of day name. | number |long |narrow |short | 2 |
Outputs
| name | description | type |
|---|---|---|
startDateChange | Event emitted onstartDate change | Date |
endDateChange | Event emitted onstartDate change | Date |
dateHover | Event emitted on calendar cell hover | Date |
calendarDateChange | Event emitted on calendar month change | Date |
viewChange | Event emitted onview change | days | months | years |