From 17b5c9ebab7d09ceccf93e312d66cdbe4e801d33 Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Thu, 7 Mar 2019 18:48:44 +0200 Subject: [PATCH 1/3] docs(calendar): Added sample for calendar views #3855 --- en/components/calendar.md | 89 +++++++++++++++++++++++++++++---------- jp/components/calendar.md | 13 ++++++ kr/components/calendar.md | 69 ++++++++++++++++++++++-------- 3 files changed, 132 insertions(+), 39 deletions(-) diff --git a/en/components/calendar.md b/en/components/calendar.md index 0d9125b4b9..f2e8d42ccc 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -39,12 +39,13 @@ import { IgxCalendarComponent } from 'igniteui-angular'; @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent; ``` -> [!WARNING] +> [!NOTE] > Note that the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) uses the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) WebAPI for localization and formatting of dates. > Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. -### Selection +#### Selection Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) property: + ```html @@ -54,7 +55,9 @@ Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/i ``` + Notice that the calendar header is not rendered when the selection is either `multi` or `range`: +
@@ -62,7 +65,7 @@ Notice that the calendar header is not rendered when the selection is either `mu -###Localization and formatting +#### Localization and formatting Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews).
@@ -113,7 +116,7 @@ Great, we should now have a calendar with customized dates display that also cha -### Events +#### Events Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event: ```html @@ -146,9 +149,9 @@ Let's try this out by playing around with selecting ranges: -### Templating +#### Templating -We have seen how to make use of the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API (properties, events, methods) so that we configure the calendar per our requirements and interact with it programatically. Now we want to go further and customize its look, benefiting from the header and subheader templating capabilities. +We have seen how to make use of the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API (properties, events, methods) so that we configure the calendar per our requirements and interact with it programmatically. Now we want to go further and customize its look, benefiting from the header and subheader templating capabilities. To do that we need to decorate a ng-template inside the calendar with **igxCalendarHeader** or **igxCalendarSubheader** directive and use the context returned to customize the way the date is displayed. The template decorated with the **igxCalendarHeader** directive is rendered only when the calendar selection is set to single. The **igxCalendarSubheader** is available in all selection modes. @@ -228,7 +231,7 @@ Having implemented this conditional templating and date parsing we should get co -### Disabled dates +#### Disabled dates This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) descriptor. ```typescript @@ -258,7 +261,6 @@ export class CalendarSample6Component { this.calendar.disabledDates = [{ type: DateRangeType.Specific, dateRange: this.range }]; } } - ``` This is the result. @@ -270,8 +272,7 @@ This is the result. - -### Special dates +#### Special dates [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates). @@ -323,21 +324,56 @@ Result: +### Views +There are separate views provided by the [`IgxCalendarModule`]({environment:angularApiUrl}/classes/igxcalendarmodule.html) that can be used independently: +- Days View - `igx-days-view` +- Months View - `igx-months-view` +- Years View - `igx-years-view` + +
+ +
+
+ +
+ ### Keyboard navigation -When the [**igxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) component is focused: -- `PageUp` will move to the previous month. -- `PageDown` will move to the next month. -- `Shift + PageUp` will move to the previous year. -- `Shift + PageDown` will move to the next year. -- `Home` will focus the first day of the current month that is in view. -- `End` will focus the last day of the current month that is in view. - -When a day inside the current month is focused: -- Arrow keys will navigate through the days. -- `Enter` will select the currently focused day. +When the [**igxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) component is focused, use: +- PageUp key to move to the previous month, +- PageDown key to move to the next month, +- Shift + PageUp keys to move to the previous year, +- Shift + PageDown keys to move to the next year, +- Home key to focus the first day of the current month that is into view, +- End key to focus the last day of the current month that is into view, +- Tab key to navigate through the subheader buttons; + +When `prev` or `next` month buttons (in the subheader) are focused, use: +- Space or Enter key to scroll into view the next or previous month. + +When `months` button (in the subheader) is focused, use: +- Space or Enter key to open the months view. + +When `year` button (in the subheader) is focused, use: +- Space or Enter key to open the decade view. + +When a day inside the current month is focused, use: +- Arrow keys to navigate through the days, +- Arrow keys to navigation to previous/next month as well, +- Enter key to select the currently focused day. + +When a month inside the months view is focused, use: +- Arrow keys to navigate through the months, +- Home key to focus the first month inside the months view, +- End key to focus the last month inside the months view, +- Enter key to select the currently focused month and close the view. + +When an year inside the decade view is focused, use: +- Arrow keys to navigate through the years, +- Enter key to select the currently focused year and close the view. +
-### API +### API References
* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) @@ -345,3 +381,12 @@ When a day inside the current month is focused: * [DateRangeType]({environment:angularApiUrl}/enums/daterangetype.html) * [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) +
+ +### Additional Resources +
+Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + diff --git a/jp/components/calendar.md b/jp/components/calendar.md index 6ab58feaa5..c7a317cfed 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -332,6 +332,19 @@ export class CalendarSample7Component { +### Views +There are separate views provided by the [`IgxCalendarModule`]({environment:angularApiUrl}/classes/igxcalendarmodule.html) that can be used independently: +- Days View - `igx-days-view` +- Months View - `igx-months-view` +- Years View - `igx-years-view` + +
+ +
+
+ +
+ ### キーボード ナビゲーション [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) コンポーネントがフォーカスを持つ場合: diff --git a/kr/components/calendar.md b/kr/components/calendar.md index 80e0a30883..b016664a77 100644 --- a/kr/components/calendar.md +++ b/kr/components/calendar.md @@ -44,7 +44,7 @@ import { IgxCalendarComponent } from 'igniteui-angular'; > Note that the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) uses the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) WebAPI for localization and formatting of dates. > Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. -### Selection +#### Selection Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) property: ```html @@ -63,7 +63,7 @@ Notice that the calendar header is not rendered when the selection is either `mu -###Localization and formatting +#### Localization and formatting Due to their very nature, localization and formatting are essential to any calendar. In the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) those are controlled and customized through the following properties - [`locale`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#locale), [`formatOptions`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatoptions), [`formatViews`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#formatviews).
@@ -114,7 +114,7 @@ Great, we should now have a calendar with customized dates display that also cha -### Events +#### Events Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event: ```html @@ -147,7 +147,7 @@ Let's try this out by playing around with selecting ranges: -### Templating +#### Templating We have seen how to make use of the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) API (properties, events, methods) so that we configure the calendar per our requirements and interact with it programatically. Now we want to go further and customize its look, benefiting from the header and subheader templating capabilities. @@ -229,7 +229,7 @@ Having implemented this conditional templating and date parsing we should get co -### Disabled dates +#### Disabled dates This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) descriptor. ```typescript @@ -272,7 +272,7 @@ This is the result. -### Special dates +#### Special dates [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates) feature is using almost the same configuration principles as [`Disabled dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates). The difference here is dates `styling` and `interaction`. You are able to select and focus [`Special dates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#specialdates). @@ -324,18 +324,53 @@ Result: +### Views +There are separate views provided by the [`IgxCalendarModule`]({environment:angularApiUrl}/classes/igxcalendarmodule.html) that can be used independently: +- Days View - `igx-days-view` +- Months View - `igx-months-view` +- Years View - `igx-years-view` + +
+ +
+
+ +
+ ### Keyboard navigation -When the [**igxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) component is focused: -- `PageUp` will move to the previous month. -- `PageDown` will move to the next month. -- `Shift + PageUp` will move to the previous year. -- `Shift + PageDown` will move to the next year. -- `Home` will focus the first day of the current month that is in view. -- `End` will focus the last day of the current month that is in view. - -When a day inside the current month is focused: -- Arrow keys will navigate through the days. -- `Enter` will select the currently focused day. +When the [**igxCalendar**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) component is focused, use: +- PageUp key to move to the previous month, +- PageDown key to move to the next month, +- Shift + PageUp keys to move to the previous year, +- Shift + PageDown keys to move to the next year, +- Home key to focus the first day of the current month that is into view, +- End key to focus the last day of the current month that is into view, +- Tab key to navigate through the subheader buttons; + +When `prev` or `next` month buttons (in the subheader) are focused, use: +- Space or Enter key to scroll into view the next or previous month. + +When `months` button (in the subheader) is focused, use: +- Space or Enter key to open the months view. + +When `year` button (in the subheader) is focused, use: +- Space or Enter key to open the decade view. + +When a day inside the current month is focused, use: +- Arrow keys to navigate through the days, +- Arrow keys to navigation to previous/next month as well, +- Enter key to select the currently focused day. + +When a month inside the months view is focused, use: +- Arrow keys to navigate through the months, +- Home key to focus the first month inside the months view, +- End key to focus the last month inside the months view, +- Enter key to select the currently focused month and close the view. + +When an year inside the decade view is focused, use: +- Arrow keys to navigate through the years, +- Enter key to select the currently focused year and close the view. +
### API From 04bfce055e4e1416415e74f172adbfe6ec4d0d5c Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Mon, 11 Mar 2019 14:30:22 +0200 Subject: [PATCH 2/3] fix(calendar): Fixed typo #1098 --- en/components/calendar.md | 2 +- kr/components/calendar.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/en/components/calendar.md b/en/components/calendar.md index f2e8d42ccc..d501b3f6c3 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -358,7 +358,7 @@ When `year` button (in the subheader) is focused, use: When a day inside the current month is focused, use: - Arrow keys to navigate through the days, -- Arrow keys to navigation to previous/next month as well, +- Arrow keys to navigate to previous/next month as well, - Enter key to select the currently focused day. When a month inside the months view is focused, use: diff --git a/kr/components/calendar.md b/kr/components/calendar.md index b016664a77..78b46f6520 100644 --- a/kr/components/calendar.md +++ b/kr/components/calendar.md @@ -358,7 +358,7 @@ When `year` button (in the subheader) is focused, use: When a day inside the current month is focused, use: - Arrow keys to navigate through the days, -- Arrow keys to navigation to previous/next month as well, +- Arrow keys to navigate to previous/next month as well, - Enter key to select the currently focused day. When a month inside the months view is focused, use: From 15c4082f5ccf2cec348e2c17e7947188aac3f2c6 Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Mon, 11 Mar 2019 17:36:08 +0200 Subject: [PATCH 3/3] fix(calendar): Fixed API links #1098 --- en/components/calendar.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/en/components/calendar.md b/en/components/calendar.md index 435d04bb03..c594dccb61 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -44,7 +44,7 @@ import { IgxCalendarComponent } from 'igniteui-angular'; > Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. #### Selection -Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) property: +Instantiating the [`IgxCalendarComponent`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) is as easy as placing its selector element in the template. This will display the current month in the calendar and use single selection mode. We switch to any of the other selection modes - `multi` and `range`, by setting the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) property: ```html @@ -117,7 +117,7 @@ Great, we should now have a calendar with customized dates display that also cha #### Events -Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event: +Let's build on top of that sample a bit. We will require the user to enter a date range that does not exceed 5 days. We need to change the [`selection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#selection) mode of the calendar to "range" and prompt the user to correct the selection, if the range is not valid. To do this we will use the [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarbase.html#onselection) event: ```html @@ -232,7 +232,7 @@ Having implemented this conditional templating and date parsing we should get co #### Disabled dates -This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#disableddates) descriptor. +This section demonstrates the usage of [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) functionallity. Different `single dates` or `range` elements could be added to Array, and passed to the [`disabledDates`]({environment:angularApiUrl}/classes/igxcalendarbase.html#disableddates) descriptor. ```typescript this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: [ @@ -325,10 +325,10 @@ Result: ### Views -There are separate views provided by the [`IgxCalendarModule`]({environment:angularApiUrl}/classes/igxcalendarmodule.html) that can be used independently: -- Days View - `igx-days-view` -- Months View - `igx-months-view` -- Years View - `igx-years-view` +There are separate views provided by the `IgxCalendarModule` that can be used independently: +- Days View - [`igx-days-view`]({environment:angularApiUrl}/classes/igxdaysviewcomponent.html) +- Months View - [`igx-months-view`]({environment:angularApiUrl}/classes/igxmonthsviewcomponent.html) +- Years View - [`igx-years-view`]({environment:angularApiUrl}/classes/igxyearsviewcomponent.html)