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:117

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:135

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:105

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:132

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:168

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:129

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

Accessors

Section titled "Accessors"

activeView

Section titled "activeView"

Inherited from: IgxCalendarBaseDirective

Gets the current active view.

this.activeView = calendar.activeView;
get activeView(): IgxCalendarView

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

Returns IgxCalendarView

Sets the current active view.

<igx-calendar [activeView]="year" #calendar></igx-calendar>
calendar.activeView = IgxCalendarView.YEAR;
set activeView(val: IgxCalendarView): void

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

Parameters

Returns void

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:370

Example

let context =  this.calendar.context;

Returns object

disabledDates

Section titled "disabledDates"

Inherited from: IgxCalendarBaseDirective

Gets the disabled dates descriptors.

 
get disabledDates(): DateRangeDescriptor[]

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

Returns DateRangeDescriptor[]

Sets the disabled dates' descriptors.

@ViewChild("MyCalendar")
public calendar: IgxCalendarComponent;
ngOnInit(){
   this.calendar.disabledDates = [
    {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
    {type: DateRangeType.Weekends}];
}
set disabledDates(value: DateRangeDescriptor[]): void

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

Parameters

Returns void

formatOptions

Section titled "formatOptions"

Inherited from: IgxCalendarBaseDirective

Gets the date format options of the views.

 
get formatOptions(): IFormattingOptions

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

Returns IFormattingOptions

Sets the date format options of the views. Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' }

 
set formatOptions(formatOptions: IFormattingOptions): void

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

Parameters

Returns void

formatViews

Section titled "formatViews"

Inherited from: IgxCalendarBaseDirective

Gets whether the day, month and year should be rendered according to the locale and formatOptions, if any.

 
get formatViews(): IFormattingViews

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

Returns IFormattingViews

Sets whether the day, month and year should be rendered according to the locale and formatOptions, if any.

 
set formatViews(formatViews: IFormattingViews): void

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

Parameters

Returns void

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:357

Example

let headerContext =  this.calendar.headerContext;

Returns object

headerTemplate

Section titled "headerTemplate"

Gets the header template.

 
get headerTemplate(): any

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

Example

let headerTemplate =  this.calendar.headerTeamplate;

Returns any

Sets the header template.

 
set headerTemplate(directive: any): void

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

Example

<igx-calendar headerTemplateDirective="igxCalendarHeader"></igx-calendar>

Parameters

  • directive: any

Returns void

headerTitleTemplate

Section titled "headerTitleTemplate"

Gets the header template.

 
get headerTitleTemplate(): any

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

Example

let headerTitleTemplate = this.calendar.headerTitleTeamplate;

Returns any

Sets the header template.

 
set headerTitleTemplate(directive: any): void

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

Example

<igx-calendar headerTitleTemplateDirective="igxCalendarHeaderTitle"></igx-calendar>

Parameters

  • directive: any

Returns void

locale

Section titled "locale"

Inherited from: IgxCalendarBaseDirective

Gets the locale of the calendar. If not set, defaults to application's locale.

 
get locale(): string

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

Returns string

Sets the locale of the calendar. Expects a valid BCP 47 language tag.

 
set locale(value: string): void

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

Parameters

  • value: string

Returns void

monthsViewNumber

Section titled "monthsViewNumber"

Sets/gets the number of month views displayed. Default value is 1.

 
get monthsViewNumber(): number

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

Example

<igx-calendar [monthsViewNumber]="2"></igx-calendar>

Returns number 

set monthsViewNumber(val: number): void

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

Parameters

  • val: number

Returns void

resourceStrings

Section titled "resourceStrings"

Inherited from: IgxCalendarBaseDirective

An accessor that returns the resource strings.

 
get resourceStrings(): ICalendarResourceStrings

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

Returns ICalendarResourceStrings

An accessor that sets the resource strings. By default it uses EN resources.

 
set resourceStrings(value: ICalendarResourceStrings): void

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

Parameters

Returns void

selection

Section titled "selection"

Inherited from: IgxCalendarBaseDirective

Gets the selection type. Default value is "single". Changing the type of selection resets the currently selected values if any.

 
get selection(): string

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

Returns string

Sets the selection.

 
set selection(value: string): void

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

Parameters

  • value: string

Returns void

specialDates

Section titled "specialDates"

Inherited from: IgxCalendarBaseDirective

Gets the special dates descriptors.

 
get specialDates(): DateRangeDescriptor[]

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

Returns DateRangeDescriptor[]

Sets the special dates' descriptors.

@ViewChild("MyCalendar")
public calendar: IgxCalendarComponent;
ngOnInit(){
   this.calendar.specialDates = [
    {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
    {type: DateRangeType.Weekends}];
}
set specialDates(value: DateRangeDescriptor[]): void

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

Parameters

Returns void

subheaderTemplate

Section titled "subheaderTemplate"

Gets the subheader template.

 
get subheaderTemplate(): any

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

Example

let subheaderTemplate = this.calendar.subheaderTemplate;

Returns any

Sets the subheader template.

 
set subheaderTemplate(directive: any): void

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

Example

<igx-calendar subheaderTemplate="igxCalendarSubheader"></igx-calendar>

Parameters

  • directive: any

Returns void

value

Section titled "value"

Inherited from: IgxCalendarBaseDirective

Gets the selected date(s).

When selection is set to single, it returns a single Date object. Otherwise it is an array of Date objects.

 
get value(): Date | Date[]

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

Returns Date | Date[]

Sets the selected date(s).

When selection is set to single, it accepts a single Date object. Otherwise it is an array of Date objects.

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

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

Parameters

  • value: string | Date | Date[]

Returns void

viewDate

Section titled "viewDate"

Inherited from: IgxCalendarBaseDirective

Gets the date that is presented. By default it is the current date.

 
get viewDate(): Date

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

Returns Date

Sets the date that will be presented in the default view when the component renders.

 
set viewDate(value: string | Date): void

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

Parameters

  • value: string | Date

Returns void

weekStart

Section titled "weekStart"

Inherited from: IgxCalendarBaseDirective

Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.

 
get weekStart(): number

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

Returns number

Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

 
set weekStart(value: number): void

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

Parameters

  • value: number

Returns void

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:1027

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:475

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:984

Parameters

  • date: Date

Returns void