devextreme-scheduler-appointment-template/Vue/src/TooltipTemplate.vue at 25.2.3+ · DevExpress-Examples/devextreme-scheduler-appointment-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <div>
    <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 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
        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"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { DxButton } from 'devextreme-vue/button';
import type { ClickEvent } from 'devextreme/ui/button';

defineProps<{
  data: { appointmentData: { text: string; startDate: Date } }
  markerColor: string | undefined;
  isDeleteButtonExist: boolean | undefined;
}>();

const emit = defineEmits<{
  (event: 'delete-button-click', value: ClickEvent): void;
}>();

function onClick(e: ClickEvent) {
  emit('delete-button-click', e);
}
</script>