docs(react-scheduler): add the scheduler Appointment Tooltip guide (#…

…2054)
DevExpress · Jun 6, 2019 · 35c4642 · 35c4642
1 parent f0040fd
commit 35c4642
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx b/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx
@@ -110,9 +110,9 @@ export default class Demo extends React.PureComponent {
           <AppointmentTooltip
             showCloseButton
             visible={visible}
+            onVisibilityChange={this.toggleVisibility}
             appointmentMeta={appointmentMeta}
             onAppointmentMetaChange={this.onAppointmentMetaChange}
-            onVisibilityChange={this.toggleVisibility}
           />
         </Scheduler>
       </Paper>

diff --git a/.../dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx b/.../dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx
@@ -32,9 +32,9 @@ export default class Demo extends React.PureComponent {
           />
 
           <Appointments />
-
           <AppointmentTooltip
             showCloseButton
+            showOpenButton
           />
         </Scheduler>
       </Paper>

diff --git a/packages/dx-react-scheduler/docs/guides/appointment-tooltip.md b/packages/dx-react-scheduler/docs/guides/appointment-tooltip.md
@@ -0,0 +1,31 @@
+# React Scheduler - Appointment Tooltip
+
+An appointment tooltip displays information about the appointment and contains buttons that manage the appointment.
+
+## Related Plugins
+
+The following plugin is required:
+
+- [AppointmentTooltip](../reference/appointment-tooltip.md) - displays the appointment tooltip
+
+## Basic Usage
+
+Import the plugin listed above. A user can click on an appointment to show its tooltip.
+
+### Uncontrolled Mode
+
+The following demo shows how to use the appointment tooltip in uncontrolled mode:
+
+.embedded-demo({ "path": "scheduler-tooltip/uncontrolled", "showThemeSelector": true })
+
+### Controlled Mode
+
+In controlled mode, the state of `AppointmentTooltip`s should be controlled externally. To control their visibility, pass the `visible` property and `onVisibilityChange` event to the plugin. To manage the displayed data, pass the [appointmentMeta](../reference/appointment-tooltip.md#appointmentmeta) property and `onAppointmentMetaChange` event.
+
+.embedded-demo({ "path": "scheduler-tooltip/controlled", "showThemeSelector": true })
+
+### Customize the Appearance
+
+To customize the tooltip's appearance, specify the `xxxComponent` properties (`xxx` is the name of the element you want to customize). For example, the `headerComponent` and `contentComponent` properties are used to customize the tooltip's header and content, as shown in the code below. Refer to the [AppointmentTooltip API reference page](../reference/appointment-tooltip.md) for a list of all `xxxComponent` properties.
+
+.embedded-demo({ "path": "scheduler-tooltip/custom", "showThemeSelector": true })
diff --git a/site/_data/docs/navigation.yml b/site/_data/docs/navigation.yml
@@ -313,6 +313,8 @@
         path: /react/scheduler/docs/guides/view-switching
       - title: Date Navigation
         path: /react/scheduler/docs/guides/date-navigation
+      - title: Appointment Tooltip
+        path: /react/scheduler/docs/guides/appointment-tooltip
       - title: Editing
         path: /react/scheduler/docs/guides/editing
       - title: Localization