Having trouble getting Vuejs to work when appending an element to Fullcalender

Hi there, I am facing an issue where appending a custom button to a full calendar event is not working properly with Vue.js methods.

It works fine with core JavaScript, but I really want it to work with Vue.js methods. Any ideas on how I can achieve this?

Here is the code snippet I am currently using:

eventRender(info) {
      $(info.el).find(".fc-content").append(`
      <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                          <button @click="vuejsMehtodName('Unpaid')" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                          <button @click="vuejsMehtodName('Unseen')" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                          <button @click="vuejsMehtodName('Cancel')" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                      </div>
        `);
    },

I have attempted using @click.native as well, but unfortunately, it gives the same result. Any suggestions on how I can troubleshoot and fix this issue? Thank you.

javascriptvue.jsvuejs2fullcalendarfullcalendar-4

Answer №1

My problem was resolved using the following code. I am utilizing fullcalendar and adding buttons to events:

        // console.log(info)
        $(info.el).find(".fc-content").append(`
        <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                            <button id="Unpaid" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                            <button id="Unseen" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                            <button id="Cancel" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                        </div>
          `);
      },

To make the buttons (Unseen, Unpaid, Cancel) clickable, you need to add an id to them and then check which button was clicked within the eventClick method:

eventClick(info) {
        if(info.jsEvent.toElement.id=='Unpaid' || info.jsEvent.toElement.id=='Unseen' || info.jsEvent.toElement.id=='Cancel'){
 this.vuejsMehtodName(info.jsEvent.toElement.id)
 }else{
  // Here, it means when any part of the event is clicked except for the buttons
 }
}

Finally, you will need to create the method (vuejsMehtodName) to handle the actions based on the button clicked. Thank you.

Answer №2

eventRender(info) {
        // console.log(info)
        $(info.el).find(".fc-content").append(`
        <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                            <button @click="vuejsMehtodName('Unpaid')" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                            <button @click="vuejsMehtodName('Unseen')" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                            <button @click="vuejsMehtodName('Cancel')" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                        </div>
          `);
      },

You have encountered some syntax errors. Make sure to correct them to avoid issues.

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

The :contains method in jQuery functions smoothly in Firefox, Safari, and Chrome, but unfortunately does not work

My code on JSFiddle is having some compatibility issues with the jQuery :contains selector specifically in Internet Explorer versions 7, 8, and 9. The code works fine in Firefox, Safari, and Chrome. You can find the working code here. I tried making the ...

javascriptjqueryxmlinternet-explorerjsfiddle

I have an npm package that relies on X (let's say material-ui). What is the best way to prevent users from having to install

Hey everyone, I recently released an npm package called X that relies on material-ui as a dependency. While many users of X already have material-ui installed, there are some who do not. How can I ensure that those who have material-ui installed continue t ...

javascriptnpm

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Seeking assistance with this issue: I am working on a page that includes radio buttons: <label>Delivery type:</label> <input type="radio" name="delivery" value="7" class="delivery-item" id="del-type-7" onclick=""><label class="label" ...

javascriptjqueryhtml

What is the proper way to utilize the toISOString() function in JavaScript?

My current code uses currentDate.toISOString() to output the date in this format: "2013-01-15T12:08:54.135Z". However, I actually need the date to be formatted like this: "2013-01-15T12:08:54-06:00". The "-06:00" represents the timezone. ...

javascriptjsondatetime

Unable to retrieve the data from MongoDB

Struggling to retrieve data from MongoDB, my code in the server.js file is not working as expected. You can view the code here. This is the route I'm using in Insomnia for GET requests: here However, when I test it in Insomnia, I receive the followi ...

javascriptmongodbexpressbackend

Using JSON parsing to dynamically create classes with preloaded background images

Today, I successfully deployed my browser game using MVC4 to my website for the first time. I am currently navigating through the differences between running the site off of localhost and running it from the actual website. My process involves loading all ...

javascriptjqueryjsonimagepreload

Unable to display image in Vuetify data table slot

I'm facing an issue with displaying images in a Vuetify data table column. Instead of the actual image, only the image URL is showing up, such as "9384053.jpg". How can I use slots in Vuetify to properly display the image? My array, Segment ...

vue.jsvuejs2vuetify.js

Hide only the table that is being clicked on, not all tables

Essentially, I am using document.querySelectorAll() to retrieve an array of div elements. In my function, handleClick(), each time the button is clicked, I want to hide the table associated with that specific button. This is the current situation: https:/ ...

javascriptcssreactjsecmascript-6react-hooks

Functionality issue with Datatables within JQuery-UI Tabs

I'm experiencing an issue with the compatibility of jQuery-UI tabs and Datatables. My goal is to create a scrollable table that displays information fetched from a database. Upon initially loading the page, the table appears like this. It looks like ...

javascriptjqueryjquery-uidatatables

Challenge with neglected open connections from a comet

Utilizing various comet techniques like long polling and forever frame, along with iframes for cross subdomain activities, has presented a challenge during implementation. When a user refreshes the page or navigates to another page, a new request is made w ...

javascriptajaxcometlong-pollingtornado

Enhancing interactivity: Implementing a ripple effect for Card clicks in Material UI

I'm curious if there's a method to incorporate a ripple effect into Material UI's Card component when it is clicked. Additionally, I am wondering if it is achievable to have the ripple effect display on top of the content within the Card co ...

javascriptreactjsmaterial-designmaterial-ui

What is the process for reaching application-level middleware from the router?

Within my project created using express application generator, I am facing a challenge accessing my application-level middleware from the router. This middleware is specifically designed to query the database using the user ID that is received from the ro ...

javascriptnode.jsexpressmiddleware

Using dot notation for event handlers in Vue.Js is a handy technique

I am currently developing a Single Page Application (SPA) using Vue.js 3 and Bootstrap 5. On the main page, I have implemented the Bootstrap Offcanvas element with code that closely resembles the one provided in the documentation. The structure of the off ...

javascripttwitter-bootstrapvue.jsoff-canvas-menu

Retrieve the initial two HTML elements from a Markdown file that has been parsed using NodeJS

Let's say there is a Markdown file being parsed dynamically to generate something like the following output: <h1>hello</h1><p>sometext</p><img src="image.jpg"/><ul><li>one</li>two</li></ul> ...

javascriptnode.jssubstringmarkdown

"Owlcarousel Slider: A beautiful way to showcase

Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...

javascriptjqueryhtmlcssowl-carousel

Enhance your cloud functions by updating data

Recently, I encountered an issue with a function I wrote that interacts with the Real Time Database. Every time I attempted to write data to a specific node, it would add the complete dataset and then promptly delete everything except one entry. https://i ...

javascriptnode.jsfirebase-realtime-databasegoogle-cloud-functions

Transferring radio button selections from a form to Google Analytics upon submission

I have a form where I can capture user selections from radio buttons and a drop-down element using the .blur() event. However, I am struggling with pushing this data to Google Analytics (GA) when the user clicks the submit button. Currently, my script loo ...

javascriptjqueryforms

Navigating through functions and saving outcomes

I need help creating a function that groups JSON elements based on a specific criteria, but I am having trouble with my loop. The goal is to create groups of 12 bottles and return a single JSON list. For example, in this case, the function should extract ...

javascriptjsonfunctionfor-loopreturn

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

Issues arise while utilizing the execute method in PHPUnit-Selenium2

When creating Acceptance tests with PhpUnit and its Selenium2 extension, I am attempting to utilize the execute method within the PHPUnit_Extensions_Selenium2TestCase class to run Javascript code that checks if the document is fully loaded. Here is an exa ...

javascriptseleniumselenium-webdriverphpunit