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

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

Constructors

constructor

Properties

activeView disabledDates formatOptions headerOrientation hideHeader hideOutsideDays locale orientation resourceStrings selection showWeekNumbers size specialDates value? values? visibleMonths weekStart styles tagName

Accessors

activeDate

Methods

emitEvent

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

specialDates

specialDates: DateRangeDescriptor[]

Gets/sets special dates.

Optional value

value?: Date

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

Optional values

values?: Date[]

Тhe 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: Date): 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

  • Type Parameters

    • K extends "igcChange"

    • D extends Date | Date[]

    Parameters

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

    Returns boolean