React Scheduler - Customize Appointment Tooltip
jQuery
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. Combine HTML markup for tooltips manually with DOM manipulation methods. To apply this markup, use the appointmentTooltipTemplate callback function as shown in the following code:
var schedulerData = [{ text: "His Girl Friday", year: 1940, img: "images/movies/HisGirlFriday.jpg", startDate: new Date("2016-04-24T09:10:00.000Z"), endDate: new Date("2016-04-24T11:20:00.000Z") }, // ... ]; $(function () { $("#schedulerContainer").dxScheduler({ dataSource: schedulerData, currentDate: new Date(2016, 4, 24), appointmentTooltipTemplate: function (model, index, element) { element.append("<i>" + model.appointmentData.text + "(" + model.appointmentData.year + ")</i>"); element.append("<p><img style='height: 80px' src='" + model.appointmentData.img + "' /></p>"); } }); });
Angular
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to use dxTemplate to define templates for tooltips:
<dx-scheduler [dataSource]="schedulerData" appointmentTooltipTemplate="tooltipTemplate" [currentDate]="currentDate"> <div *dxTemplate="let model of 'tooltipTemplate'"> <i>{{model.appointmentData.text}} ({{model.appointmentData.year}})</i> <p><img src="{{model.appointmentData.img}}" style="height: 80px"></p> </div> </dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular"; // ... export class AppComponent { schedulerData = [{ text: "His Girl Friday", year: 1940, img: "images/movies/HisGirlFriday.jpg", startDate: new Date("2016-04-24T09:10:00.000Z"), endDate: new Date("2016-04-24T11:20:00.000Z") }, // ... ]; currentDate = new Date(2016, 4, 24); } @NgModule({ imports: [ // ... DxSchedulerModule ], // ... })
Vue
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to define templates for tooltips:
<template> <DxScheduler :data-source="appointments" :current-date="currentDate" appointment-tooltip-template="appointmentTooltipTemplate" > <template #appointmentTooltipTemplate="{ data }"> <div style="height: 100px"> <i>{{data.appointmentData.text}} ({{data.appointmentData.year}})</i> <p><img :src="data.appointmentData.img" style="height: 80px"></p> </div> </template> </DxScheduler> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxScheduler from 'devextreme-vue/scheduler'; export default { components: { DxScheduler }, data() { return { currentDate: new Date(2016, 4, 25), appointments: [{ text: "His Girl Friday", year: 1940, img: "images/movies/HisGirlFriday.jpg", startDate: new Date("2016-04-24T09:10:00.000Z"), endDate: new Date("2016-04-24T11:20:00.000Z") }, // ... ]; } } } </script>
React
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:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Scheduler from 'devextreme-react/scheduler'; const appointments = [{ text: "His Girl Friday", year: 1940, img: "images/movies/HisGirlFriday.jpg", startDate: new Date("2016-04-24T09:10:00.000Z"), endDate: new Date("2016-04-24T11:20:00.000Z") }, // ... ]; const renderAppointmentTooltip = (model) => { return ( <div style={{height: '100px'}}> <i>{model.appointmentData.text} ({model.appointmentData.year})</i> <p><img src={model.appointmentData.img} style={{height: '80px'}}></p> </div> ); } class App extends React.Component { render() { return ( <Scheduler dataSource={appointments} defaultCurrentDate={new Date(2016, 4, 25)} appointmentTooltipRender={renderAppointmentTooltip} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.