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.vue
  • <template>
  • <DxScheduler
  • ref="schedulerRefKey"
  • ...
  • appointment-tooltip-template="appointmentTooltipTemplate"
  • >
  • <template #appointmentTooltipTemplate="{ data }">
  •  
  • <!-- NOTE: You can use data.appointmentData.resouceId to obtain resource color -->
  • <Tooltip
  • :data="data"
  • marker-color="#337ab7"
  • :is-delete-button-exist="isDeleteButtonExist(data)"
  • @delete-button-click="onDeleteButtonClick($event, data)"
  • />
  • </template>
  • </DxScheduler>
  • </template>
  •  
  • <script>
  • import Tooltip from './Tooltip.vue';
  • const schedulerRefKey = 'my-scheduler';
  •  
  • export default {
  • components: {
  • DxScheduler,
  • Tooltip
  • },
  • data() {
  • return {
  • schedulerRefKey
  • };
  • },
  • methods: {
  • onDeleteButtonClick(e, data) {
  • this.scheduler.deleteAppointment(data.appointmentData);
  • e.event.stopPropagation();
  • this.scheduler.hideAppointmentTooltip();
  • },
  • isDeleteButtonExist(data) {
  • const isAppointmentDisabled = data.appointmentData.disabled;
  • const isDeleteAllowed = (this.scheduler.option('editing') && this.scheduler.option('editing.allowDeleting'=== true)
  • || this.scheduler.option('editing') === true);
  •  
  • return !isAppointmentDisabled && isDeleteAllowed;
  • }
  • },
  • computed: {
  • scheduler: function() {
  • return this.$refs[schedulerRefKey].instance;
  • }
  • }
  • };
  • </script>
  • <template>
  • <div class="dx-tooltip-appointment-item">
  • <div class="dx-tooltip-appointment-item-marker">
  • <div
  • class="dx-tooltip-appointment-item-marker-body"
  • :style="{backgroundColor: markerColor}"
  • ></div>
  • </div>
  • <div class="dx-tooltip-appointment-item-content">
  • <div class="dx-tooltip-appointment-item-content">
  • <div class="dx-tooltip-appointment-item-content-subject">
  • {{data.appointmentData.text}}
  • </div>
  • <div class="dx-tooltip-appointment-item-content-date">
  • {{data.appointmentData.startDate.toString()}}
  • </div>
  • </div>
  • </div>
  • <div v-if="isDeleteButtonExist" class="dx-tooltip-appointment-item-delete-button-container">
  • <DxButton
  • class="dx-tooltip-appointment-item-delete-button"
  • icon="trash"
  • styling-mode="text"
  • @click="onClick"
  • ></DxButton>
  • </div>
  • </div>
  • </template>
  •  
  • <script>
  • import { DxButton } from 'devextreme-vue/button';
  • import { employees } from './data.js';
  •  
  • export default {
  • components: {
  • DxButton,
  • },
  • data() {
  • return {
  • employees,
  • };
  • },
  • methods: {
  • onClick(e) {
  • this.$emit("delete-button-click", e);
  • },
  • },
  • props: {
  • data: {
  • type: Object,
  • default: () => {},
  • },
  • markerColor: {
  • type: String
  • },
  • isDeleteButtonExist: {
  • type: Boolean
  • }
  • },
  • };
  • </script>

View Demo

See Also