Vue Kalendar插件created钩子报错：getEvents与buildWeek未定义

Let's break down what's causing those created hook errors and walk through how to fix them:

Root Cause #

The core issue here is that you’re trying to access this.$kalendar in your component methods, but you haven’t globally registered the Kalendar plugin in your Vue app. Without registering the plugin, the $kalendar instance doesn’t exist on the Vue prototype—so when the component tries to set properties on it during the created hook, it throws those "undefined" errors.

There are also a couple of small code typos and missing methods in your component that need cleaning up.

Step-by-Step Fixes #

1. Globally Register the Kalendar Plugin #

In your app’s entry file (usually main.js), import and register the plugin to make $kalendar available across all components:

import Vue from 'vue'
import { Kalendar } from 'kalendar-vue'
import 'kalendar-vue/dist/KalendarVue.css'

Vue.use(Kalendar) // This is the critical missing step!

2. Fix Component Code Issues #

Looking at your component, there are a few small bugs to address:

• You referenced popup_info in addEvent but the parameter is named popup_data
• The clearFormData method is called but never defined
• You’re not using the form_data parameter passed to addEvent (adjust as needed for your use case)

Here’s the corrected component code:

<template>
  <kalendar :configuration="calendar_settings" :events="events"/>
</template>

<script>
// You can keep this import if you prefer component-level registration, but it's optional if you registered globally
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) {
      // Use the correct parameter name: popup_data instead of popup_info
      let payload = {
        data: {
          title: this.new_appointment.title,
          description: this.new_appointment.description,
        },
        from: popup_data.start_time,
        to: popup_data.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,
      })
    },
    // Define the missing clearFormData method
    clearFormData() {
      this.new_appointment = {
        title: null,
        description: null
      }
    }
  }
}
</script>

<style scoped>
</style>

3. Confirm Style Import #

You noted needing to rename kalendar-vue.css to KalendarVue.css—double-check that the filename matches exactly what’s in your node_modules/kalendar-vue/dist folder (casing matters on case-sensitive systems like Linux or macOS).

Why This Works #

Registering the plugin with Vue.use(Kalendar) installs the Kalendar instance onto Vue’s prototype, making this.$kalendar accessible in all your components. This resolves the "undefined" errors during the created hook, as the plugin will properly initialize the getEvents and buildWeek methods on the $kalendar instance.

内容的提问来源于stack exchange，提问作者Mtlj1991