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!

javascriptvue.jsfullcalendarbootstrap-vuefullcalendar-5

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for sending the database value to the next page with ajax

Struggling to send the database value retrieved through ajax to the next page. Tried several methods but none seem to work. Could anyone provide guidance on how to achieve this? php Successfully connected to the database $sql = "SELECT * FROM `billin ...

javascriptphpjqueryajax

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

javascripthtmlarraysvue.js

Express server controller encountering premature return from locally executed async function

I have developed an API endpoint using Node/Express. I am trying to call a local function asynchronously within the controller function, but instead of receiving the expected asynchronous results, the called local function is returning undefined immediat ...

javascriptnode.jsexpressasync-await

When sending an ajax request with HTML data as the payload

While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...

javascriptjqueryhtmlajax

Transferring data between two functions within a React.js application

I have two functions called getLocation() and getLocationName(). The getLocation() function performs an XMLHttpRequest, and I want to pass the response to the getLocationName() function to display it in a list. getLocationName = (location) => { var ...

javascriptreactjs

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

<div onClick={() => { updateValue1((x: number) => x + 1); updateValue2((x: number) => x + 3); }} > one? two? </div> const [value1, updateValue1] = useState(1); const [value2, updateValue2] = useState(1 ...

javascriptreactjsreact-hooksuse-effect

Switch from buffer to base64 encoding for viewing in Angular

Hello, I have developed an application using the MEAN stack. Currently, I am facing an issue with retrieving images from my endpoint. The image array values that I am receiving look like this: 8,8,7,7,9,8,9,8,9,8,9,9,8,8,8,8,7,9,7,7,9,10,16,13,8,8,16,9,7, ...

javascriptangularjsnode.jsmongodbbase64

"Oops, unable to utilize the POST method in the Vue project due to an

I am having trouble using the post method and receiving a "post not found (404)" error. I have successfully connected to the database, defined the route endpoint POST in server.js, and set up axios.post in Signup.vue, but I still get the "post not found (4 ...

node.jsmongodbvue.jsexpressaxios

Is it detrimental to have lengthy jQuery chains?

After extensively utilizing jQuery for quite some time, I recently developed a slideshow plugin for my professional projects. Interestingly, without fully intending to, approximately 75% of the code was written in a single chain. Despite being meticulous ...

javascriptjqueryperformanceplugins

What steps can I take to reset my JavaScript code once its original purpose has been fulfilled?

I created this code, learning as I went along. It measures Beats Per Minute as one clicks the left-mouse-button each time they feel a pulse. After 10 clicks, the JavaScript code takes all the values in the array and calculates an average BPM. The issue ar ...

javascriptjquery

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

I have a variety of module rows that allow users to manage access rights by selecting specific options. My goal now is to extract the checked boxes from these checkboxes with the name "config{{$field->id}}". Below is the current functioning code. HTM ...

javascripthtml

Convert an array of string values into a JSON format

I need help with converting an array stored in my database to a more user-friendly format. Currently, it is saved as follows: ["size:medium","height:10cm"] This format makes it difficult to display in a table. I am wondering if there is a way to conver ...

javascriptphpjson

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

javascriptajaxhtmlcss

Discover the country's three-letter code with the power of HTML and Javascript!

I am in search of a way to determine the location of a user based on the country they are browsing from. I want to achieve this using HTML and Javascript. While researching on stackoverflow, I came across various suggestions to use different API's for ...

javascripthtmlajaxgeolocationreverse-geocoding

I am interested in utilizing $axios in conjunction with Vuex constants for my project

My Dream Becoming Reality I frequently use this.$axios, so I attempted to store it in a constant, but unfortunately, it did not work as expected. Despite reading the official documentation, I couldn't grasp the reason behind this issue. Could it be d ...

javascriptvue.jsnuxt.jsvuex

Issues with triggering onScroll event in Internet Explorer 11

<html> <head> <style> div {`border: 1px solid black; width: 200px; height: 100px; overflow: scroll;` } </style> </head> <body> <p>Experience the magic of scrollbar within ...

javascripthtmlcss

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

javascriptangulartypescript

Customizing the MUI X Sparkline: Incorporating the percentage symbol at the end of the tooltip data within the MUI Sparklinechart

Presented below is a SparklineChart component imported from MUI X: import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import { SparkLineChart } from '@mui/x-chart ...

javascriptreactjsmaterial-uimui-x-charts

The Chrome browser is experiencing delays with processing ajax requests, causing them

When I make a series of 8 requests in quick succession, they load successfully. However, any requests made after that get stuck in a "pending" state. Below is my basic HTML template: <!DOCTYPE html> <html> <head> <meta charset= ...

javascriptajaxgoogle-chrome