Load vue component and get HTML as string for fullcalendar

Question

I am using https://fullcalendar.io/ in my Vue app.

In fullcalendar I use eventRender to manipulate the display of calendar entries.

eventRender: function(event, element) {
      let eventDetails = "<div style='background-color:black'>"+event.title+"</div>";
      element.find(".fc-title").html(eventDetails);
    }

Instead of creating a string template as above, I would like to use a Vue-component as a template and pass event-data to it and get an HTML-string back for the calendar entries shown in fullcalendar.

I am trying to figure out how to do it, but cannot figure out how to load the component, pass the data and get an HTML-string back.

I have setup a codesandbox and hope somebody can help me out. In the "components"-folder you will find Calendar.vue (fullcalendar) and EventDetails.vue (the component to be used as a template).

https://codesandbox.io/s/vue-fullcalendar-example-vzwlo

Interested in this as well since I will be doing this exact thing in the coming months! A quick search turned up these results: You can use this.$el.outerHTML. You can also use this.$refs.child.$el.outerHTML to get the HTML of a child. — Chase DeAnda
I did not use fullcalendar yet but I found that they do have integration with Vue. I think they would have some props or slots for the job you want. Maybe you need some deeper research in their docs: fullcalendar.io/docs/vue. Example code: github.com/fullcalendar/fullcalendar-example-projects/blob/…. — Duannx

ThomasD ThomasD · Accepted Answer · 2019-12-27T21:31:42

Import the component and create a class from it

import EventDetails from "/components/EventDetails.vue";
var EventDetailsClass = Vue.extend(EventDetails);

Then in the eventRender-callback create an instance of the class, pass the data and get the HTML-string

eventRender: (event, element) => {
          /** load EventDetails-component and pass data to component */
          /** return HTML-string from component */
          let EventDetailsInstance = new EventDetailsClass();
          EventDetailsInstance.setEvent(event);
          EventDetailsInstance.$mount();

          let eventHTML = EventDetailsInstance.$el.outerHTML;
          element.find(".fc-title").html(eventHTML);
        }

Demo can be found here https://codesandbox.io/s/vue-fullcalendar-example-pqctv

Load vue component and get HTML as string for fullcalendar

1 Answers