Class IgcCalendarComponent

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

igc-calendar

  • The default slot for the calendar.

title - Renders the title of the calendar header.

igcChange - Emitted when calendar changes its value.

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.

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.

label - Week header label 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.

last - The last selected date element of the calendar in range selection.

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.

Hierarchy

Hierarchy

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

Properties

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

The current active view of the component.

active-view

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 calendar header.

header-orientation

hideHeader: boolean = false

Whether to render the calendar header part. When the calendar selection is set to multiple the header is always hidden.

hide-header

hideOutsideDays: boolean = false

Whether to show the dates that do not belong to the current active month.

hide-outside-days

locale: string = 'en'

Gets/Sets the locale used for formatting and displaying the dates in the component.

locale

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

The orientation of the calendar months when more than one month is being shown.

orientation

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings for localization.

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

Sets the type of selection in the component.

selection

showWeekNumbers: boolean = false

Whether to show the week numbers.

show-week-numbers

visibleMonths: number = 1

The number of months displayed in the days view.

visible-months

weekStart: WeekDays = 'sunday'

Gets/Sets the first day of the week.

week-start

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

Returns the HTML-uppercased qualified name.

MDN Reference

Accessors

  • set activeDate(value): void
  • Get/Set the date which is shown in view and is highlighted. By default it is the current date.

    Parameters

    • value: Date

    Returns void

  • set disabledDates(value): void
  • Gets/Sets the disabled dates for the component.

    Parameters

    • value: DateRangeDescriptor[]

    Returns void

  • set specialDates(value): void
  • Gets/Sets the special dates for the component.

    Parameters

    • value: DateRangeDescriptor[]

    Returns void

  • set value(value): void
  • The current value of the calendar. Used when selection is set to single

    value

    Parameters

    • value: undefined | Date

    Returns void

  • set values(values): void
  • The current values of the calendar. Used when selection is set to multiple of range.

    values

    Parameters

    • values: Date[]

    Returns void