Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxCalendarComponent

Calendar provides a way to display date information.

igxmodule

IgxCalendarModule

igxtheme

igx-calendar-theme, igx-icon-theme

igxkeywords

calendar, datepicker, schedule, date

igxgroup

Scheduling

remarks

The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple or range selection.

example:
<igx-calendar selection="range"></igx-calendar>

Hierarchy

Implements

  • AfterViewInit
  • OnDestroy

Index

Properties

Accessors

Methods

Properties

activeViewChanged

activeViewChanged: EventEmitter<IgxCalendarView> = ...

Emits an event when the active view is changed.

<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>

public activeViewChanged(event: CalendarView) {
 let activeView = event;
}

hasHeader

hasHeader: boolean = true

Sets/gets whether the calendar has header. Default value is true.

example
<igx-calendar [hasHeader]="false"></igx-calendar>

hideOutsideDays

hideOutsideDays: boolean = false

Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. Default value is false.

<igx-calendar [hideOutsideDays] = "true"></igx-calendar>

let hideOutsideDays = this.calendar.hideOutsideDays;

id

id: string = ...

Sets/gets the id of the calendar.

remarks

If not set, the id will have value "igx-calendar-0".

example
<igx-calendar id="my-first-calendar"></igx-calendar>
memberof

IgxCalendarComponent

selected

selected: EventEmitter<Date | Date[]> = ...

Emits an event when a date is selected. Provides reference the selectedDates property.

showWeekNumbers

showWeekNumbers: boolean = false

Show/hide week numbers

example
<igx-calendar [showWeekNumbers]="true"></igx-calendar>
``

vertical

vertical: boolean = false

Sets/gets whether the calendar header will be in vertical position. Default value is false.

example
<igx-calendar [vertical] = "true"></igx-calendar>

viewDateChanged

viewDateChanged: EventEmitter<IViewDateChangeEventArgs> = ...

Emits an event when the month in view is changed.

<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>

public viewDateChanged(event: IViewDateChangeEventArgs) {
 let viewDate = event.currentValue;
}

Accessors

activeView

context

  • get context(): { $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) } }

  • Gets the context for the template marked with either igxCalendarSubHeaderMonth or igxCalendarSubHeaderYear directive.

    example
    let context =  this.calendar.context;

    Returns { $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) } }

    • $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • Returns void

      • yearView: (() => void)
          • (): void

          • Returns void

disabledDates

formatOptions

formatViews

headerContext

  • get headerContext(): { $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) } }

  • Gets the context for the template marked with the igxCalendarHeader directive.

    example
    let headerContext =  this.calendar.headerContext;

    Returns { $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) } }

    • $implicit: { date: Date; full: string; index: number; monthView: (() => void); yearView: (() => void) }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • Returns void

      • yearView: (() => void)
          • (): void

          • Returns void

headerTemplate

  • get headerTemplate(): any
  • set headerTemplate(directive: any): void

locale

  • get locale(): string
  • set locale(value: string): void

monthsViewNumber

  • get monthsViewNumber(): number
  • set monthsViewNumber(val: number): void

resourceStrings

selection

  • get selection(): string
  • set selection(value: string): void

specialDates

subheaderTemplate

  • get subheaderTemplate(): any
  • set subheaderTemplate(directive: any): void

value

  • get value(): Date | Date[]
  • set value(value: Date | Date[]): void

viewDate

  • get viewDate(): Date
  • set viewDate(value: Date): void

weekStart

  • get weekStart(): number
  • set weekStart(value: number): void

Methods

deselectDate

  • deselectDate(value?: Date | Date[]): void

ngAfterViewInit

  • ngAfterViewInit(): void

selectDate

  • selectDate(value: Date | Date[]): void

suppressBlur

  • suppressBlur(): void