先看几个效果图：

以上是V-Calendar官网展示出的日历demo效果图（这只是一部分），这么多种类，总有一款适合你

下边说一下使用方法：

通过npm安装依赖：

npm install v-calendar@next

安装完成后在main.js中配置使用
 

import VCalendar from 'v-calendar'; // 引入日历插件

Vue.use(VCalendar, {
  componentPrefix: 'vc',
});

配置完成后就可以正常使用啦。

demo示例：

方法：

<vc-calendar :attributes='attrs'></vc-calendar>

// 当前日期
attrs: [
    {
       key: 'today',
       // 括号内传递日期可点亮指定日期，如new Date(2019, 6, 1)，也可传递多个日期：如dates: [ new Date(2018, 0, 1), new Date(2018, 0, 15) ]
       dates: new Date(),
       highlight: true,
       // popover 点亮的日期上出现提示内容
       popover: {
           label: '美好的一天！要开心呦！',
       },
    },
],

 

V-Calendar官网地址：https://vcalendar.netlify.com/