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.

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

Hierarchy

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

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

activeView

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

The active view.

disabledDates

disabledDates: DateRangeDescriptor[]

Gets/sets disabled dates.

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

hideHeader

hideHeader: boolean = false

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

hideOutsideDays

hideOutsideDays: boolean = false

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

locale

locale: string = 'en'

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

orientation

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

The orientation of the multiple months displayed in days view.

resourceStrings

resourceStrings: IgcCalendarResourceStrings = IgcCalendarResourceStringEN

The resource strings.

selection

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

Sets the type of date selection.

showWeekNumbers

showWeekNumbers: boolean = false

Show/hide the week numbers.

size

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

Determines the size of the component.

Attr

Deprecated

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

specialDates

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

Optional value

value?: Date

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

Optional values

values?: Date[]

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

visibleMonths

visibleMonths: number = 1

The number of months displayed in days view.

weekStart

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

Sets the start day of the week.

Static styles

styles: CSSResult = styles

Static Readonly tagName

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

Accessors

activeDate

  • get activeDate(): Date

  • Returns Date

  • set activeDate(val): void

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

    Parameters

    • val: Date

    Returns void

Methods

emitEvent

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

  • Type parameters

    Type Parameters

    • K extends "igcChange"
    • D extends Date | Date[]

    Parameters

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

    Returns boolean

Static register