Calendar provides a way to display date information.
Igx Module
IgxCalendarModule
Igx Theme
igx-calendar-theme, igx-icon-theme
Igx Keywords
calendar, datepicker, schedule, date
Igx Group
Scheduling

Remarks

[object Object][object Object]

Properties

Section titled "Properties"

activeViewChanged

Section titled "activeViewChanged"

Inherited from: IgxCalendarBaseDirective

Emits an event when the active view is changed.

<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
public activeViewChanged(event: CalendarView) {
 let activeView = event;
}
activeViewChanged: EventEmitter<IgxCalendarView>

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:106

hasHeader

Section titled "hasHeader"

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

 
hasHeader: boolean = true

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:115

Example

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

headerOrientation

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

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:133

hideOutsideDays

Section titled "hideOutsideDays"

Inherited from: IgxCalendarBaseDirective

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;
hideOutsideDays: boolean = false

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:71

id

Section titled "id"

Sets/gets the id of the calendar.

 
id: string

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:103

Remarks

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

Example

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

orientation

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

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:130

selected

Section titled "selected"

Inherited from: IgxCalendarBaseDirective

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

 
selected: EventEmitter<Date | Date[]>

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:78

showWeekNumbers

Section titled "showWeekNumbers"

Show/hide week numbers

 
showWeekNumbers: boolean = false

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:166

Example

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

vertical

Section titled "vertical"

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

 
vertical: boolean = false

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:127

Example

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

viewDateChanged

Section titled "viewDateChanged"

Inherited from: IgxCalendarBaseDirective

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;
}
viewDateChanged: EventEmitter<IViewDateChangeEventArgs>

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:92

activeView

Section titled "activeView"

Inherited from: IgxCalendarBaseDirective 

activeView: IgxCalendarView

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:374, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:387

disabledDates

Section titled "disabledDates"

Inherited from: IgxCalendarBaseDirective 

disabledDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:567, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:583

formatOptions

Section titled "formatOptions"

Inherited from: IgxCalendarBaseDirective 

formatOptions: IFormattingOptions

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:338, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:346

formatViews

Section titled "formatViews"

Inherited from: IgxCalendarBaseDirective 

formatViews: IFormattingViews

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:355, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:363

headerTemplate

Section titled "headerTemplate" 
headerTemplate: any

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:299, projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:315

headerTitleTemplate

Section titled "headerTitleTemplate" 
headerTitleTemplate: any

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:270, projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:286

locale

Section titled "locale"

Inherited from: IgxCalendarBaseDirective 

locale: string

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:319, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:327

monthsViewNumber

Section titled "monthsViewNumber" 
monthsViewNumber: number

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:145, projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:149

resourceStrings

Section titled "resourceStrings"

Inherited from: IgxCalendarBaseDirective 

resourceStrings: ICalendarResourceStrings

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:285, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:292

selection

Section titled "selection"

Inherited from: IgxCalendarBaseDirective 

selection: string

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:509, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:516

specialDates

Section titled "specialDates"

Inherited from: IgxCalendarBaseDirective 

specialDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:608, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:624

subheaderTemplate

Section titled "subheaderTemplate" 
subheaderTemplate: any

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:327, projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:343

value

Section titled "value"

Inherited from: IgxCalendarBaseDirective 

value: Date | Date[]

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:636, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:651

viewDate

Section titled "viewDate"

Inherited from: IgxCalendarBaseDirective 

viewDate: Date

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:537, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:544

weekStart

Section titled "weekStart"

Inherited from: IgxCalendarBaseDirective 

weekStart: number

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:302, projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:310

Accessors

Section titled "Accessors"

context

Section titled "context"

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

get context(): object

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:368

Example

let context =  this.calendar.context;

Returns object

headerContext

Section titled "headerContext"

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

get headerContext(): object

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:355

Example

let headerContext =  this.calendar.headerContext;

Returns object

Methods

Section titled "Methods"

deselectDate

Section titled "deselectDate"

Deselects date(s) (based on the selection type).

deselectDate(value: string | Date | Date[]): void

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:1025

Parameters

  • value: string | Date | Date[]

Returns void

Example

this.calendar.deselectDate(new Date(`2018-06-12`));

formattedYears

Section titled "formattedYears"

Inherited from: IgxCalendarBaseDirective 

formattedYears(value: Date): string

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:464

Parameters

  • value: Date

Returns string

ngAfterViewInit

Section titled "ngAfterViewInit"

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

ngAfterViewInit(): void

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:473

Returns void

selectDate

Section titled "selectDate"

Inherited from: IgxCalendarBaseDirective

Selects date(s) (based on the selection type).

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

Defined in projects/igniteui-angular/calendar/src/calendar/calendar-base.ts:719

Parameters

  • value: string | Date | Date[]

Returns void

updateActiveDescendant

Section titled "updateActiveDescendant" 
updateActiveDescendant(date: Date): void

Defined in projects/igniteui-angular/calendar/src/calendar/calendar.component.ts:982

Parameters

  • date: Date

Returns void