Issue with FullCalendar-vue and Typescript: the property 'getApi' is not recognized

Struggling to integrate FullCalendar-vue with Typescript, I encountered a problem when trying to access its API.

This is how my calendar is set up:

<FullCalendar ref="fullCalendar" :options="calendarOptions" style="width: 100%" />

To make the API accessible throughout my component, I created a computed property:

computed: {
  calendar() {
    return this.$refs.fullCalendar.getApi() // Error: Property 'getApi' does not exist on type 'Vue | Element | Vue[] | Element[]'.
  },
}

The error message says:

Error: Property 'getApi' does not exist on type 'Vue | Element | Vue[] | Element[]'.

I'm unsure how to inform VS Code that this.$refs.fullCalendar should be recognized as a Calendar instance.

typescriptvue.jsfullcalendar

Answer №1

Here is a quick and easy solution:

computed: {
  calendar() {
    return (this.$refs.fullCalendar as InstanceType<typeof FullCalendar>).getApi()
  },
}

If you are utilizing the composition API:

  ...
  const fullCalendar = ref<InstanceType<typeof FullCalendar>>()

InstanceType helps you to retrieve the type of a class instance.

Answer №2

Instead of handling this in a computed property, I discovered that setting it in the mounted() lifecycle hook was more effective.

<template>
  <FullCalendar ref="calendar" :options="calendarOptions" />
</template>

...

  data() {
    return {
      calendarApi: null,
    }
  }
...
  mounted() {
     this.calendarApi = this.$refs.calendar.getApi();
  }

After doing this, I can now refresh the calendar data by invoking a custom function within the methods:

refetchEvents() {
  this.calendarApi.refetchEvents();
}

I'm not entirely sure if this aligns with your use case for the API, but I believe it could be helpful!

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

Discovering the generic type from an optional parameter within a constructor

Looking to implement an optional parameter within a constructor, where the type is automatically determined based on the property's type. However, when no argument is provided, TypeScript defaults to the type "unknown" rather than inferring it as "und ...

javascripttypescript

Event-Propagation in Angular 5 with mat-expansion-panel within another component

In my project, I am facing a challenge where I need to create multiple mat-expansion-panels within one mat-expansion-panel. Everything works fine except for the issue that when I try to open a child-panel, it triggers the close-event of the parent-panel. ...

angulartypescripteventsangular-materialstoppropagation

Changing the time in Angular while converting a string to a date object has proven to be

Can anyone help me with a problem I'm having trying to convert a String into a Date object without it being affected by timezone changes? Specifically, when I receive 2020-07-14T15:27:39Z from an http get request, I need to convert this into a Date o ...

angulartypescriptdatetimetimezone

Transfer an Array of Objects containing images to a POST API using Angular

Looking to send an array of objects (including images) to a POST API using Angular and Express on the backend. Here's the array of objects I have: [{uid: "", image: File, description: "store", price: "800"} {uid: "f ...

javascriptarraysangulartypescriptobject

Unable to locate the name 'Cheerio' in the @types/enzyme/index.d.t file

When I try to run my Node application, I encounter the following error: C:/Me/MyApp/node_modules/@types/enzyme/index.d.ts (351,15): Cannot find name 'Cheerio'. I found a suggestion in a forum that recommends using cheerio instead of Cheerio. H ...

javascriptnode.jstypescriptcheerio

The error message encountered while using webpack with TypeScript and React is: "Unexpected token React.Component

I am currently working on setting up a project using webpack, typescript, and react. I have implemented babel to transpile my typscript/react code. However, when starting the development server, I encountered the following error: Module parse failed: Un ...

reactjstypescriptwebpackbabeljsbabel-loader

Error in Vue Composition API: Attempted to access undefined property '$createElement'

I've been working with Nuxt, Nuxt Typescript, TSX, and Vue Composition API. Recently, I converted a .vue component to a .tsx one. Instead of using a render method, I returned the JSX directly from the setup function. However, I encountered an error du ...

vue.jsvue-componentjsxnuxt.js

Arranging a dictionary by its keys using Ramda

My task involves manipulating an array of items (specifically, rooms) in a program. I need to filter the array based on a certain property (rooms with more than 10 seats), group them by another property (the area the room is in), store them in a dictionary ...

javascripttypescriptramda.js

The parameter type 'void' cannot be assigned to the parameter type 'SetStateAction<{}>'

Currently, I am in the process of developing an application utilizing TMDB with NextJS and Typescript. Within my movies.ts file, I have implemented the following code: export async function getTrendMovies() { const url = 'https://api.themoviedb.o ...

reactjstypescriptnext.js

Steps to eliminate the typescript template from create-react-app

Initially, I decided to incorporate TypeScript into my React project, which led me to run the command npx create-react-app my-app --template typescript. However, now I'm looking for a way to revert back and remove TypeScript from my setup. Is there a ...

reactjstypescript

When using the ionic 3 storage.get function, it may return a null value when accessed outside

In regards to storage, the function is returning a null value outside of the function. Below is the code snippet: username:any; this.storage.get('user').then((value) => { this.username = value; }); console.log(this.username); Ou ...

angulartypescriptionic3

Creating a Vuejs function that automatically updates the value after a set period of time

My goal is to continuously change the value of a boolean over time and then pass that value individually to a child component. The function changeActive() is used to toggle the active boolean. I aim to cycle through different props for the boolean, switc ...

vue.jsvue-props

Tips for targeting the Next button press event and setting focus in an Ionic-vue application

Struggling to shift focus from one input to another on Android/iOS keyboard using the next button? The setFocus method lacks examples, making it difficult to implement. Has anyone successfully achieved this before and can provide an example? Here's ...

vue.jsvuejs3ionic-vue

What is the best way to specify data types for all attributes within an interface?

In building an interface for delivering strings in an i18n application: interface ILocaleStringsProvider { 'foo': string 'bar': string 'baz': string 'blablabla': string // numerous other string properties ...

typescript

Can't get className to work in VueJS function

I need help changing the classNames of elements with the "link" class. When I call a method via a click action, I can successfully get the length of the elements, but adding a class does not seem to work. Does anyone have any insights into this issue? HTM ...

javascriptvuejs2vue.js

Evaluating observables in .pipe angular 8 jasmine

In my component, I have a subscription to triggerRuleExecutionService which is triggered by another component using next(). Within the pipe, I am using switchMap to make an HTTP service call and retrieve data from the database. this.ruleExecutionService ...

angulartypescriptjasminekarma-runner

Testing a Vue component that includes a Vuetify data table with customized slots

I have been struggling to write a Jest test for a simple component that includes a nested v-data-table component. While the page renders correctly in the browser, my test keeps failing. The problem seems to lie with the template I am using for the slot - ...

javascriptvue.jsecmascript-6jestjsvuetify.js

Error-throwing constructor unit test

In my code, I have implemented a constructor that takes in a configuration object. Within this constructor, I perform validations on the object. If the validation fails, I aim to throw an error that clearly describes the issue to the user. Now, I am wonde ...

angulartypescriptunit-testingjasmine

Unable to assign a value to an element obtained from the Axios response in React

I'm having trouble mapping an array, it doesn't seem to be working. You can find the code here : https://codepen.io/ilaan16/pen/eYRKgOm setUtils(result.data); if (!utils) { console.log("ERROR_UTILS", result); } else if ...

reactjstypescript

Modify the interface type whilst maintaining the structure of nested objects

In my system, I have a specific interface that outlines the structure of a NoSQL document schema. This includes strings, arrays, nested objects, and more. Here's an example representation: interface IStudentSchema { name: string; age: string; f ...

typescripttypescript-typings