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

cdr

Section titled "cdr" 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:58

defaultClass

Section titled "defaultClass" 
defaultClass: boolean = true

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:209

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 days view. If not set, the id will have value "igx-days-view-0".

<igx-days-view id="my-days-view"></igx-days-view>
let daysViewId = this.daysView.id;
id: string

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:73

role

Section titled "role" 
role: string = 'grid'

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:81

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

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:112

Example

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

tabIndex

Section titled "tabIndex" 
tabIndex: number = 0

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:77

viewClass

Section titled "viewClass" 
viewClass: true = true

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:84

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"

activeDate

Section titled "activeDate"

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

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

Parameters

Returns void

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

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

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

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

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

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

Parameters

Returns void

hideLeadingDays

Section titled "hideLeadingDays" 
get hideLeadingDays(): boolean

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:149

Returns boolean 

set hideLeadingDays(value: boolean): void

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:144

Parameters

  • value: boolean

Returns void

hideTrailingDays

Section titled "hideTrailingDays" 
get hideTrailingDays(): boolean

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:159

Returns boolean 

set hideTrailingDays(value: boolean): void

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:154

Parameters

  • value: boolean

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

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

Parameters

  • value: string

Returns void

previewRangeDate

Section titled "previewRangeDate"

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

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

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

Returns string

Sets the selection.

 
set selection(value: string): void

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

Parameters

  • value: string

Returns void

showActiveDay

Section titled "showActiveDay" 
get showActiveDay(): boolean

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:168

Returns boolean 

set showActiveDay(value: boolean): void

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:164

Parameters

  • value: boolean

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

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

Parameters

Returns void

standalone

Section titled "standalone" 
set standalone(value: boolean): void

Defined in projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts:92

Parameters

  • value: boolean

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

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

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

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

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

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

Parameters

  • value: number

Returns void

Methods

Section titled "Methods"

deselectDate

Section titled "deselectDate"

Inherited from: IgxCalendarBaseDirective

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

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

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

Parameters

  • value: string | Date | Date[]

Returns void

formattedYears

Section titled "formattedYears"

Inherited from: IgxCalendarBaseDirective 

formattedYears(value: Date): string

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

Parameters

  • value: Date

Returns string

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

Parameters

  • value: string | Date | Date[]

Returns void