Sets/gets the id of the calendar.
If not set, the id will have value "igx-calendar-0".
<igx-calendar id = "my-first-calendar"></igx-calendar>let calendarId = this.calendar.id;Emits an event when a selection is made in the calendar.
Provides reference the selectedDates property in the IgxCalendarComponent.
<igx-calendar (onSelection) = "onSelection($event)"></igx-calendar>Sets/gets whether the calendar header will be in vertical position.
Default value is false.
<igx-calendar [vertical] = "true"></igx-calendar>let isVertical = this.calendar.vertical;Gets the current active view of the calendar.
let activeView = this.calendar.activeView;Gets the context for the template marked with either igxCalendarSubHeaderMonth
or igxCalendarSubHeaderYear directive.
let context = this.calendar.context;Gets the disabled dates descriptors.
let disabledDates = this.calendar.disabledDates;Sets the disabled dates' descriptors.
@ViewChild("MyCalendar")
public calendar: IgCalendarComponent;
ngOnInit(){
this.calendar.disabledDates = [
new DateRangeDescriptor(DateRangeType.Between, [new Date("2020-1-1"), new Date("2020-1-15")]),
new DateRangeDescriptor(DateRangeType.Weekends)];
}Gets the date format options of the calendar.
let dateFormatOptions = this.calendar.formatOptions.Sets the date format options of the calendar.
<igx-calendar> [formatOptions] = "{ day: '2-digit', month: 'short', weekday: 'long', year: 'numeric' }"</igx-calendar>Gets whether the day, month and year should be rendered
according to the locale and formatOptions, if any.
let formatViews = this.calendar.formatViews;Gets whether the day, month and year should be rendered
according to the locale and formatOptions, if any.
<igx-calendar [formatViews] = "{ day: true, month: false, year: true }"></igx-calendar>Gets the context for the template marked with the igxCalendarHeader directive.
let headerContext = this.calendar.headerContext;Gets the header template.
let headerTemplate = this.calendar.headerTeamplate;Sets the header template.
<igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>Gets the locale of the calendar.
Default value is "en".
let locale = this.calendar.locale;Sets the locale of the calendar.
Expects a valid BCP 47 language tag.
Default value is "en".
<igx-calendar [locale] = "de"></igx-calendar>Gets the selection type of the calendar.
Default value is "single".
Changing the type of selection in the calendar resets the currently
selected values if any.
let selectionType = this.calendar.selection;Sets the selection type of the calendar.
<igx-calendar [selection] = "'multi'"></igx-calendar>Gets the special dates descriptors.
let specialDates = this.calendar.specialDates;Sets the special dates' descriptors.
@ViewChild("MyCalendar")
public calendar: IgCalendarComponent;
ngOnInit(){
this.calendar.specialDates = [
new DateRangeDescriptor(DateRangeType.Between, [new Date("2020-1-1"), new Date("2020-1-15")]),
new DateRangeDescriptor(DateRangeType.Weekends)];
}Gets the subheader template.
let subheaderTemplate = this.calendar.subheaderTemplate;Sets the subheader template.
<igx-calendar subheaderTemplate = "igxCalendarSubheader"></igx-calendar>Gets the selected date(s) of the calendar.
When the calendar selection is set to single, it returns
a single Date object.
Otherwise it is an array of Date objects.
let selectedDates = this.calendar.value;Sets the selected date(s) of the calendar.
When the calendar selection is set to single, it accepts
a single Date object.
Otherwise it is an array of Date objects.
this.calendar.value = new Date(`2016-06-12`);Gets the date that is presented in the calendar. By default it is the current date.
let date = this.calendar.viewDate;Sets the date that will be presented in the default view when the calendar renders.
<igx-calendar viewDate = "15/06/2018"></igx-calendar>Gets the start day of the week.
Can return a numeric or an enum representation of the week day.
Defaults to Sunday / 0.
let weekStart = this.calendar.weekStart;Sets the start day of the week.
Can be assigned to a numeric value or to WEEKDAYS enum value.
<igx-calendar [weekStart] = "1"></igx-calendar>Deselects date(s) (based on the selection type).
this.calendar.deselectDate(new Date(`2018-06-12`));
`Selects date(s) (based on the selection type).
this.calendar.selectDate(new Date(`2018-06-12`));
Ignite UI for Angular Calendar - Documentation
The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple or range selection.
Example:
<igx-calendar selection="range"></igx-calendar>