<template>
  <div class="calendar-memo-instance">
    <calendar-memo
      :memo-dates="memoInfos"
      :disabled-dates="disabledDates"
      :on-date-click="onDateClick"
    ></calendar-memo>
  </div>
</template>

<script>
import jsCalendar from "js-calendar";
import CalendarMemo from "@/components/common/CalendarMemo";

export default {
  name: "calendar-memo-instance",
  components: {
    CalendarMemo
  },
  data() {
    return {
      calendar: [],
      memoInfos: ["2018-08-15", "2018-08-31"],
      disabledDates: ["2018-08-16"]
    };
  },
  mounted() {
    // this.getCalendar();
  },
  methods: {
    getCalendar() {
      let jsCal = new jsCalendar.Generator({ onlyDays: true, weekStart: 1 });
      let januaryDays = jsCal(2018, 7);
      let totalDays = januaryDays.daysInMonth;
      let days = januaryDays.cells;
      console.log(januaryDays);
      console.log(totalDays);
      console.log(days);
    },
    onDateClick(date) {
      console.log(date);
    }
  }
};
</script>

<style>
.calendar-memo-instance {
  min-height: 600px;
  padding: 15px;
  background: #fff;
}
</style>
