Angular Calendar

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.

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

--- ### Months Set the `selectionType` property to `month` to enable selection of entire months.

--- ### Years Set the `selectionType` property to `year` to enable years range selection.

--- ## 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.

--- ## 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.

--- ## 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.

--- ## 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.

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

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

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

--- ## 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.

--- ### Persian Example of the Angular Calendar component with Persian locale settings.

| 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 the `showAdjacentDays` option is set to `true`. | `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 on `startDate` change | `Date` | | `endDateChange` | Event emitted on `startDate` change | `Date` | | `dateHover` | Event emitted on calendar cell hover | `Date` | | `calendarDateChange` | Event emitted on calendar month change | `Date` | | `viewChange` | Event emitted on `view` change | `days \| months \| years` |

---