Angular 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;

View Demo

See Also