@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
96 lines (95 loc) • 4.39 kB
JavaScript
'use client';
import '@ui5/webcomponents/dist/Calendar.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* The `Calendar` component allows users to select one or more dates.
*
* Currently selected dates are represented with instances of `CalendarDate` as
* children of the `Calendar`. The value property of each `CalendarDate` must be a
* date string, correctly formatted according to the `Calendar`'s `formatPattern` property.
* Whenever the user changes the date selection, `Calendar` will automatically create/remove instances
* of `CalendarDate` in itself, unless you prevent this behavior by calling `preventDefault()` for the
* `selection-change` event. This is useful if you want to control the selected dates externally.
*
* ### Usage
*
* The user can navigate to a particular date by:
*
* - Pressing over a month inside the months view
* - Pressing over an year inside the years view
*
* The user can confirm a date selection by pressing over a date inside the days view.
*
* ### Keyboard Handling
* The `Calendar` provides advanced keyboard handling.
* When a picker is showed and focused the user can use the following keyboard
* shortcuts in order to perform a navigation:
*
* - Day picker:
*
* - [F4] - Shows month picker
* - [Shift] + [F4] - Shows year picker
* - [Page Up] - Navigate to the previous month
* - [Page Down] - Navigate to the next month
* - [Shift] + [Page Up] - Navigate to the previous year
* - [Shift] + [Page Down] - Navigate to the next year
* - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
* - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
* - [Home] - Navigate to the first day of the week
* - [End] - Navigate to the last day of the week
* - [Ctrl] + [Home] - Navigate to the first day of the month
* - [Ctrl] + [End] - Navigate to the last day of the month
*
* - Month picker:
*
* - [Page Up] - Navigate to the previous year
* - [Page Down] - Navigate to the next year
* - [Home] - Navigate to the first month of the current row
* - [End] - Navigate to the last month of the current row
* - [Ctrl] + [Home] - Navigate to the first month of the current year
* - [Ctrl] + [End] - Navigate to the last month of the year
*
* - Year picker:
*
* - [Page Up] - Navigate to the previous year range
* - [Page Down] - Navigate the next year range
* - [Home] - Navigate to the first year of the current row
* - [End] - Navigate to the last year of the current row
* - [Ctrl] + [Home] - Navigate to the first year of the current year range
* - [Ctrl] + [End] - Navigate to the last year of the current year range
*
* #### Fast Navigation
* This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
* ### Calendar types
* The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
* By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
* you need to set the `primaryCalendarType` property and import one or more of the following modules:
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`
*
* Or, you can use the global configuration and set the `calendarType` key:
*
* ```html
* <script data-id="sap-ui-config" type="application/json">
* {
* "calendarType": "Japanese"
* }
* </script>
* ```
*
*
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const Calendar = withWebComponent('ui5-calendar', ['calendarWeekNumbering', 'formatPattern', 'maxDate', 'minDate', 'primaryCalendarType', 'secondaryCalendarType', 'selectionMode'], ['hideWeekNumbers'], ['calendarLegend', 'specialDates'], ['selection-change']);
Calendar.displayName = 'Calendar';
export { Calendar };