Vue 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 templates for tooltips:

App.vue
  • <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>

View Demo

See Also