目录
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-callocale="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)
