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;Emits an event when a date is selected.
Provides reference the selectedDates property.
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;
}Sets the current active view.
<igx-calendar [activeView]="1" #calendar></igx-calendar>calendar.activeView = CalendarView.YEAR;Sets the current active view.
<igx-calendar [activeView]="1" #calendar></igx-calendar>calendar.activeView = CalendarView.YEAR;Gets the disabled dates descriptors.
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}];
}Gets the date format options of the days view.
Sets the date format options of the days view. Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' }
Gets whether the day, month and year should be rendered
according to the locale and formatOptions, if any.
Gets whether the day, month and year should be rendered
according to the locale and formatOptions, if any.
Gets the locale of the calendar.
Default value is "en".
Sets the locale of the calendar.
Expects a valid BCP 47 language tag.
Default value is "en".
Gets the selection type.
Default value is "single".
Changing the type of selection resets the currently
selected values if any.
Sets the selection.
Gets the special dates descriptors.
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}];
}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.
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.
Gets the date that is presented. By default it is the current date.
Sets the date that will be presented in the default view when the component renders.
Deselects date(s) (based on the selection type).
Selects date(s) (based on the selection type).
Emits an event when the active view is changed.
<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>public activeViewChanged(event: CalendarView) { let activeView = event; }