How can Vue FullCalendar be configured dynamically?

I am trying to dynamically change some options in Vue FullCalendar, but the calendar is not applying them.

You can check out my example here.

The button at the bottom should set the maxTime option from 20:00 to 18:00.

Is there a way to refresh the calendar view after making these changes?

Answer №1

I finally discovered the solution!

this.$refs.calendar.triggerAction('set', parameterName, parameterValue)

Answer №2

To utilize the calendar component, it is essential to specify a reference for it and invoke setOption on its API

<full-calendar :config="config" :events="events" ref="calendarRef" />
...
this.$refs.calendarRef.getApi().setOption('maxTime', '18:00:00');

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

Retrieving the JSON value from a data attribute and then locating the corresponding JSON key in a designated element within the DOM

I have an HTML element that contains a data attribute: <a href="#" data-trigger="{ "rem": "albatros", "ap":1 }'">Remove</a> <div data-container> <p>lorem ipsum<p> <p data-rem></p> </div> 1. So ...

Is there a method to measure the time it takes to download a script apart from its actual execution time

I am looking to track timing variables for my primary JavaScript load. One approach could be: <script> performance.mark('script-start') </script> <script src="something.js"></script> Later in something.js, inc ...

Achieve a seamless redirection to the 404 component in Angular without altering the browser URL, while ensuring that the browsing

Whenever my backend sends a 404 error (indicating that the URL is valid, but the requested resource is not found, such as http://localhost:4200/post/title-not-exist), I need Angular to automatically redirect to my NotFoundComponent without altering the URL ...

Error: An unidentified SyntaxError occurred with an unexpected token < within an anonymous function displayed on the console

In the process of developing an upload file application. The implementation involves AJAX and PHP. Everything functions smoothly on the localhost, but upon transferring it to the web server, a specific error is encountered: Uncaught SyntaxError: Unexpe ...

Handlers for event(s) not triggering on video element

In my NextJS application, I have implemented a feature to display a video file using the video element. I have added multiple event handlers to the video element: <video className='video-player' controls={true} preload='metadata&apo ...

Guide to clicking on a user and displaying their details in a different component or view using Vue.js router

Currently working on a Vuejs project that requires the following tasks: Utilize an API to fetch and display a list of users (only user names) on the home page. Create a custom search filter to find users based on their names. Implement functionalit ...

Managing authentication tokens in next.js

I'm currently working on a next.js app that requires authorization for certain functionalities. In the past with CRA, I would store the token in a config.js file and easily import, use, and update it throughout my application. Here is an example of ho ...

Which specific jQuery functionality was made visible?

When it comes to jQuery, how is it exposed? // Expose jQuery to the global object window.jQuery = window.$ = jQuery; However, there are in fact two versions of jQuery: var jQuery = (function() { // Define a local copy of jQuery var jQuery = function( s ...

The client using socket.io is receiving events for "double plus one"

While experimenting with socketio, I encountered a bug that others are experiencing as well but I haven't been able to find a valid solution. This is the server-side code: const app = require('express')(); const server = require('http& ...

What is the best way to retrieve both a response JSON and headers using Got?

Currently, I am utilizing Got for sending requests to a Strapi API from Node.js. The code snippet demonstrates how I achieve this: res.setHeader('Content-Type', 'application/json') try { const request = req.query.request const decod ...

Utilize moment.js to format a datetime and display the corresponding timezone

I'm having trouble displaying timezones correctly using moment.js. I attempted to use the following code: var result = moment(someDate).format("MM/DD/YYYY HH:mm A Z"); This returns something like: 08/05/2015 06:18 PM +02:00, which is okay, but I w ...

JavaScript may fail to execute properly if the <!doctype html> declaration is not inserted in the correct syntax

While building a web page, I encountered an issue with my JavaScript code not working when using <!doctype html> or any type of <!doctype> at the top of the page. Can someone explain this error? After researching online, I learned that <!do ...

struggling to update an array with user inputs on my to-do list app

I'm currently in the process of creating a small to-do list with some specific functionality. I want each text input (or a copy of it) to be added to an empty string, ensuring that the original input remains unchanged. The goal is to have a function t ...

A guide on utilizing Stripe's payment_intent_data feature to automatically send an email to the customer following a successful transaction

I am struggling to send an email to the client after a successful payment. The documentation mentions setting "payment_intent_data.receipt_email", but my code below is not working as expected (no emails are being received). How should I properly configur ...

NodeJS does not support the Array.Push method

I'm having trouble getting this code to work. I want to generate 5 random items from my database and store them in an array called 'dato'. However, when I print the array, it appears to be empty. /* GET users listing. */ router.get('/& ...

Express.js Server Side Rendering - GET request for '/json/version/'

I have a running express server that pre-renders my react application. The routes file matches the HomeContainer to the base route / and all other routes match to the page not found. import HomeContainer from 'containers/home-container/home-container ...

Encountering null values in IE8/IE7 JavaScript code

Although I am not a JavaScript expert, I have a simple function that works perfectly in all browsers except for IE8 and 7. function setSelected() { var backgroundPos = $('div.eventJumpToContainer').find('.selected').css('backg ...

Having trouble installing dependencies in your Vue project?

I recently encountered an error while running the npm i command on our Vue project to install all node packages. I'm not sure what this error means or how to resolve it. https://i.stack.imgur.com/rP2iU.png ...

Troubleshooting error in Vue project: "hasOwnProperty" property or method not supported by object in IE11

While working on a vue app with vue advanced webpack template, I didn't pay much attention to Internet Explorer compatibility. However, today when I tried running the app on IE browser, I encountered some strange errors. https://i.stack.imgur.com/1e6 ...

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...