Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcCalendarComponent

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

Element

igc-calendar

Slot

  • The default slot for the calendar.

Slot

title - Renders the title of the calendar header.

Slot

header-date - Renders content instead of the current date/range in the calendar header.

Fires

igcChange - Emitted when calendar changes its value.

Csspart

header - The header element of the calendar.

Csspart

header-title - The header title element of the calendar.

Csspart

header-date - The header date element of the calendar.

Csspart

content - The content element which contains the views and navigation elements of the calendar.

Csspart

navigation - The navigation container element of the calendar.

Csspart

months-navigation - The months navigation button element of the calendar.

Csspart

years-navigation - The years navigation button element of the calendar.

Csspart

years-range - The years range element of the calendar.

Csspart

navigation-buttons - The navigation buttons container of the calendar.

Csspart

navigation-button - Previous/next navigation button of the calendar.

Csspart

days-view-container - The days view container element of the calendar.

Csspart

days-view - Days view element of the calendar.

Csspart

months-view - The months view element of the calendar.

Csspart

years-view - The years view element of the calendar.

Csspart

days-row - Days row element of the calendar.

Csspart

label - Week header label element of the calendar.

Csspart

week-number - Week number element of the calendar.

Csspart

week-number-inner - Week number inner element of the calendar.

Csspart

date - Date element of the calendar.

Csspart

date-inner - Date inner element of the calendar.

Csspart

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

Csspart

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

Csspart

inactive - Inactive date element of the calendar.

Csspart

hidden - Hidden date element of the calendar.

Csspart

weekend - Weekend date element of the calendar.

Csspart

range - Range selected element of the calendar.

Csspart

special - Special date element of the calendar.

Csspart

disabled - Disabled date element of the calendar.

Csspart

single - Single selected date element of the calendar.

Csspart

preview - Range selection preview date element of the calendar.

Csspart

month - Month element of the calendar.

Csspart

month-inner - Month inner element of the calendar.

Csspart

year - Year element of the calendar.

Csspart

year-inner - Year inner element of the calendar.

Csspart

selected - Indicates selected state. Applies to date, month and year elements of the calendar.

Csspart

current - Indicates current state. Applies to date, month and year elements of the calendar.

Hierarchy

Hierarchy

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

Properties

Accessors

Properties

activeView

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

The current active view of the component.

Attr

active-view

formatOptions

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

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

headerOrientation

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

The orientation of the calendar header.

Attr

header-orientation

hideHeader

hideHeader: boolean = false

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

Attr

hide-header

hideOutsideDays

hideOutsideDays: boolean = false

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

Attr

hide-outside-days

locale

locale: string = 'en'

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

Attr

locale

orientation

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

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

Attr

orientation

resourceStrings

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings for localization.

selection

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

Sets the type of selection in the component.

Attr

selection

showWeekNumbers

showWeekNumbers: boolean = false

Whether to show the week numbers.

Attr

show-week-numbers

visibleMonths

visibleMonths: number = 1

The number of months displayed in the days view.

Attr

visible-months

weekStart

weekStart: WeekDays = 'sunday'

Gets/Sets the first day of the week.

Attr

week-start

Static ReadonlytagName

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

Returns the HTML-uppercased qualified name.

MDN Reference

Accessors

activeDate

  • 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

disabledDates

  • set disabledDates(value): void

  • Gets/Sets the disabled dates for the component.

    Parameters

    • value: DateRangeDescriptor[]

    Returns void

specialDates

  • set specialDates(value): void

  • Gets/Sets the special dates for the component.

    Parameters

    • value: DateRangeDescriptor[]

    Returns void

value

  • set value(value): void

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

    Attr

    value

    Parameters

    • value: undefined | Date

    Returns void

values

  • set values(values): void

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

    Attr

    values

    Parameters

    • values: Date[]

    Returns void