V-Calendar 日曆demo組件使用

先看幾個效果圖：

以上是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/