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.
<igx-calendar [hasHeader]="false"></igx-calendar>
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.
If not set, the id will have value "igx-calendar-0".
<igx-calendar id="my-first-calendar"></igx-calendar>
IgxCalendarComponent
Emits an event when a date is selected.
Provides reference the selectedDates property.
Show/hide week numbers
<igx-calendar [showWeekNumbers]="true"></igx-calendar>
``
Sets/gets whether the calendar header will be in vertical position.
Default value is false.
<igx-calendar [vertical]="true"></igx-calendar>
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 context for the template marked with either igxCalendarSubHeaderMonth
or igxCalendarSubHeaderYear directive.
let context = this.calendar.context;
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 context for the template marked with the igxCalendarHeader directive.
let headerContext = this.calendar.headerContext;
Gets the header template.
let headerTemplate = this.calendar.headerTeamplate;
IgxCalendarComponent
Sets the header template.
<igx-calendar headerTemplateDirective="igxCalendarHeader"></igx-calendar>
IgxCalendarComponent
Gets the header template.
let headerTitleTemplate = this.calendar.headerTitleTeamplate;
IgxCalendarComponent
Sets the header template.
<igx-calendar headerTitleTemplateDirective="igxCalendarHeaderTitle"></igx-calendar>
IgxCalendarComponent
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.
Sets/gets the number of month views displayed.
Default value is 1.
<igx-calendar [monthsViewNumber]="2"></igx-calendar>
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 subheader template.
let subheaderTemplate = this.calendar.subheaderTemplate;
Sets the subheader template.
<igx-calendar subheaderTemplate="igxCalendarSubheader"></igx-calendar>
IgxCalendarComponent
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.
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: