Add Bootstrap popover programmatically vue-full-calendar

Question

My end goal is to add a Bootstrap 4 Popover to Full Calendar to display calendar event descriptions, since depending on the view, Full Calendar cuts off the Title/description. Since Full Calendar is generating everything based off of the events prop I pass to it, I haven't been able to figure out how to add a popover of any sort. (I could probably do it with jQuery, but I'm really trying to cut jQuery out of the project to make my build size smaller)

There is great documentation here on normal usage of the popover with bootstrap vue: https://bootstrap-vue.js.org/docs/directives/popover/

Full Calendar doesn't provide a way to use any of the methods described in the Boostrap-Vue docs unfortunately. One thing I did try, but didn't work was this

<template>
  <full-calendar
    :events="events"
    @eventRender="eventRender"
  ></full-calendar>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'

  export default{
    data(){
      events: [...],
    },
    methods: {
      eventRender(info){
        info.el.setAttribute('v-b-popover.hover.top', 'Popover!')
      }
    }
  } 
</script>

This does add the attribute to the HTML, but I assume it's after Vue processes the DOM, because it doesn't add the Popover.

Would there be any other way to use the parameters of the info object passed to the eventRender function to add a Popover? (eventRender function docs: https://fullcalendar.io/docs/eventRender)

score 2 · Answer 1 · edited Jul 15 '22 at 01:17

You can take the BPopover by the propsData in bootstrap-vue as following:

import { BPopover } from 'bootstrap-vue'
...
methods: {
  ...
  onEventRender: function (args) {
    //console.log(args)
    let titleStr = 'xxxx'
    let contentStr = 'xxxx'

    new BPopover({propsData: {
      title: titleStr,
      content: contentStr,
      placement: 'auto',
      boundary: 'scrollParent',
      boundaryPadding: 5,
      delay: 500,
      offset: 0,
      triggers: 'hover',
      html: true,
      target: args.el,
    }}).$mount()
  }
}

even though propsData is a value for test... https://v2.vuejs.org/v2/api/index.html#propsData

score 1 · Accepted Answer · edited Mar 10 '21 at 20:08

Ok, after spending some time reading the Boostrap-Vue code, and playing around a bit, I was able to get it working!

Here's a condensed version of the component with the PopOver working:

<template>
  <full-calendar
    :events="events"
    @eventRender="eventRender"
  ></full-calendar>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'
  import PopOver from 'bootstrap-vue/src/utils/popover.class'

  export default{
    data(){
      events: [...],
    },
    methods: {
      eventRender(info){
        // CONFIG FOR THE PopOver CLASS
        const config = {
          title: 'I am a title',
          content: "This text will show up in the body of the PopOver",
          placement: 'auto', // can use any of Popover's placements(top, bottom, right, left etc)
          container: 'null', // can pass in the id of a container here, other wise just appends to body
          boundary: 'scrollParent',
          boundaryPadding: 5,
          delay: 0,
          offset: 0,
          animation:true,
          trigger: 'hover', // can be 'click', 'hover' or 'focus'
          html: false, // if you want HTML in your content set to true.
        }

        const target = info.el;
        const toolpop = new PopOver(target, config, this.$root);

        console.log('TOOLPOP', toolpop);
      },
    }
  } 
</script>

Add Bootstrap popover programmatically vue-full-calendar

2 Answers2

Linked