Class IgcCalendarComponent

Represents a calendar that lets users to select a date value in a variety of different ways.


  • The default slot for the calendar.

title - Renders the title of the calendar header.

igcChange - Emitted when calendar changes its value.

content - The content container.

days-view - The days view container.

months-view - The months view container.

years-view - The years view container.

header - The header container.

header-title - The header title container.

header-date - The header date container.

navigation - The navigation container.

months-navigation - The months navigation container.

years-navigation - The years navigation container.

years-range - The years range container.

navigation-buttons - The navigation buttons container.

navigation-button - The navigation button container.

navigation-button vertical - The navigation button container when calendar orientation is vertical.

days-view-container - The days view container.



  • SizableInterface<this> & EventEmitterInterface<IgcCalendarBaseEventMap, this> & IgcCalendarBaseComponent<this>
    • IgcCalendarComponent


activeView: "years" | "months" | "days" = 'days'

The active view.

disabledDates: DateRangeDescriptor[]

Gets/sets disabled dates.

formatOptions: Pick<DateTimeFormatOptions, "month" | "weekday"> = ...

The options used to format the months and the weekdays in the calendar views.

headerOrientation: "horizontal" | "vertical" = 'horizontal'

The orientation of the header.

hideHeader: boolean = false

Determines whether the calendar hides its header. Even if set to false, the header is not displayed for multiple selection.

hideOutsideDays: boolean = false

Controls the visibility of the dates that do not belong to the current month.

locale: string = 'en'

Sets the locale used for formatting and displaying the dates in the calendar.

orientation: "horizontal" | "vertical" = 'horizontal'

The orientation of the multiple months displayed in days view.

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings.

selection: "multiple" | "single" | "range" = 'single'

Sets the type of date selection.

showWeekNumbers: boolean = false

Show/hide the week numbers.

size: "small" | "medium" | "large"

Determines the size of the component.

since v4.5.0. Use the --ig-size CSS custom property instead.

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

value?: Date

The current value of the calendar. Used when selection is set to single.

values?: Date[]

The current values of the calendar. Used when selection is set to multiple or range.

visibleMonths: number = 1

The number of months displayed in days view.

    | "sunday"
    | "monday"
    | "tuesday"
    | "wednesday"
    | "thursday"
    | "friday"
    | "saturday" = 'sunday'

Sets the start day of the week.

tagName: "igc-calendar" = 'igc-calendar'

Returns the HTML-uppercased qualified name.

MDN Reference


  • set activeDate(val): void
  • Sets the date which is shown in view and is highlighted. By default it is the current date.


    • val: Date

    Returns void