Title Undefined

[ngooide]

Does anyone know how to solve this problem? Thank you.

[BrockReece]

I think this is usually down to loading the fullcalendar library twice.

[ngooide]

BrockReece, Thanks for the reply. Hmm... weird.. if the library loaded twice, I'm guess it will shows up on the resource... btw, what other chances that this will happen?

[BrockReece]

It looks like you have jQuery loading twice?

[ngooide]

No luck... Even remove jquery.

[ngooide]

"devDependencies": {
        "axios": "^0.17.1",
        "babel-preset-stage-2": "^6.24.1",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "3.3.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.15",
        "moment": "latest",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "fullcalendar-scheduler": "^1.9.3",
        "vue-axios": "^2.1.4",
        "vue-ctk-date-time-picker": "^2.1.1",
        "vue-full-calendar": "2.5.2",
        "vue-js-modal": "^1.3.31"
    }

copy exactly from the example provided

[BrockReece]

Have you seen this thread? https://github.com/fullcalendar/fullcalendar/issues/3911#issuecomment-459455626

[ngooide]

Yup seen this before. but it doesn't work for me. Hope my code is correct.

<template>
    <full-calendar :config="config" :event="events"/>
</template>

<script>

    // import FullCalendar from "vue-full-calendar";

    import FullCalendar from "fullcalendar-scheduler";
    import "fullcalendar/dist/fullcalendar.min.css";
    import "fullcalendar-scheduler/dist/scheduler.min.css";

    Vue.use(FullCalendar);

    import moment from "moment";
    export default {
   ...

[ngooide]

Finally I got it right. But I think this is not the right way of doing it. Could anyone pls assist me on the right way of doing it?

[BrockReece]

If you have directly edited the node_modules dir, the changes will not be properly persisted. My guess is that your versions of vue-full-calendar and fullcalendar-scheduler depend on different/incompatible versions of fullcalendar and thus is loading fullcalendar twice.

You can use commands like...

npm ls fullcalendar
// or
yarn list fullcalendar

To list the different versions you have loaded in your project. As an example, here is me searching my project for the node-fetch package

yarn list node-fetch
yarn list v1.12.3
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ @nuxt/opencollective@0.2.1
│  └─ node-fetch@2.3.0
├─ apollo-env@0.5.1
│  └─ node-fetch@2.6.0
├─ apollo-graphql@0.2.0
│  └─ node-fetch@2.6.0
├─ isomorphic-fetch@2.2.1
│  └─ node-fetch@1.7.3
└─ node-fetch@2.2.0
✨  Done in 1.08s.

[ngooide]

Yea you are right. These component r using different version of fullcalendar.

But the version reference From vue-full-calendar@2.5.2 (fullcalendar@3.10.0) to vue-full-calendar@2.7.0 (fullcalendar@3.9.0)

It still show "undefined..." even there is only 1 version.

Apology that I'm still learning.

[ngooide]

This is what I've tested & it works properly.

1. node_modules/vue-full-calendar,

   // import 'fullcalendar'

2. my own file "vue-calendar.vue", I add in this

   import 'fullcalendar'

3. my own file "vue-scheduler.vue",

   import FullCalendar from "vue-full-calendar";
   // import 'fullcalendar'
   import "fullcalendar-scheduler";

   If I unmark "import 'fullcalendar'", "undefined" will appear.

"devDependencies": {
        "axios": "^0.17.1",
        "babel-preset-stage-2": "^6.24.1",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "3.3.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.15",
        "moment": "latest",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "fullcalendar": "^3.9.0",
        "fullcalendar-scheduler": "^1.9.4",
        "vue-axios": "^2.1.4",
        "vue-ctk-date-time-picker": "^2.1.1",
        "vue-full-calendar": "^2.7.0",
        "vue-js-modal": "^1.3.31"
    }