title: How to add an image to an event on Vue FullCalendar? imageurl returns undefined
body: <p>I'm trying to add dynamically an image to the FullCalendar events with Vue. But first of all, I'm testing with a static data and the image doesn't show up.</p>
  
  <p>This is what I'm trying to do after several research:</p>
  
  <pre><code>&lt;template&gt;
  ...
  &lt;FullCalendar 
                      defaultView="timeGridWeek" 
                      header="null"
                      :slotDuration="slotDuration"
                      :plugins="calendarPlugins"
                      @dateClick="handleDateClick"
                      :allDaySlot="false"
                      :columnHeaderFormat='columnHeaderFormat'
                      :hiddenDays="hiddenDays"
                      :themeSystem="themeSystem"
                      :minTime="minTime"
                      :maxTime="maxTime"
                      :contentHeight="contentHeight"
                      :events="tutor_applications_not_scheduled"
                      :config="config"
                      @eventRender="eventRender"
                  /&gt;
  ...
  &lt;/template&gt;
  
  &lt;script&gt;
  import moment from 'moment'
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import bootstrapPlugin from '@fullcalendar/bootstrap'
  
  export default {
      components: {
          FullCalendar
      },
  
      data(){
          return {
              tutor_application_setup_id: this.$route.params.tutor_application_setup_id,
  
              loading: false,
  
              uri: '/tutor-applications-schedules/',
  
              calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin], 
              slotDuration: '01:00',
              columnHeaderFormat: {weekday:'long'},
              hiddenDays: [], //[0,6] - Sunday and Saturday
              themeSystem: 'bootstrap',
              minTime: '10:00', // will be dynamic
              maxTime: '17:00', // will be dynamic
              contentHeight: 'auto',
              config: {
                  timeFormat: 'h(:mm) a',
                  eventClick: function(event) {
                      if (event.url) {
                      location.replace(event.url);
                      return false;
                      }
                  }
              },
  
              tutor_applications_schedules: [],
              tutor_applications_not_scheduled: [],
              tutor_applications_scheduled: [],
  
              errors: [],
  
          }
      },
  
      methods: {
  
          handleDateClick(arg){
              alert(arg.date)
          },
  
          loadTutorApplicationsSchedules(){
              axios.get(this.uri + this.tutor_application_setup_id).then(response=&gt;{
                  this.tutor_applications_schedules = response.data.tutor_applications_schedules
                  this.loadTutorApplicationsNotScheduled()
                  this.loading = true
              });
          },
  
          loadTutorApplicationsNotScheduled(){
  
              // this.tutor_applications_schedules.forEach(schedule =&gt; {
                  // if(!schedule.is_scheduled){
                      this.tutor_applications_not_scheduled.push({
                          title: 'TEST TITLE',
                          start: '2019-05-22 10:00',
                          end: '2019-05-22 13:00',
                          imageurl: '/images/profile/1557196883.png'
                      });
                  // }
              // });
  
          },
  
          eventRender: function(event, eventElement) {
              console.log(event) // returning everything
              console.log(event.imageurl) // returning undefined
              if (event.imageurl) {
                  eventElement.find("div.fc-content").prepend("&lt;img src='" + event.imageurl +"' width='16' height='16'&gt;");
              }
          },
  
          loadTutorApplicationsScheduled(){
  
          },
  
          moment: function (date) {
              return moment(date)
          },
  
      },
  
      mounted(){
          this.loadTutorApplicationsSchedules()
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The result returns only the time and the title in the correct date. </p>
  
  <p>I also tried to insert the img tag to the <code>title</code> attribute, and changed the eventRender, like below:</p>
  
  <pre><code>...
  title: '&lt;img src="/images/profile/1557196883.png" /&gt;TEST TITLE',
  ...
  </code></pre>
  
  <pre><code>eventRender: function(event, element, view) {
              var title = element.find( '.fc-title' );
              title.html(title.text());
          },
  </code></pre>
  
  <p>It's returning the html tag as string, like <code>&lt;img src="/images/profile/1557196883.png" /&gt;TEST TITLE</code>.</p>
  
  <p><strong>Some of my dependencies are:</strong></p>
  
  <pre><code>"vue": "^2.5.17",
  "@fullcalendar/bootstrap": "^4.1.0",
          "@fullcalendar/core": "^4.1.0",
          "@fullcalendar/daygrid": "^4.1.0",
          "@fullcalendar/interaction": "^4.1.0",
          "@fullcalendar/timegrid": "^4.1.0",
          "@fullcalendar/vue": "^4.1.1",
          "babel-runtime": "^6.26.0",
          "vue-full-calendar": "^2.7.0",
  </code></pre>
  
  <p>I don't know which approach to follow anymore. Any help? Thank you.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I realized that some params has changed (<a href="https://fullcalendar.io/docs/upgrading-from-v3#event-rendering" rel="nofollow noreferrer">Full Calendar Updates</a>) and I changed my eventRender function, and now I can read the imageurl. However, I'm stuck how in Vue to find a tag and prepend with my image tag.</p>
  
  <p>My code now is like this:</p>
  
  <pre><code>eventRender: function(info) {
              console.log(info) // returning everything
              console.log(info.event.extendedProps.imageurl) // returning the image path correctly
              if (info.event.extendedProps.imageurl) {
                  info.el.find("div.fc-content").prepend("&lt;img src='" + info.event.extendedProps.imageurl +"' width='16' height='16'&gt;"); // this line is the problem now
              }
          },
  </code></pre>
  
  <p>It's returning the error <code>[Vue warn]: Error in v-on handler: "TypeError: info.el.find is not a function"</code>, and I don't know how to fix it.</p>