search

Wanderxx / vue-fullcalendar

vue calendar fullCalendar. no jquery required. Schedule events management
https://wanderxx.github.io/vue-fullcalendar/
1.51k stars 387 forks source link

Events doesn't working #27

Closed lucasdealmeida closed 7 years ago

lucasdealmeida commented 7 years ago

Hi, all events doesn't working in my App, could you help me?

<appoiment-list inline-template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <full-calendar :events="events" v-on:changeMonth="updateMonth" lang="en"></full-calendar>
            </div>
        </div>
    </div>
</appoiment-list>

Vue.component('appoiment-list', {
    data() {
        return {
            events: []
        }
    },
    components : {
        'full-calendar': require('vue-fullcalendar')    
    },
    methods: {
        'updateMonth' (start, end, current) {
            console.log('changeMonth', start, end, current)
        }
    }
});
Wanderxx commented 7 years ago

Hi, Which Vue & vue-fullcalendar version are you working on?

lucasdealmeida commented 7 years ago 
{
  "private": true,
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^6.2.10",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "babel-preset-es2015": "^6.18.0",
    "buble": "^0.15.1",
    "css-loader": "^0.26.1",
    "gulp": "^3.8.8",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8"
  },
  "dependencies": {
    "bootstrap": "^3.0.0",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "moment": "^2.10.6",
    "moment-duration-format": "^1.3.0",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "~2.1.8",
    "vue-fullcalendar": "^1.0.8",
    "vue-resource": "~1.0.1",
    "vue-strap": "^1.1.36",
    "vue-tables-2": "^0.2.71"
  }
}
lucasdealmeida commented 7 years ago

I changed my code to this and working fine now, but I don't understand why, do you have some idea?

<appoiment-list></appoiment-list>
Vue.component('appoiment-list', {
    data() {
        return {
            fcEvents: [{
              title : 'Sunny Out of Office',
              start : '2016-08-25',
              end : '2017-07-27'
            }]
        }
    },
    template: `<div>
    <p>
        Here is the demo of vue-fullcalendar, no jquery fullcalendar.js required!
    </p>
    <full-calendar :events="fcEvents" 

      @changeMonth="changeMonth"
      @eventClick="eventClick">
    </full-calendar>
  </div>`,
    components : {
        'full-calendar': require('vue-fullcalendar')    
    },
    methods: {
        'changeMonth' (start, end, current) {
            console.log('changeMonth', start, end, current)
        },
        'eventClick' (event, jsEvent, pos) {
            console.log('eventClick', event, jsEvent, pos)
        }    
    }
});
Wanderxx commented 7 years ago

Hi,

I never tried used inline-template before, so

My guess is the inline-template changed the scope and then event won't be catching. So when you directly write the calendar in template, everything works well.

jemliF commented 7 years ago

I am having a bad day using this component: