1. Home
  2. Forum
  3. Vue
  4. Schedule Vue3 nested quick info templates not working

Schedule Vue3 nested quick info templates not working

Hi all,

I'm trying to port my Vue2 app to Vue3. Unfortunately I cannot get quick info nested templates to run.

In the Vue2 version of my app I defined the quick info template as follows:


data () {
    return {
        currentView: 'TimelineWeek',
        selectedDate: moment(this.startDate).toDate(),

        eventSettings: {
            dataSource: dataManager, // ignoreWhitespace: true
        },

        group: {
            enableCompactView: true,
            resources: ['Shifts', 'Locations']
        },

        timeScale: {
            enable: false
        },

        eventTemplate: function (e) { return { template: eventTemplate } },

        quickInfoTemplates: {
            header: function (e) { return { template: headerTemplate } },
            content: function (e) { return { template: contentTemplate } }
        }
    }
},

Unfortunately this approach won't work in my setup function in Vue3 when using composition API. Can someone please help out?


Many thanks in advance!


5 Replies 1 reply marked as answer
NR Nevitha Ravi Syncfusion Team October 13, 2021 10:42 AM UTC

Hi Klaus, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “need to render quick info template for the scheduler in Vue 3” using quickInfoTemplates property of the scheduler, which can be downloaded from the following link. 


      quickInfoTemplates: { 
        header: function () { 
          return { 
            template: quickHeaderVue, 
          }; 
        }, 
        content: function () { 
          return { 
            template: quickContentVue, 
          }; 
        }, 
        footer: function () { 
          return { 
            template: quickFooterVue, 
          }; 
        }, 
      }, 

var quickHeaderVue = app.component("header", { 
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-header"> 
    <div class="e-header-icon-wrapper"><button class="e-close" title="Close"></button></div></div></div> 
    <div v-else><div class="e-event-header"><div class="e-header-icon-wrapper"><button class="e-close" title="CLOSE"></button></div></div></div></div>`, 
  data: () => ({}), 
}); 

var quickContentVue = app.component("content", { 
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-content e-template"> 
    <form class="e-schedule-form"><div><input class="subject e-field" type="text" name="Subject" placeholder="Title"></div><div><input class="location e-field" type="text" name="Location" placeholder="Location"></div></form></div></div><div v-else><div class="e-event-content e-template"> 
    <div class="e-subject-wrap"><div><div v-if="data.Subject !== undefined"><div class="subject">{{data.Subject}}</div></div></div><div><div v-if="data.Location !== undefined"><div class="location">{{data.Location}}</div></div></div><div><div v-if="data.Description !== undefined"><div class="description">{{data.Description}}</div></div></div></div></div></div></div>`, 
  data: () => ({}), 
}); 

var quickFooterVue = app.component("footer", { 
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-footer"> 
    <button class="e-event-details" title="Extra Details">Extra Details</button> 
    <button class="e-event-create" title="Add">Add</button></div></div> 
    <div v-else><div class="e-event-footer"><button class="e-event-edit" title="Edit">Edit</button> 
    <button class="e-event-delete" title="Delete">Delete</button></div></div></div>`, 
  data: () => ({}), 
}); 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 
Nevitha 


Marked as answer
KA Kayleezee October 17, 2021 10:31 AM UTC

Hi Nevitha,


many thanks! Your solution works perfectly.


Beste regards


Ps.: I have a similar template-based problem with the kanban control. I will open a separate thread.


NR Nevitha Ravi Syncfusion Team October 19, 2021 07:24 AM UTC

Hi Klaus, 

You are most welcome..! we are glad that our solution worked at your end. Please get back to us if you need any further assistance. 

Regards, 
Nevitha. 


BA Bamo May 31, 2023 03:09 PM UTC

using "header" and "footer" as component id results in vue warning "Do not use built-in or reserved HTML elements as component id: header"


SR Swathi Ravi Syncfusion Team June 1, 2023 12:41 PM UTC

Hi Bamo,


We tested it by passing the Schedule component id as the header, but it did not throw any warnings. If we misunderstood your requirement, please share the below details to proceed further.


  • Do you mean the component as Schedule component and setting the id for that? or
  • Code snippets for which component you specify the id as header and footer, or
  • Replicate the issue in our shared sample.



Regards,

Swathi Ravi


Attachment: vueschedule_f3a35da3.zip

Loader.
Up arrow icon