Enable tooltip template on schedule with composition API

[Alberto Provencio]

Hi,

I'm trying to enable a custom tooltip over schedule component with vue3, typescript and composition Api, but I can't get it work successfully.

These are my components:

Planner.vue

<template>

  <ejs-schedule

    height="800px"

    :workHours="workHours"

    :selectedDate="selectedDate"

    :eventSettings="eventSettings"

    :currentView="currentView"

    :firstDayOfWeek="firstDayOfWeek"

    @navigating="onNavigating"

  >

    <e-views>

      <e-view option="Day"></e-view>

      <e-view option="Week" startHour="00:00" endHour="23:50"></e-view>

      <e-view option="WorkWeek" startHour="07:00" endHour="19:00"></e-view>

      <e-view option="TimelineDay"></e-view>

      <e-view option="TimelineWeek"></e-view>

      <e-view option="TimelineWorkWeek" startHour="07:00" endHour="19:00"></e-view>

    </e-views>

    <e-resources>

      <e-resource

        field="OwnerId"

        title="Owner"

        name="Owners"

        :dataSource="ownerDataSource"

        textField="OwnerText"

        idField="Id"

        colorField="OwnerColor"

      >

      </e-resource>

    </e-resources>

    <e-header-rows>

      <e-header-row option="Date"></e-header-row>

      <e-header-row option="Hour"></e-header-row>

    </e-header-rows>

  </ejs-schedule>

</template>

<script lang="ts">

import { defineComponent, onBeforeUpdate, ref } from 'vue';

import {

  ResourceDirective,

  ResourcesDirective,

  ScheduleComponent,

  ViewDirective,

  ViewsDirective,

  HeaderRowsDirective,

  HeaderRowDirective,

  getWeekLastDate,

  getWeekFirstDate,

  NavigatingEventArgs,

} from '@syncfusion/ej2-vue-schedule';

import PlannerTooltip from './PlannerTooltip.vue';

import mockData from './data';

export default defineComponent({

  name: 'Planner',

  props: {

    data: {

      type: Array,

      required: true,

    },

    selectedDate: {

      type: Date,

      required: true,

    },

  },

  // Declaring component and its directives

  components: {

    'ejs-schedule': ScheduleComponent,

    'e-views': ViewsDirective,

    'e-view': ViewDirective,

    'e-resources': ResourcesDirective,

    'e-resource': ResourceDirective,

    'e-header-rows': HeaderRowsDirective,

    'e-header-row': HeaderRowDirective,

  },

  // Bound properties declaration

  emits: ['changeDate'],

  setup(props, { emit }) {

    const { ownerDataSource } = mockData;

    const eventSettings = ref();

    const onNavigating = (event: NavigatingEventArgs) => {

      const { action, currentDate } = event;

      if (action === 'date' && currentDate) {

        const startDateWeek = getWeekFirstDate(currentDate, 1);

        const endDateWeek = getWeekLastDate(currentDate, 1);

        emit('changeDate', startDateWeek, endDateWeek);

      }

    };

    onBeforeUpdate(() => {

      eventSettings.value = {

        dataSource: props.data,

        enableTooltip: true,

        tooltipTemplate: { template: PlannerTooltip },

      };

    });

    return {

      onNavigating,

      currentView: 'WorkWeek',

      firstDayOfWeek: 1,

      allowMultiple: false,

      ownerDataSource,

      eventSettings,

      workHours: {

        start: '07:00',

        end: '19:00',

      },

    };

  },

});

</script>

<style scoped>

@import '../../../node_modules/@syncfusion/ej2-base/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-popups/styles/tailwind.css';

@import '../../../node_modules/@syncfusion/ej2-vue-schedule/styles/tailwind.css';

</style>

PlannerTooltip.vue

<template>

  <div>Hello</div>

  <div>{{ data.state }}</div>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

export default defineComponent({

  data() {

    return { data: {} };

  },

});

</script>

How can I solve this?

Best regards,

Antonio

[Satheesh Kumar Balasubramanian]

Hi Alberto, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Enable tooltip template on schedule" and suspect that you have not configured tooltip template properly in your sample. We have prepared a sample with configuring tooltip template which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/169458/ze/Vue3Schedule600266569 

  

Planner.vue:  

<script> 

import { ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective } from "@syncfusion/ej2-vue-schedule"; 

import PlannerTooltip from './PlannerTooltip.vue'; 

import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

import '../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css'; 

import { createApp } from "vue"; 

const app = createApp(); 

// Template declaration 

var templateVue = app.component("tooltipTemplate", PlannerTooltip); 

  

export default { 

name: "App", 

// Declaring component and its directives 

components: { 

    'ejs-schedule': ScheduleComponent, 

    'e-views': ViewsDirective, 

    'e-view': ViewDirective, 

    'e-resources': ResourcesDirective, 

    'e-resource': ResourceDirective 

}, 

// Bound properties declaration 

data() { 

    return { 

        selectedDate: new Date(2021, 7, 12), 

        allowMultiple: true, 

        ownerDataSource: [ 

            { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' }, 

            { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' }, 

            { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }], 

        eventSettings: { 

            enableTooltip: true, 

            tooltipTemplate: function () { 

                return { 

                    template: templateVue 

                }; 

            }, 

            dataSource: [ 

                { 

                    Id: 1, 

                    Subject: 'Surgery - Andrew', 

                    EventType: 'Confirmed', 

                    StartTime: new Date(2021, 7, 10, 9, 0), 

                    EndTime: new Date(2021, 7, 10, 10, 0), 

                    OwnerId: 2 

                }, 

                { 

                    Id: 2, 

                    Subject: 'Consulting - John', 

                    EventType: 'Confirmed', 

                    StartTime: new Date(2021, 7, 11, 10, 0), 

                    EndTime: new Date(2021, 7, 11, 11, 30), 

                    OwnerId: 3 

                }, 

                { 

                    Id: 3, 

                    Subject: 'Therapy - Robert', 

                    EventType: 'Requested', 

                    StartTime: new Date(2021, 7, 12, 11, 30), 

                    EndTime: new Date(2021, 7, 12, 12, 30), 

                    OwnerId: 1 

                } 

            ] 

        }, 

    }; 

} 

}; 

</script> 

  

PlannerTooltip.vue:  

<template> 

<div class='tooltip-wrap'> 

    <div class='content-area'> 

        <div class='name'>{{data.Subject}}</div> 

    </div> 

    <div v-if='data.City!== null && data.City!==undefined' class='city'>{{data.City}}</div> 

    <div class='time'>From : {{data.StartTime.toLocaleString()}} </div> 

    <div class='time'>To   : {{data.EndTime.toLocaleString()}} </div> 

</div> 

</template> 

  

<script> 

export default { 

     name: "PlannerTooltip", 

  

    data() { 

          return { 

              data: {} 

          }; 

      }, 

      methods: {} 

}; 

</script> 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please replicate the issue in above sample or share issue replicating sample if possible which will help us to validate the issue further and provide prompt solution as soon as possible. 

  

Regards, 

Satheesh Kumar B 

[Alberto Provencio]

It works great

Thank you very much.

[Nevitha Ravi]

Hi Alberto, 

  

You are most welcome. Please get back to us if you need any further assistance.

Regards,
Nevitha