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']"，

 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)