Emits an event when the active view is changed.
<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
public activeViewChanged(event: CalendarView) {
let activeView = event;
}
Sets/gets whether the calendar has header.
Default value is true.
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;
Sets/gets the id of the calendar.
Emits an event when a date is selected.
Provides reference the selectedDates property.
Show/hide week numbers
Sets/gets whether the calendar header will be in vertical position.
Default value is false.
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;
}
Gets the current active view.
this.activeView = calendar.activeView;
Sets the current active view.
<igx-calendar [activeView]="year" #calendar></igx-calendar>
calendar.activeView = IgxCalendarView.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 views.
Sets the date format options of the views. 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.
Sets whether the day, month and year should be rendered
according to the locale and formatOptions, if any.
Gets the locale of the calendar.
If not set, defaults to application's locale.
Sets the locale of the calendar.
Expects a valid BCP 47 language tag.
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
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.
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.
Sets the start day of the week.
Can be assigned to a numeric value or to WEEKDAYS enum value.
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.
Selects date(s) (based on the selection type).
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
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: