vue-cal 使用教程

目录

0. 介绍及效果展示

1.vue2环境安装

2.页面引入

3.使用

4.效果图

---

0. 介绍及效果展示

vue-cal 组件比较灵活，可以随意切换年、月、周、日、时间历图，放几张截图看下效果

1.vue2环境安装

vue3直接可以看本文最下方的API，有详解

 npm i vue-cal@legacy -S        

2.页面引入

import 'vue-cal/dist/vuecal.css';
import VueCal from 'vue-cal';

组件声明 

components: {
    VueCal
  },

3.使用

因为使用的是月历，所以把disable-views属性设置成了"['years', 'month']"，

<vue-cal
                locale="zh-cn"
                hide-view-selector
                :dblclick-to-navigate="false"
                :time="false"
                :transitions="false"
                active-view="year"
                events-count-on-year-view
                :disable-views="['years', 'month']"
                :events="events"
              />

 events数据结构

events: [
        {
          start: '2023-11-19 10:35',
          end: '2023-11-19 11:30',
          title: 'Doctor appointment'
        },
        {
          start: '2023-11-19 18:30',
          end: '2023-11-19 19:15',
          title: 'Dentist appointment'
        },
        {
          start: '2023-11-20 18:30',
          end: '2023-11-20 20:30',
          title: 'Crossfit'
        },
        {
          start: '2023-11-21 11:00',
          end: '2023-11-21 13:00',
          title: 'Brunch with Jane'
        },
        {
          start: '2023-11-21 19:30',
          end: '2023-11-21 23:00',
          title: 'Swimming lesson'
        },
        {
          start: '2023-09-30 19:30',
          end: '2023-09-30 23:00',
          title: 'Swimming lesson'
        },
        {
          start: '2023-9-19 12:00',
          end: '2023-9-19 14:00',
          title: 'LUNCH',
          class: 'lunch',
          background: true
        },
        {
          start: '2023-10-20 12:00',
          end: '2023-10-20 14:00',
          title: 'LUNCH',
          class: 'lunch',
          background: true
        }
      ]

4.效果图

个人感觉vue-cal 比 v-calendar 更好用呢，可能因为api写的深入我心，资料比较齐全吧

vue-cal组件的API地址☞Vue Cal (antoniandre.github.io)