vue2-event-calendar-pro是一个实现日历功能的VueJS组件库。这个库可以用来在你的网站中创建漂亮、易用的日历，适用于个人、团体和企业使用。
前置条件
在开始使用vue2-event-calendar-pro之前，你需要确保已完成以下操作：
- 安装node.js
- 把VueJS添加到你的项目中
- 了解使用npm安装包的基本知识
安装
要使用vue2-event-calendar-pro，可以在你的VueJS项目运行以下命令来安装它：
npm install vue2-event-calendar-pro --save
当你运行这个命令时，npm将会安装这个包并把它添加到你的项目中。
使用
让我们来看看如何在VueJS项目中使用vue2-event-calendar-pro。在你的VueJS组件中，首先要做的是导入vue2-event-calendar-pro：
import EventCalendar from 'vue2-event-calendar-pro';
接着，你需要在VueJS组件中注册EventCalendar这个组件：
export default {
components: {
'event-calendar': EventCalendar
}
}然后就能在模板中使用event-calendar组件了：
<template>
<event-calendar :events="events"></event-calendar>
</template>在这个例子中，我们传递了一个名为events的属性到event-calendar组件中。这个属性是一个数组，它包含你将要在日历中显示的事件。
事件属性和格式
每个事件都需要有以下属性：
title：事件的标题。start：事件的开始时间。可以是一个Javascript日期对象或一个日期字符串，要求符合ISO 8601标准。如：“2019-10-10T14:48:00.000Z”。end：事件的结束时间。可以是一个Javascript日期对象或一个日期字符串，要求符合ISO 8601标准。如：“2019-10-10T14:48:00.000Z”。backgroundColor：事件的背景色。可以是一个CSS颜色值，如“#aabbcc”。textColor：事件的文字颜色。可以是一个CSS颜色值，如“#ffffff”。
以下是一个使用events属性的例子：
-- -------------------- ---- -------
---- -- -
------ -
------- -
-
------ -----
------ ---------------------------
---- ---------------------------
---------------- ----------
---------- ---------
--
-
------ -----
------ ---------------------------
---- ---------------------------
---------------- ----------
---------- ---------
-
-
-
-配置
你可以通过使用以下属性来配置event-calendar组件：
events：一个数组，包含所有要在日历中显示的事件。firstDay：日历的第一天。默认值为星期日。星期一是1，星期二是2，以此类推，星期天是0。showLimit：每天事件的最大显示数量。默认值为2。lengthTime：日历每个格子的时间长度(分钟),默认60分钟。showHeader：日历是否显示头部。默认值为true。showAllDay：日历是否显示全天事件的头部。默认值为true。showStartEnd：日历是否显示事件的开始和结束时间。默认值为true。dateFormat：全局日历中日期格式，默认为yyyy-mm-dd。
<event-calendar :events="events" :firstDay="2" :showLimit="5"></event-calendar>
国际化
如果你想把日历的语言设置为中文，可以通过引入./lib/calendar-locale.js来实现。在VueJS组件中首先需要引入./lib/calendar-locale.js，
import './lib/calendar-locale'
然后在VueJS组件设置全局语言，
cal.setLocale('zh-CN')多个日历
如果你需要在同一页上使用多个日历，可以在VueJS组件中通过为每个日历提供一个唯一的id属性来实现：
<event-calendar :id="1" :events="events1"></event-calendar> <event-calendar :id="2" :events="events2"></event-calendar>
总结
在这篇文章中，我们介绍了一个优秀的VueJS日历组件vue2-event-calendar-pro。我们了解了如何在VueJS项目中安装和使用这个组件库，在配置组件上有一定的讲解。希望这篇文章有助于你在你的项目中使用这个组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5a81e8991b448ebdb8