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>
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.