React Scheduler - Customize Appointment Tooltip
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to define a rendering function for tooltips:
App.js
Tooltip.js
- import React, { useCallback } from 'react';
- import Scheduler from 'devextreme-react/scheduler';
- import Tooltip from './Tooltip.js';
- import 'devextreme/dist/css/dx.light.css';
- const App = () => {
- const schedulerRef = useRef(null);
- const appointmentTooltip = useCallback((props) => {
- const scheduler = schedulerRef.current;
- // NOTE: You can use props.appointmentData.resouceId to obtain resource color
- const color = '#337ab7';
- const isAppointmentDisabled = data.appointmentData.disabled;
- const isDeleteAllowed = (scheduler.option('editing') && scheduler.option('editing.allowDeleting') === true)
- || scheduler.option('editing') === true;
- const isDeleteButtonExist = !isAppointmentDisabled && isDeleteAllowed;
- const onDeleteButtonClick = (e) => {
- scheduler.instance.deleteAppointment(props.appointmentData);
- e.event.stopPropagation();
- scheduler.instance.hideAppointmentTooltip();
- };
- return (
- <Tooltip
- {...props}
- isDeleteButtonExist={isDeleteButtonExist}
- onDeleteButtonClick={onDeleteButtonClick}
- color={color}
- />
- );
- }, []);
- render(
- <Scheduler ...
- ref={schedulerRef}
- appointmentTooltipRender={appointmentTooltip}
- >
- </Scheduler>
- );
- }
- export default App;
- import React, { useCallback } from 'react';
- const Tooltip = (props) => {
- const onDeleteButtonClick = useCallback((e) => {
- props.onDeleteButtonClick(e);
- }, [props.onDeleteButtonClick]);
- return (
- <div className={"dx-tooltip-appointment-item"}>
- <div className={"dx-tooltip-appointment-item-marker"}>
- <div
- className={"dx-tooltip-appointment-item-marker-body"}
- style={{ backgroundColor: props.color }}
- ></div>
- </div>
- <div className={"dx-tooltip-appointment-item-content"}>
- <div className={"dx-tooltip-appointment-item-content"}>
- <div className={"dx-tooltip-appointment-item-content-subject"}>
- {props.appointmentData.text}
- </div>
- <div className={"dx-tooltip-appointment-item-content-date"}>
- {props.appointmentData.startDate.toString()}
- </div>
- </div>
- </div>
- {props.isDeleteButtonExist ? (
- <div className={"dx-tooltip-appointment-item-delete-button-container"}>
- <Button
- className={"dx-tooltip-appointment-item-delete-button"}
- icon="trash"
- stylingMode="text"
- onClick={onDeleteButtonClick}
- ></Button>
- </div>
- ) : (
- <></>
- )}
- </div>
- );
- }
- export default Tooltip;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.