简体   繁体   中英

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

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.

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!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM