How do I add a popover to a fullcalendar event in a resource timeline in Vue using BootstrapVue?

3.3k views Asked by At

I'm trying to add a popover to an event in a resource timeline and I would like to know what the correct way is to do that.

I'm using fullcalendar/vue ^5.3.1 in Vue ^2.6.11 with ^2.1.0 of bootstrap-vue.

After reading this question I have the following, which seems to work, but doesn't seem like it's the right way to do it.

I think it's the use of the propsData and .$mount() that makes it feel like there must be a better, more idiomatic approach? In addition, it doesn't seem possible to make the content html either?

In the component:

<script>
    import { BPopover } from 'bootstrap-vue'
</script>

In calendarOptions:

eventDidMount: function (info) {
    new BPopover({
        propsData: {
            title: info.event.extendedProps.title,
            content: info.event.extendedProps.projectName,
            triggers: 'hover',
            target: info.el,
        }
    }).$mount()
}

Any thoughts greatly appreciated.
Many thanks.

1

There are 1 answers

0
Darren On BEST ANSWER

Since posting this question, we've switched from bootstrap-vue to vuetify on this project but the solution is still most likely relevant in that we have used the eventContent slot to add a v-tooltip

        <FullCalendar :options="calendarOptions" ref="fullCalendar">
            <template #eventContent="arg">
                <v-tooltip bottom color="teal">
                    <template v-slot:activator="{ on, attrs }">
                        <div style="min-height:20px;" v-bind="attrs" v-on="on">
                        </div>
                    </template>
                    <div style="text-align:left;">
                        Description: {{arg.event.extendedProps.description}}<br />
                        Project {{arg.event.extendedProps.projectName}}<br />
                    </div>
                </v-tooltip>
            </template>
        </FullCalendar>

I believe the slots are a new v5 feature. I came across this in this issue and you can see an example of it being used in the demo app too.

The docs could definitely be better!