Represents a calendar that lets users to select a date value in a variety of different ways.
- Element
-
igc-calendar
- Slots
-
default— The default slot for the calendar. -
title— Renders the title of the calendar header. -
header-date— Renders content instead of the current date/range in the calendar header.
- CSS Parts
-
header— The header element of the calendar. -
header-title— The header title element of the calendar. -
header-date— The header date element of the calendar. -
content— The content element which contains the views and navigation elements of the calendar. -
content-vertical— The content element which contains the views and navigation elements of the calendar in vertical orientation. -
navigation— The navigation container element of the calendar. -
months-navigation— The months navigation button element of the calendar. -
years-navigation— The years navigation button element of the calendar. -
years-range— The years range element of the calendar. -
navigation-buttons— The navigation buttons container of the calendar. -
navigation-button— Previous/next navigation button of the calendar. -
days-view-container— The days view container element of the calendar. -
days-view— Days view element of the calendar. -
months-view— The months view element of the calendar. -
years-view— The years view element of the calendar. -
days-row— Days row element of the calendar. -
months-row— Months row element of the calendar. -
years-row— Years row element of the calendar. -
label— Week header label element of the calendar. -
label-inner— Week header label inner element of the calendar. -
week-number— Week number element of the calendar. -
week-number-inner— Week number inner element of the calendar. -
date— Date element of the calendar. -
date-inner— Date inner element of the calendar. -
first— The first selected date element of the calendar in range selection. Also applies to the week numbers header cell. -
last— The last selected date element of the calendar in range selection. Also applies to the week number of the last rendered week. -
inactive— Inactive date element of the calendar. -
hidden— Hidden date element of the calendar. -
weekend— Weekend date element of the calendar. -
range— Range selected element of the calendar. -
special— Special date element of the calendar. -
disabled— Disabled date element of the calendar. -
single— Single selected date element of the calendar. -
preview— Range selection preview date element of the calendar. -
month— Month element of the calendar. -
month-inner— Month inner element of the calendar. -
year— Year element of the calendar. -
year-inner— Year inner element of the calendar. -
selected— Indicates selected state. Applies to date, month and year elements of the calendar. -
current— Indicates current state. Applies to date, month and year elements of the calendar.
Properties
Section titled "Properties"activeView
Section titled "activeView"The current active view of the component.
activeView: CalendarActiveView = 'days' Defined in src/components/calendar/calendar.ts:251
formatOptions
Section titled "formatOptions"The options used to format the months and the weekdays in the calendar views.
formatOptions: Pick<Intl.DateTimeFormatOptions, "month" | "weekday"> Defined in src/components/calendar/calendar.ts:255
headerOrientation
Section titled "headerOrientation"The orientation of the calendar header.
headerOrientation: CalendarHeaderOrientation = 'horizontal' Defined in src/components/calendar/calendar.ts:226
hideHeader
Section titled "hideHeader"Whether to render the calendar header part.
When the calendar selection is set to multiple the header is always hidden.
hideHeader: boolean = false Defined in src/components/calendar/calendar.ts:218
hideOutsideDays
Section titled "hideOutsideDays"Whether to hide the dates that do not belong to the current active month.
hideOutsideDays: boolean = false Defined in src/components/calendar/calendar.ts:208
orientation
Section titled "orientation"The orientation of the calendar months when more than one month is being shown.
orientation: ContentOrientation = 'horizontal' Defined in src/components/calendar/calendar.ts:235
selection
Section titled "selection"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
Sets the type of selection in the component.
selection: CalendarSelection = 'single' Defined in src/components/calendar/base.ts:135
showWeekNumbers
Section titled "showWeekNumbers"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
Whether to show the week numbers.
showWeekNumbers: boolean = false Defined in src/components/calendar/base.ts:143
visibleMonths
Section titled "visibleMonths"The number of months displayed in the days view.
visibleMonths: number = 1 Defined in src/components/calendar/calendar.ts:243
weekStart
Section titled "weekStart"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
Gets/Sets the first day of the week.
weekStart: WeekDays = 'sunday' Defined in src/components/calendar/base.ts:151
tagName
Section titled "tagName"The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
tagName: "igc-calendar" = 'igc-calendar' Defined in src/components/calendar/calendar.ts:117
Accessors
Section titled "Accessors"activeDate
Section titled "activeDate"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
get activeDate(): any Defined in src/components/calendar/base.ts:119
Get/Set the date which is shown in view and is highlighted. By default it is the current date.
set activeDate(value: string | Date | null | undefined): void Defined in src/components/calendar/base.ts:119
Parameters
- value:
string | Date | null | undefined
Returns void
disabledDates
Section titled "disabledDates"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
get disabledDates(): any Defined in src/components/calendar/base.ts:177
Gets/Sets the disabled dates for the component.
set disabledDates(value: DateRangeDescriptor[] | undefined): void Defined in src/components/calendar/base.ts:177
Parameters
- value:
DateRangeDescriptor[] | undefined
Returns void
specialDates
Section titled "specialDates"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
get specialDates(): any Defined in src/components/calendar/base.ts:161
Gets/Sets the special dates for the component.
set specialDates(value: DateRangeDescriptor[] | undefined): void Defined in src/components/calendar/base.ts:161
Parameters
- value:
DateRangeDescriptor[] | undefined
Returns void
value
Section titled "value"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
get value(): any Defined in src/components/calendar/base.ts:91
The current value of the calendar. Used when selection is set to single
set value(value: string | Date | null | undefined): void Defined in src/components/calendar/base.ts:91
Parameters
- value:
string | Date | null | undefined
Returns void
values
Section titled "values"Inherited from: EventEmitterMixin< IgcCalendarComponentEventMap, Constructor<IgcCalendarBaseComponent> >(IgcCalendarBaseComponent)
get values(): any Defined in src/components/calendar/base.ts:107
The current values of the calendar. Used when selection is set to multiple or range.
set values(values: string | string | Date[] | null | undefined): void Defined in src/components/calendar/base.ts:107
Parameters
- values:
string | string | Date[] | null | undefined
Returns void