推荐使用：vue-calendar-component - 轻巧高效的Vue日历组件

<template>
  <div id="app">
    <vue-calendar 
      :time="time" 
      :events="events" 
      @change-month-year="changeMonthYear" 
      @change-day="changeDay"
    ></vue-calendar>
  </div>
</template>
 
<script>
import VueCalendar from 'vue-calendar-component';
 
export default {
  components: {
    VueCalendar
  },
  data() {
    return {
      time: {
        year: 2021,
        month: 5,
        day: 16
      },
      events: [
        {
          date: '2021-05-17',
          notes: 'This is a test event'
        },
        // ... 更多事件
      ]
    };
  },
  methods: {
    changeMonthYear(payload) {
      // 处理月份和年份变化
      console.log('New month and year:', payload);
    },
    changeDay(payload) {
      // 处理日期变化
      console.log('New date selected:', payload);
    }
  }
};
</script>

这个例子展示了如何在Vue应用中使用vue-calendar-component。它定义了一个日历组件，并在数据对象中设置了当前时间和一些事件。同时，它实现了两个方法用于处理月份和年份的变化以及日期的变化。这个例子简洁明了，并且清晰地展示了如何将日历组件集成到Vue项目中。