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.

fires

igcChange - Emitted when calendar changes its value.

csspart

content - The content container.

csspart

days-view - The days view container.

csspart

months-view - The months view container.

csspart

years-view - The years view container.

csspart

header - The header container.

csspart

header-title - The header title container.

csspart

header-date - The header date container.

csspart

navigation - The navigation container.

csspart

months-navigation - The months navigation container.

csspart

years-navigation - The years navigation container.

csspart

years-range - The years range container.

csspart

navigation-buttons - The navigation buttons container.

csspart

navigation-button - The navigation button container.

csspart

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

csspart

days-view-container - The days view container.

Hierarchy

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

Index

Constructors

Properties

activeDate: Date = ...

Sets the date which is shown in view and is highlighted. By default it is the current date.

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: "vertical" | "horizontal" = '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: "vertical" | "horizontal" = '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.

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

value?: Date

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

values?: Date[]

Тhe 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.

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

Sets the start day of the week.

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

Methods

  • emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean
  • Type Parameters

    • K extends "igcChange"

    • D extends Date | Date[]

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean