Vue FullCalendar and triggering a click event

I'm currently utilizing the Vue FullCalendar library for my project and I have successfully implemented a calendar. However, I am facing an issue with getting the date/calendar events to trigger on click.

My calendar is set up in the template like this:

<full-calendar @dateClick="handleDateClick" :config="config" :events="events"/></full-calendar>

Here is my Vue code snippet:

export default {
    data () {
        return {
            events: [
              title: 'My Event',
              start: '2010-01-01'
            ],
            config: {
                defaultView: 'month',
                editable:true,
                eventRender: function(event, element) {
                    console.log(event)
                }
            },
        }
    },
    methods: {
      handleDateClick(arg) {
        alert(arg.date)
      },
    },
}

Although it seems to align with the documentation, the alert is not functioning as expected. My main goal is to link each event's click to a modal displaying that specific event's details.

Can anyone pinpoint what might be going wrong here?

Answer №2

My setup includes the ability to click and drag effortlessly. One key element missing from your code is @select="".

<template>
  <FullCalendar 
    defaultView="dayGridMonth" 
    :plugins="calendarPlugins" 
    :events="events"
    :selectable="true"
    @select="handleSelect"
    @clickDate="handleDateClick"
  />
</template>


<script>
/* eslint-disable */
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';


export default {
  name: 'Home',
  components: {
    FullCalendar
  },
  mounted(){

  },
  data () {
    return {
      events: [{title:'Something', start:'2019-09-12'}],
      calendarPlugins:[dayGridPlugin, interactionPlugin]
    }
  },
  methods:{
    handleDateClick(e){
      console.log(e);
    },
    handleSelect(e){
      console.log(e);
    }
  }
}
</script>

<style lang='scss'>

  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
  @import '~@fullcalendar/timegrid/main.css';
  @import '~@fullcalendar/list/main.css';

</style>

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

`Month filter functionality optimized`

I have a flirty plugin installed on my website and it's working great except for one thing: I'd like the month category to be filtered in chronological order instead of alphabetically. Is there a way to achieve this? In simpler terms, how can I ...

What is the process for determining the text direction of a website's title?

My website is having trouble displaying the title in the correct direction. I've attempted to add dir="rtl" to various tags like html, head, and title, but nothing seems to be working. In the English version I have "Select a service:" In the Arabic ...

javascript: update hidden field if date is past January 15th

Having a bit of trouble with this one after a full day! The form contains a hidden field called 'grant_cycle'. If the form is submitted after January 15th, it should have the value 'Spring, [year]', or if after July 15th, it should be ...

Elegant transition effects for revealing and hiding content on hover

While customizing my WordPress theme, I discovered a unique feature on Mashable's website where the social buttons hide and show upon mouse hover. I'd love to implement this on my own site - any tips on how to achieve this effect? If you have ex ...

What causes the for loop to run indefinitely?

window.TicTacToet.compMove = function (row, col) { var player = window.TicTacToet.PlayerTurn; var board = window.TicTacToet.Board; for (i = 0; i < window.TicTacToet.Board.length; i++) { for (j = 0; j < window.TicTacToet.Board[ ...

Angular prevents the page from reloading when using `$window.location`

I'm facing an issue while trying to refresh my admin page using Angular. I've come across $window.location.reload() and $route.reload(). I attempted to use $window.location.reload() by injecting $window into the function parameters. scope.uploadL ...

Internet sockets, socket.io or any other similar option

As a newcomer to the world of sockets, I apologize if my questions seem simple. I have a hybrid app and a website, and I am interested in having an alert/notification appear on the website when a button is clicked within the app. While Socket io seems pr ...

Run JavaScript code to retrieve the console log using Selenium WebDriver or WatiN

(Apologies for the detailed explanation) I am looking to ensure a page loads entirely before proceeding, but it seems browsers have varied responses when attempting to use readyState or onLoad. In the application I am currently developing, a specific l ...

Tips for resolving Sublime text highlighting issues in react-tutorial documents

Just began the official React.js tutorial and realized that the sublime text highlighting is not working properly. https://i.sstatic.net/XlpVV.png Any suggestions on how to resolve this issue? ...

There seems to be an issue with the Redux connect() higher order component not functioning properly when passing an action creator and

Encountering an issue with the Action creator in react-redux when using the mapDispatchToProps function to return an object to pass into the connect HOC. The strange thing is that it works fine when passing the Action creator directly into the connect HOC, ...

What exactly is the purpose of measuring "First Load JS" in the @next/bundle-analyzer tool?

The analysis generated by the NextJS bundle analyzer appears as follows: Page Size First Load JS ┌ λ / 12 ...

Tips for detecting the backspace key code in an Android browser using JavaScript?

I am faced with a challenge on my HTML JavaScript page... I have implemented a function to handle the keyup event in order to retrieve the key code. Specifically, when the key code is equal to 8 (backspace), a special action should be executed. However, up ...

Using Socket.emit in Ionic may not function as expected

Currently, I'm in the process of establishing a socket connection between my Ionic application and a socket server that I've constructed. The socket connection seems to encounter issues specifically when running the app on an iOS simulator u ...

Comparing two inherited classes in Typescript: A step-by-step guide

Let's say we have two classes: Animal and Dog. The Dog class is a subclass of the Animal class. I am trying to determine the types of these objects. How can I accomplish this task? class Animal {} class Dog extends Animal {} //The object can be of ...

I'm a newbie when it comes to working with streams, but I recently encountered a task that involves downloading a file from an FTP server and then sending it as a stream to an Azure storage

When trying to save data using the Azure stageblock method, I encountered an error stating that the body must be a string, Blob, ArrayBuffer, ArrayBufferView, or a function returning NodeJS.ReadableStream. It seems that FTP sends data in a writable strea ...

Can MUI FormControl and TextField automatically validate errors and block submission?

Are MUI components FormControl and TextField responsible for error handling, such as preventing a form from being submitted if a required TextField is empty? It appears that I may need to handle this functionality myself, but I would like some clarificatio ...

Retrieve a GitLab repository archive with the power of GitLab API and Node.js

I am facing an issue while trying to download (not clone) an archive from my GitLab repository. The error message I receive is: incorrect header check (Zlib._handle.onerror) Below is the function I am using: var fs = require('fs'); var url = ...

Steps for inserting an image onto a blank page

Struggling with HTML and javascript - need help with displaying an image on a new page: Creating a new page and want to show an image on it: thepage= window.open('', '', 'height=700,width=800,left=100,top=100,resizable=yes,scroll ...

JavaScript - change image when clicked or hovered over

I have the knowledge to achieve this using jQuery, however, I am attempting to accomplish the following using traditional JavaScript. Can someone provide assistance: document.querySelectorAll(".thumbnail").forEach(function(elem) { elem.addEventListene ...

User creation causing redirection malfunction

Recently, while working on a website, I encountered an issue with the registration process for users. It was functioning properly when I tested it a few days ago. After making some updates to other aspects of the website such as the login and profile sect ...