在使用 Vue Kalendar 应用程序时遇到了一些问题,请按照信中的说明进行操作。
链接在这里:https : //kalendar.altinselimi.com/?ref=madewithvuejs.com
我的代码中有以下内容(必须将 kalendar-vue.css 更改为 KalendarVue.css 才能使其工作,所以不确定我是否遗漏了其他任何内容)。
我现在有几个错误,
创建的钩子错误:“TypeError:无法设置未定义的属性‘getEvents’”
和
创建的钩子错误:“TypeError:无法设置未定义的属性‘buildWeek’”
我正在使用的代码中没有生命周期钩子,所以我不确定组件本身是否有问题,我一直在环顾四周,但没有人提到这一点,所以看起来好像我的代码有问题。
<template>
<kalendar :configuration="calendar_settings" :events="events"/>
</template>
<script>
import {
Kalendar
} from 'kalendar-vue';
import 'kalendar-vue/dist/KalendarVue.css';
export default {
components: {
Kalendar,
},
data: () => ({
events: [],
calendar_settings: {
style: 'material_design',
view_type: 'week',
cell_height: 20,
scrollToNow: true,
current_day: new Date(),
read_only: false,
day_starts_at: 0,
day_ends_at: 24,
overlap: true,
hide_dates: ['2019-10-31'], // Spooky
hide_days: [6],
past_event_creation: true
},
new_appointment: {
title: null,
description: null
}
}),
methods: {
addEvent(popup_data, form_data) {
let payload = {
data: {
title: this.new_appointment.title,
description: this.new_appointment.description,
},
from: popup_info.start_time,
to: popup_info.end_time,
};
this.$kalendar.addNewEvent(
payload,
);
this.$kalendar.closePopups();
this.clearFormData();
},
// Remove Event
removeEvent(kalendarEvent) {
let day = kalendarEvent.start_time.slice(0, 10);
this.$kalendar.removeEvent({
day,
key: kalendarEvent.key,
id: kalendarEvent.kalendar_id,
})
},
}
}
</script>
<style scoped>
</style>
上面的代码是我正在使用的组件。
相关分类