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