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

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

 
id: string

Defined in projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:55

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

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

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

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

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

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"

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

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: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/month-picker/month-picker.component.ts:330

Returns void

ngOnInit

Section titled "ngOnInit"

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

 
ngOnInit(): void

Defined in projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:326

Returns void

selectDate

Section titled "selectDate"

Selects a date.

this.monthPicker.selectDate(new Date(`2018-06-12`));
selectDate(value: Date): Date

Defined in projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts:249

Parameters

  • value: Date

Returns Date