<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
<!-- Template -->
<template>
  <div class="view-container container-fluid">

    <b-card class="title-container container">
      <h5 class="my-0">
        <span class="badge badge-secondary">Sample</span>
        <span>Bootstrap Calendar</span>
      </h5>
    </b-card>

    <b-card class="form-container container">
      <full-calendar :events="calendarEvents" lang="zh"
                     @changeMonth="changeMonth"
                     @eventClick="eventClick"
                     @dayClick="dayClick"
                     @moreClick="moreClick">

      </full-calendar>
    </b-card>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';
  import fullCalendar from 'vue-fullcalendar'

  const _GuideSampleCalendar = {
    name: 'GuideSampleCalendar',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      const _self = this;
      return {
        calendarEvents: [
          {
            title: 'event1',
            start: '2018-11-01',
            cssClass: 'family',
            YOUR_DATA: {}
          },
          {
            title: 'event2',
            start: '2018-11-01',
            cssClass: 'family',
            YOUR_DATA: {}
          },
          {
            title: 'event3',
            start: '2018-11-01',
            cssClass: 'family',
            YOUR_DATA: {}
          },
          {
            title: 'event4',
            start: '2018-11-01',
            cssClass: 'family',
            YOUR_DATA: {}
          },

          {
            title: 'event2',
            start: '2018-11-02',
            end: '2018-11-03',
            cssClass: ['family', 'career'],
            YOUR_DATA: {}
          }
        ]
      };
    },
    methods: {
      changeMonth: function (start, end, current) {
        console.log('changeMonth', start, end, current)
      },
      eventClick: function (event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      },
      dayClick: function (day, jsEvent) {
        console.log('dayClick', day, jsEvent)
      },
      moreClick: function (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
      }
    },
    components: {
      fullCalendar
    },
    computed: {
      ...mapGetters([])
    }
  };
  export default _GuideSampleCalendar;
</script>
