首先贴出uni-app日历组件的地址：http://ext.dcloud.net.cn/plugin?id=56
在网站中下载到本地后，将其放入项目组件的文件夹中后其使用方法为：
<template> <view> <calendar :date="date" :lunar="true" :disable-before="true" :start-date="'2019-3-2'" :end-date="'2019-5-20'" @change="change" @to-click="toClick" /> </view> </template> import calendar from "@/components/uni-calendar/uni-calendar" export default { components: { calendar }, data() { return { date:'2019-03-10' }; }, methods: { change(e) { console.log(e); }, toClick(e) { console.log(e); } } };运行成功后大概长这个样子
我所需要开发的项目，需要变更样式，以及具有日期打点功能，但是官网中并没有给出配置的选项，但经过查看源码可知，该组件具有打点功能，需要配置如下：
<calendar :selected="selected" :date="date" @change="change" @to-click="toClick" />增加了一个selected属性，在date中，定义如下形式：
selected: [{ date: '2019-5-21' }, { date: '2019-5-22' }, { date: '2019-5-24' }, { date: '2019-5-25' }]运行后打点功能就完成了，如下图所示：
接下来就是更改一些样式属性，比如当前选中日期样式，在源码中，控制当前选中样式的代码在uni-calendar-item.vue文件中，
类名为.uni-calender__date-current，可以修改背景颜色，字体等等。
在真机测试中，会出现最后一行日期显示不全的情况，经过查看源码，发现作者把swiper组件高度写死了，直接写成了256px，所以在不同手机测试中效果就不同，解决办法就是修改swiper的style属性，作者修改成了如下
<swiper v-else class="uni-calendar__body" :style="{ height: 70+'vh' }" :current="currentIndex" circular :vertical="slide === 'vertical' ? true : false" skip-hidden-item-layout :duration="duration" @animationfinish="animationfinish" @change="change"> <swiper-item v-for="(item, itemindx) in swiperData" :key="itemindx"> <view :class="elClass"> <uni-calendar-item :canlender="item" :lunar="lunar" @selectDays="selectDays"></uni-calendar-item> </view> </swiper-item> </swiper>设置成了百分之70视口高度，就显示出来了，这些都可以根据自己项目调整~
