What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

Question

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

I need help adding a popover to an event in a resource timeline using fullcalendar/vue ^5.3.1 in Vue ^2.6.11 with ^2.1.0 of bootstrap-vue.

Although I found some guidance on Stack Overflow, the solution involving propsData and .$mount() doesn't feel like the most ideal approach. It also seems challenging to use HTML content for the popover.

In my component, I have:

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

And in calendarOptions:

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

If anyone has better suggestions or thoughts on how to improve this implementation, please let me know. Thank you!

javascript vue.js fullcalendar bootstrap-vue fullcalendar-5

Answer 1

Answer №1

After switching from bootstrap-vue to vuetify on our current project, we still found the solution highly relevant as we utilized the eventContent slot to integrate 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>

This feature with slots is a new addition in v5. I stumbled upon it in this issue, and there's also an example in the demo app.

The documentation could use some improvement for sure!

Answer 2

After switching from bootstrap-vue to vuetify on our current project, we still found the solution highly relevant as we utilized the eventContent slot to integrate 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>

This feature with slots is a new addition in v5. I stumbled upon it in this issue, and there's also an example in the demo app.

The documentation could use some improvement for sure!

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

Answer №1

Similar questions

Extracting specific key-value pairs from JSON data

Searching for ways to filter out specific tags using regular expressions

Interacting with a third-party application via OAuth using Node server to send REST requests

Tips for activating a deactivated input field in ReactJS

Having trouble adding global method using Plugin in Vue 3?

Using Ember's transitionTo method and setting a controller attribute within a callback

The D3 path is generating an unexpected output of 0px by 0px, causing the map not to display properly. I am currently unsure how to adjust the projection to

Please input a number that falls within a specified range

VueCropper fails to load properly

What methods can I use to prevent caching of XMLHttpRequest requests without relying on jQuery?

The @change event in Vue/Vuetify lacks certain properties in the $event object

Hiding a Blogger section when its widget is not visible

Change the background color of a table cell based on its value with the help of JavaScript

ng-include does not incorporate a partial view

Returning a Response in HapiJS Routes from Incoming Requests

New data field is created with AngularFire2 update instead of updating existing field

Select a single option from the group to include in the array

Using JavaScript to create a dynamic to-do list that persists on the browser even when refreshed

"Troubleshooting: Why is the onError event not triggering

top margin is functioning properly in Internet Explorer, but not in Google Chrome