I'm currently in the process of setting up a calendar similar to the one showcased on vuetify's website
The only difference is that I'm utilizing class-components in TypeScript instead of JavaScript.
I'm encountering errors when making calls to
this.$refs.calendar.some_functionThe error states: Property 'getFormatter' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'getFormatter' does not exist on type 'Vue'.
Error message: Property 'prev' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'prev' does not exist on type 'Vue'.
Error pops up: Property 'next' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'next' does not exist on type 'Vue'.
Additionally, there are many other console errors appearing in the browser such as:
Issue with property or method "setToday" not being defined in the instance but referenced during render
This error seems to occur for every function. Could it be related to compilation issues in TypeScript?
The template structure mirrors the one displayed on their site, and my class setup looks like this (some non-affected functions removed):
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class AboutComponent extends Vue {
private today: string = '2019-01-08';
private focus: string = '2019-01-08';
private type: string = 'month';
private typeToLabel: any = {
month: 'Month',
week: 'Week',
day: 'Day'
};
private start: any = null;
private end: any = null;
private selectedEvent: any = {};
private selectedElement: any = null;
private selectedOpen: boolean = false;
private events: any[] = []; // Contains same events as the ones on their page
private get title () {
const { start, end } = this;
if (!start || !end) {
return '';
}
const startMonth: any = this.monthFormatter(start);
const endMonth: any = this.monthFormatter(end);
const suffixMonth: any = startMonth === endMonth ? '' : endMonth;
const startYear: any = start.year;
const endYear: any = end.year;
const suffixYear: any = startYear === endYear ? '' : endYear;
const startDay: string = start.day + this.nth(start.day);
const endDay: string = end.day + this.nth(end.day);
switch (this.type) {
case 'month':
return `${startMonth} ${startYear}`;
case 'week':
return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`;
case 'day':
return `${startMonth} ${startDay} ${startYear}`;
}
return '';
}
private get monthFormatter () {
return this.$refs.calendar.getFormatter({
timeZone: 'UTC', month: 'long'
});
}
private prev () {
this.$refs.calendar.prev();
}
private next () {
this.$refs.calendar.next();
}
}
</script>
How can I properly inform TypeScript about these existing functions? Appreciate the help!