How to Install and Use V-Calendar (vue.js)?

0
votes

I'd like to use the V-Calendar library in my Vuetify app. The app had worked so far, but unfortunately I did not manage to install the V-Calendar library correctly.

No errors are displayed, but the website has stopped working. It becomes completely white and nothing is displayed. I followed V-Calendar Installation.

What I tried:

1. NPM

npm install v-calendar

2. v-calendar.js in plugins folder

  • In the folder where main.js is located: New file ./plugins/v-calendar.js created

3. v-calendar.js:

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker components
Vue.use(VCalendar);

export default new VCalendar({
});

4. main.js:

...
import VCalendar from './plugins/v-calendar';
...
new Vue({
  router,
  store,
  vuetify,
  VCalendar,
  render: h => h(App)
}).$mount('#app')

EDIT 1:

I deleted v-calendar.js. I updated main.js (see @pretzelhammer answer).

/views/Home.vue:

<v-date-picker v-model="date" />

export default {
  name: "Home",
  data: () => ({
    date: new Date(),
  }),
};

Unfortunately no calendar is displayed. v-calender works, but v-date-picker doesn't work.

EDIT 2:

  • 149 Errors:
    • Examples:
      • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
      • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
      • [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, got Date. found in ---> < VDatePicker >
      • [Vue warn]: Error in data(): "TypeError: dateString.split is not a function". found in ---> < VDatePicker >
  • 1 Warning:
    • [Vuetify] Value must be a String, got Date. found in ---> < VDatePicker >

Update EDIT 2:

  • I solved the the following two errors as follows:
    • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
    • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
  • Solution:
v-for="(item, id) in items" :key="id"

instead of:

v-for="item in items" :key="item"
1
javascriptvue.jsnpmvuejs2vuetify.js
i dont think you need to export a VCalendar instance in the plugin file and you don't need to include VCalendar in the Vue constructor as well, – Ali Hassan
thanks @AliHassan, I updated the code but it still doesn't work. – KplnMoon
Are you getting any JS errors in the console tab of DevTools? Also, are you using the latest version of the v-calendar library? – pretzelhammer
Yes, v-calendar is up to date (v2.1.1) and unfortunately I have a lot of errors and a warning. (see question) – KplnMoon
@pretzelhammer I fixed all the "String" errors with new Date().toISOString(). Now I only have the following errors when I use v-date-picker: (1) [Vue warn]: Error in render: "RangeError: Invalid time value" and (2) RangeError: Invalid time value – KplnMoon

1 Answers

0
votes

You didn't follow the instructions correctly. All you need to do is:

1. NPM

npm install v-calendar

2. main.js

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  componentPrefix: 'vc',
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

And then you'll be able to use the vc-calendar and vc-date-picker components in any of your Vue templates.