A plugin that renders the Scheduler's date navigator.
Use the following statement to import a plugin with embedded theme components:
import { DateNavigator } from '@devexpress/dx-react-scheduler-material-ui';You can import the themeless plugin to use custom components:
import { DateNavigator } from '@devexpress/dx-react-scheduler';| Name | Type | Default | Description |
|---|---|---|---|
| rootComponent | ComponentType<DateNavigator.RootProps> | A component that renders the date navigator's root element. | |
| overlayComponent | ComponentType<DateNavigator.OverlayProps> | A component that renders the date navigator's overlay element. | |
| openButtonComponent | ComponentType<DateNavigator.OpenButtonProps> | A component that renders a button that invokes the date navigator. | |
| navigationButtonComponent | ComponentType<DateNavigator.NavigationButtonProps> | A component that renders the date navigator's navigation buttons. |
Properties passed to a component that renders the date navigator's root element.
| Field | Type | Description |
|---|---|---|
| navigationButtonComponent | ComponentType<DateNavigator.NavigationButtonProps> | A component that renders the date navigator's navigation buttons. |
| openButtonComponent | ComponentType<DateNavigator.OpenButtonProps> | A component that renders a button that invokes the date navigator. |
| navigatorText? | string | Text displayed in the date navigator. |
| rootRef | (ref: ReactInstance) => void | A function that accepts the date navigator's root element. |
| onVisibilityToggle | () => void | An event raised when the date navigator should be shown or hidden. |
| onNavigate | (direction: 'forward' | 'back') => void | An event raised when a navigation button is clicked. The event handler should switch the date navigator to the next or previous date. |
Properties passed to a component that renders the date navigator's overlay element.
| Field | Type | Description |
|---|---|---|
| visible? | boolean | Specifies whether the overlay is visible. |
| target? | ReactInstance | A React component instance or a DOM element that is used to position the overlay element. |
| onHide | () => void | An event raised when the date navigator should be hidden. |
| children | ReactNode | A React node used to render the overlay content. |
Properties passed to a component that renders the date navigator's open button.
| Field | Type | Description |
|---|---|---|
| onVisibilityToggle | () => void | An event raised when the date navigator should be shown or hidden. |
| text? | string | The button text. |
Properties passed to a component that renders the date navigator's navigation button.
| Field | Type | Description |
|---|---|---|
| type | 'forward' | 'back' | The button type. |
| onClick? | (e: object) => void | An event raised when the button is clicked. |
| Name | Properties | Description |
|---|---|---|
| DateNavigator.Root | DateNavigator.RootProps | A component that renders the date navigator's root element. |
| DateNavigator.Overlay | DateNavigator.OverlayProps | A component that renders the date navigator's overlay element. |
| DateNavigator.OpenButton | DateNavigator.OpenButtonProps | A component that renders a button that invokes the date navigator. |
| DateNavigator.NavigationButton | DateNavigator.NavigationButtonProps | A component that renders the date navigator's navigation buttons. |
Additional properties are added to the component's root element.