Calendar Views Specification
Calendar views should provide means for instantiating each available view of the igx-calendar component independently from each other. Each view (years, months, days) supports:
- display of years/months/days;
- selection;
- localization;
- formatting;
- keyboard navigation;
As a developer I want to be able to instantiate an years view as a separate component.
<igx-years-view [date]="myDate"></igx-years-view>As a developer I want to be able to bind igx-years-view to a date object from the model.
As a developer I want to be able to implement igx-years-view as a form control.
As a developer I want to be able to apply formatting on the igx-years-view component.
As a developer I want to be able to control the locale for the igx-years-view component.
As a developer I want to be able to implement custom logic when an year is selected.
As a developer I want to be notified when an year is selected.
As an end user I want to be able to pick an year via mouse click.
As an end user I want to be able to navigate to next/previous years with the keyboard.
As an end user I want to be able to scroll through the years with the mouse wheel.
As an end user I want to have the years displayed in different formatting and locale.
Instantiate the years view as a separate component.
public myDate = new Date(1984, 1, 7);<igx-years-view [(ngModel)]="myDate"
[locale]="'fr'"
[yearFormat]="'2-digit'"
(onYearSelection)="onYearSelected($event)">
</igx-years-view>
| Name | Type | Description |
|---|---|---|
| date | Date | An input that gets/sets the selected date of the years view (default is the current date) |
| yearFormat | string | An input that gets/sets the Intl format option of the years view (default is 'numeric') |
| locale | string | An input that gets/sets the locale of the years view (default is 'en') |
| Name | Payload | Description |
|---|---|---|
| onYearSelection | Date | Emits an event when a selection is made in the years view |
As a developer I want to be able to instantiate a months view as a separate component.
<igx-months-view [date]="myDate"></igx-months-view>As a developer I want to be able to bind igx-months-view to a date object from the model.
As a developer I want to be able to implement igx-months-view as a form control.
As a developer I want to be able to apply formatting on the igx-months-view component.
As a developer I want to be able to control the locale for the igx-months-view component.
As a developer I want to be able to implement custom logic when a month is selected.
As a developer I want to be notified when an year is selected.
As an end user I want to be able to pick a month via mouse click.
As an end user I want to be able to navigate through the months with the keyboard.
As an end user I want to have the months displayed in different formatting and locale.
Instantiate the months view as a separate component.
public myDate = new Date(1984, 1, 7);<igx-months-view [(ngModel)]="myDate"
[locale]="'fr'"
[monthFormat]="'2-digit'"
(onMonthSelection)="onMonthSelected($event)">
</igx-months-view>
| Name | Type | Description |
|---|---|---|
| date | Date | An input that gets/sets the selected date of the months view (default is the current date) |
| monthFormat | string | An input that gets/sets the Intl format option of the months view (default is 'short') |
| locale | string | An input that gets/sets the locale of the months view (default is 'en') |
| Name | Payload | Description |
|---|---|---|
| onMonthSelection | Date | Emits an event when a selection is made in the months view |
As a developer I want to be able to instantiate a days view as a separate component.
<igx-days-view [value]="myDate" [viewDate]="myDate"></igx-days-view>As a developer I want to be able to bind igx-days-view to a date object from the model.
As a developer I want to be able to implement igx-days-view as a form control.
As a developer I want to be able to apply formatting on the igx-days-view component.
As a developer I want to be able to control the locale for the igx-days-view component.
As a developer I want to be able to implement custom logic when a day is selected.
As a developer I want to be notified when an year is selected.
As a developer I want to be able to define the starting day of the week: Sun or Mon.
As a developer I want to be able to define the type of selection (single, multi, range).
As a developer I want to mark certain days or a range of days as disabled.
As a developer I want to mark certain days or a range of days as special.
As an end user I want to be able to navigate through the days with the keyboard.
As an end user I want to have the view displayed in different formatting and locale.
As an end user I want to have a visual clue that certain days are disabled or special.
As an end user I want to be able to select a single day within the view.
As an end user I want to be able to select multiple days within the view.
As an end user I want to be able to select a range of days within the view.
Instantiate the days view as a separate component.
public myDate = new Date(1984, 1, 7);<igx-days-view [(ngModel)]="myDate "
[viewDate]="myDate "
[selection]="'single'"
(onDateSelection)="onDaySelected($event)">
</igx-days-view>
| Name | Type | Description |
|---|---|---|
| value | Date or Date[] | An input that gets/sets he current value of the days view. Multi and range selection return an array of selected dates. |
| selection | string | An input that gets/sets the type of selection - 'single', 'multi' or 'range' |
| formatOptions | Object | An input that gets/sets the format options object for the days view. Defaults is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } |
| locale | string | An input that gets/sets the locale of the days view (default is 'en') |
| disabledDates | DateRangeDescriptor[] | An input that gets/sets the disabled days |
| specialDates | DateRangeDescriptor[] | An input that gets/sets the special days |
| Name | Payload | Description |
|---|---|---|
| onDateSelection | ICalendarDate | Emits an event when a selection is made in the days view |