之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。
现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦
现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持
1.总共分为两个组件（父组件calendar.vue）
<template>
<div class="calendar-box">
<ul class="calendar-head">
<li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
</ul>
<calendarContent ref="calendar_swiper" :checkDate="current_day" @on-change="changeIndex">
<div v-for="(month,index) in monthList" :key="index" class="month swiper-item">
<ul v-for="(week,weekindex) in month" :key="weekindex">
<li v-for="(day,dayindex) in week" @click="chooseDay(day.year,day.month,day.day,day.othermonth,day.mode)">
<div class="week-day" :class="{ischecked:checkedDay==day.date,othermonth:day.othermonth,istoday:day.istoday}">
<span style="padding-top:2px;display:block;">
<i class="day">{{day.day}}</i>
<i>{{day.nongli.old_str}}</i>
</span>
<div class="thing">
<a :style="{color:thing.color}" v-for="thing in day.thing">{{thing.title}}</a>
</div>
</div>
</li>
</ul>
</div>
</calendarContent>
</div>
</template>
<script>
import calendarContent from '../test_canlen/swiper-monthorweek.vue'
import format from '../test_canlen/format'
export default{
data(){
return{
disp_date:new Date(),
today:new Date(),
current_day:new Date(),
monthList:[],
checkedDay:'0000-00-00',
can_click:true,
}
},
created(){
this.get3month()
},
methods:{
chooseDay(year,month,day,othermonth,mode){
// 为了PC端点击事件和移动冲突
if(!this.can_click)return
this.current_day = new Date(year,month,day)
this.checkedDay = this.format(year,month,day)
if(othermonth && mode == 'month'){
var _tmpdt = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth()-othermonth,0)
var maxday = _tmpdt.getDate()
var _day = maxday<day?maxday:day
this.disp_date = new Date(year,month-othermonth,_day)
this.changeIndex(othermonth,false,true)
}else if(othermonth && mode == 'week'){
this.disp_date = this.current_day
}else{
this.disp_date = this.current_day
}
},
format(year,month,day){
month++
month<10&&(month='0'+month)
day<10&&(day='0'+day)
