Calendar

import { AXCalendarModule } from '@acorex/components/calendar';

Calendar component enables users to view and interact with dates in a structured format. It includes features such as date selection, event management, and navigation between months or years, making it easier to schedule, track, and organize events or appointments.

Overview

In this section, you can test different options of this component and see the output in real time

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Calendar

Georgian

Format

Readonly

Disabled

Formatted string: 2025/03/18
Date value: Tue Mar 18 2025 12:27:01 GMT+0000 (Coordinated Universal Time)

Usage

A simple example of using ax-calendar

Preview

Code

Type

You can choose calendar type like jalali or georgian

Preview

Code

Depth

With depth property you can set view of calendar, like day, month and year

Preview

Code

Disabled Dates

With disabledDates property you can disabled some dates.

Preview

Code

Range

With ax-calendar-range user can select range of date in multiple views.

Preview

Code

Config Calendar

You can set the calendar config globally

app.config.ts

Holiday Loader

Using the holiday loader, you can specify the calendar holidays in a special way

app.config.ts

app.loader.ts

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-calendar-bg-color	N/A	Background color of the calendar.
--ax-comp-calendar-text-color	var(--ax-sys-color-on-lightest-surface)	Text color of the calendar. Uses the system's text color.
--ax-comp-calendar-font-size	0.875rem	Font size for the calendar text.
--ax-comp-calendar-line-height	1.25rem	Line height for the calendar text.
--ax-comp-calendar-view-header-padding	0.5rem	Padding of the calendar view header.
--ax-comp-calendar-view-header-border-color	var(--ax-sys-color-border-lightest-surface)	Border color of the calendar view header. Uses the system's border color.
--ax-comp-calendar-view-header-border-width	1px	Border width of the calendar view header.
--ax-comp-calendar-header-padding-t	0.25rem	Top padding of the calendar header.
--ax-comp-calendar-header-padding-x	0.25rem	Horizontal padding of the calendar header.
--ax-comp-calendar-week-padding-x	0.5rem	Horizontal padding of the calendar week.
--ax-comp-calendar-week-padding-t	0.75rem	Top padding of the calendar week.
--ax-comp-calendar-slot-border-radius	var(--ax-sys-border-radius)	Border radius of the calendar slots. Uses the system's border radius.
--ax-comp-calendar-slot-text-color	var(--ax-sys-color-on-lightest-surface)	Text color for calendar slots (days). Uses the system's text color.
--ax-comp-calendar-slot-ripple-color	var(--ax-sys-color-primary-light-surface), 0.3	Ripple effect color for slot interactions. Uses the primary color with 30% opacity.
--ax-comp-calendar-slot-today-text-color	var(--ax-sys-color-primary-surface)	Text color for the 'today' slot. Uses the primary color.
--ax-comp-calendar-slot-today-border-color	var(--ax-sys-color-primary-surface)	Border color for the 'today' slot. Uses the primary color.
--ax-comp-calendar-slot-today-border-width	1px	Border width of the 'today' slot.
--ax-comp-calendar-slot-hover-bg-color	var(--ax-sys-color-primary-surface)	Background color for hovered slots. Uses the primary color.
--ax-comp-calendar-slot-hover-text-color	var(--ax-sys-color-on-primary-surface)	Text color for hovered slots. Uses the primary text color.
--ax-comp-calendar-slot-focused-border-color	var(--ax-sys-color-border-lightest-surface)	Border color for focused slots. Uses the system's border color.
--ax-comp-calendar-slot-focused-border-width	1px	Border width of focused calendar slots.
--ax-comp-calendar-slot-focused-outline-color	var(--ax-sys-color-primary-surface)	Outline color for focused slots. Uses the primary color.
--ax-comp-calendar-slot-focused-outline-width	2px	Outline width of focused calendar slots.
--ax-comp-calendar-slot-selected-bg-color	var(--ax-sys-color-primary-surface)	Background color for selected slots. Uses the primary color.
--ax-comp-calendar-slot-selected-text-color	var(--ax-sys-color-on-primary-surface)	Text color for selected slots. Uses the primary text color.
--ax-comp-calendar-slot-disabled-opacity	0.5	Opacity of disabled slots (0 = transparent, 1 = opaque).
--ax-comp-calendar-slot-readonly-opacity	0.75	Opacity of readonly slots (0 = transparent, 1 = opaque).
--ax-comp-calendar-slot-holiday-text-color	var(--ax-sys-color-danger-surface)	Text color for holiday slots. Uses the danger color.
--ax-comp-calendar-slot-holiday-ripple-color	var(--ax-sys-color-danger-light-surface), 0.3	Ripple effect color for holiday slot interactions. Uses the danger color with 30% opacity.
--ax-comp-calendar-slot-holiday-today-border-color	var(--ax-sys-color-danger-surface)	Border color for today holiday slot. Uses the danger color.
--ax-comp-calendar-slot-holiday-hover-bg-color	var(--ax-sys-color-danger-surface)	Background color for hovered holiday slots. Uses the danger color.
--ax-comp-calendar-slot-holiday-hover-border-color	var(--ax-sys-color-danger-surface)	Border color for hovered holiday slots. Uses the danger color.
--ax-comp-calendar-slot-holiday-selected-bg-color	var(--ax-sys-color-danger-surface)	Background color for selected holiday slots. Uses the danger color.
--ax-comp-calendar-slot-holiday-selected-text-color	var(--ax-sys-color-on-danger-surface)	Text color for selected holiday slots. Uses the danger text color.
--ax-comp-calendar-slot-range-text-color	var(--ax-sys-color-on-primary-surface)	Text color for slots within a selected date range. Uses the primary text color.
--ax-comp-calendar-slot-range-between-bg-color	var(--ax-sys-color-primary-surface), 0.5	Background color for slots between range start/end. Uses the primary color with 50% opacity.
--ax-comp-calendar-slot-range-start-end-bg-color	var(--ax-sys-color-primary-surface)	Background color for the start/end slots of a range. Uses the primary color.
--ax-comp-calendar-footer-margin-t	1.25rem	Top margin of the calendar footer.
--ax-comp-calendar-footer-today-button-height	var(--ax-sys-size-base)	Height of the 'today' button in the footer. Uses the system's base size.
--ax-comp-calendar-footer-today-button-bg-color	var(--ax-sys-color-primary-surface)	Background color of the 'today' button. Uses the primary color.
--ax-comp-calendar-footer-today-button-border-radius	var(--ax-sys-border-radius)	Border radius of the 'today' button. Uses the system's border radius.
--ax-comp-calendar-footer-today-button-text-color	var(--ax-sys-color-on-primary-surface))	Text color of the 'today' button. Uses the primary text color.
--ax-comp-calendar-footer-today-button-hover-bg-color	var(--ax-sys-color-primary-dark-surface)	Background color of the 'today' button on hover. Uses a darker primary color.
--ax-comp-calendar-footer-today-button-focused-outline-color	var(--ax-sys-color-primary-surface), 1	Outline color of the 'today' button on focus. Uses the primary color.
--ax-comp-calendar-footer-today-button-padding-x	1rem	Horizontal padding of the 'today' button.

Props

type	string	georgian	Specifies the type of the calendar.
readonly	boolean	false	Determines whether the calendar is read-only.
disabled	boolean	false	Disables the calendar.
rtl	boolean	-	Indicates whether the calendar should be displayed in right-to-left mode.
value	-	-	Sets the value of the calendar.
name	-	-	Sets the name of the calendar.
depth	AXCalendarViewDepth	day	Specifies the depth of the calendar view.
activeView	AXCalendarViewType	day	Specifies the active view of the calendar.
minValue	Date	-	Sets the minimum value for the calendar.
maxValue	Date	-	Sets the maximum value for the calendar.
disabledDates	AXCalendarDisabledDates	-	Specifies the dates that are disabled in the calendar.
holidayDates	AXCalendarHolidayDates	-	Specifies the holiday dates in the calendar
cellTemplate	TemplateRef	-	Sets the custom template for calendar cells.
cellClass	AXCalendarCellCssClass	false	Specifies the CSS class for calendar cells.
showNavigation	boolean	true	Determines whether navigation is shown in the calendar.
count	number	1	Specifies the count of months to be displayed in the calendar.
id	string	-	Sets the ID of the calendar.

Methods

onOptionChanged	AXOptionChangedEvent	Specifies the function to be called when an option in the calendar changes.
onBlur	AXFocusEvent	Specifies the function to be called when the calendar loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the button gains focus.
valueChange	Date	Specifies the function to be called when the value of the calendar changes.
minValueChange	Date	Specifies the function to be called when the minimum value of the calendar changes.
maxValueChange	Date	Specifies the function to be called when the maximum value of the calendar changes.
depthChange	AXCalendarViewDepth	Specifies the function to be called when the view depth of the calendar changes.
typeChange	string	Specifies the function to be called when the type of the calendar changes.
activeViewChange	AXCalendarViewType	Specifies the function to be called when the active view of the calendar changes.
disabledDatesChange	AXCalendarDisabledDates	Specifies the function to be called when the disabled dates of the calendar change.
holidayDatesChange	AXCalendarHolidayDates	Specifies the function to be called when the holiday dates of the calendar change.
onNavigate	AXCalendarNavigateEvent	Specifies the function to be called when navigation occurs in the calendar.
onSlotClick	AXCalendarSlotClick	Specifies the function to be called when a slot in the calendar is clicked.
countChange	-	Specifies the function to be called when the count of displayed months in the calendar changes.