vue 简单日历组件
首页
<!--showToday:是否显示返回今天按钮 on-click：监听组件内的点击事件-->
<template>
<my-calendar :showToday='true' @on-click='showInfo'></my-calendar>
</template>
<script>
import myCalendar from './components/myCalendar'
export default {
components: {
myCalendar
},
methods: {
showInfo(data){
if(data == 0){
alert('你点击了上一个月')
}else{
alert('你点击了下一个月')
}
}
}
}
</script>
组件
<template>
<div class="cal-wrap">
<div class="cal-top">
<Affix :offset-top="0">
<div class="cal-YM">
<Spin v-if='calLoading' fix>
<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
</Spin>
<div class="YM-text ovh">
<div title='上一月' class="cal-left hand fl" @click="getPrevMonth"><Icon type="ios-arrow-left"></Icon></div>
{{calendar.year}}年-{{calendar.month}}月<span @click="backToday" class='hand' title="返回今天" v-if='showToday'>今</span>
<div title='下一月' class="cal-right hand fr" @click="getNextMonth"><Icon type="ios-arrow-right"></Icon></div>
</div>
</div>
<div class="cal-week-wrap ovh">
<div class="cal-week red">日</div>
<div class="cal-week" v-for="(item,index) in calendar.weeks" :key="index">{{item}}</div>
<div class="cal-week red">六</div>
</div>
</Affix>
</div>
<table class="cal-table mb20">
<tr v-for="(item,itemIndex) in calendar.dayList" :key='itemIndex'>
<td v-for="(key,keyIndex) in item" :key='key.date' :class="{'bg-grey':key.disable}">
<div class="cal-item" :class="{'cal-active':calendar.isDay == key.date}">
<span>{{key.day}}</span>
</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default{
mounted(){
this.backToday();
},
data(){
return {
calLoading:false,
calendar:{//日历
dayList:[],//二维数组，循环行，循环列
prev:[],
current:[],
next:[],
year:'',
month:'',
weeks:['一','二','三','四','五'],
isDay:''//判断是否是'今天'
}
}
},
props:{
showToday:{
type:Boolean,
default:false//是否显示返回今天按钮
}
},
methods:{
initDate(val){
if(val < 10){
return '0'+val;
}else{
return val;
}
},
getLastDate(year,month){
return new Date(year,month,0);
},
getmonthDays(){//获取上月 当前月和下月天数
let that=this;
let y=that.calendar.year;
let m=that.calendar.month;
let preYear;//上一年
let preMonth;//上一月
let nextYear;//下一年
let nextMonth;//下一月
that.calendar.current=[];
that.calendar.prev=[];
that.calendar.next=[];
// 当前月天数
for(let i=1; i<=that.getLastDate(y,m).getDate(); i++){
//date用于日期判断，day用于显示，flag用于状态判断
that.calendar.current.push({date:y+'-'+m+'-'+that.initDate(i),day:i,timeList:[],disable:true});
}
/*上月*/
let d=that.getLastDate(y,m - 1).getDate();//上月一共多少天
preYear= m == 1 ? y-1 : y;//当前月是1月，那么上一月的年份要-1
preMonth= m == 1 ? 12 : that.initDate(parseInt(m)-1);//当前月是1月，那么上一月是12月
for(let j=(that.getLastDate(y,m - 1).getDay()); j >= 0; j--){
that.calendar.prev.push({date:preYear+'-'+preMonth+'-'+(d-j),day:d-j,timeList:[],disable:true});
}
/*下月*/
nextYear= m == 12 ? y+1 : y;//当前月是12月，那么下一月的年份要+1
nextMonth= m == 12 ? '01' : that.initDate(parseInt(m)+1);//当前月是12月，那么下一月是1月
for(let k=1; k <= 42- that.calendar.current.length - that.calendar.prev.length; k++){
that.calendar.next.push({date:nextYear+'-'+nextMonth+'-'+that.initDate(k),day:k,timeList:[],disable:true});
}
that.calendar.dayList=[];
// 数组合并
let tempArr=that.calendar.prev.concat(that.calendar.current,that.calendar.next);
// 数组分组，每7个一组
for(let i = 0;i < tempArr.length; i+=7){
that.calendar.dayList.push(tempArr.slice(i, i+7));
}
},
getPrevMonth(){//上一月
if(this.calendar.month != 1){
this.calendar.month = this.initDate(--this.calendar.month);
}else{
this.calendar.month = 12;
this.calendar.year = --this.calendar.year;
}
this.getmonthDays();
this.currentDay();
this.$emit('on-click',0);
},
getNextMonth(){//下一月
if(this.calendar.month < 12){
this.calendar.month = this.initDate(++this.calendar.month);
}else{
this.calendar.month = '01';
this.calendar.year = ++this.calendar.year;
}
this.getmonthDays();
this.currentDay();
this.$emit('on-click',1);
},
currentDay(){//获取今天,高亮显示今天
let that=this;
let date=new Date();
let y=that.calendar.year;
let m =that.calendar.month;
if(y === date.getFullYear() && m == date.getMonth()+1){//如果是当年当月
that.calendar.isDay = y+'-'+m+'-'+that.initDate(date.getDate());//获取到今天的号数
}else{
that.calendar.isDay=-1;
}
},
backToday(){//返回今天
let that=this;
let d=new Date();
that.calendar.year=d.getFullYear();
that.calendar.month=that.initDate(d.getMonth()+1);
that.currentDay();
that.getmonthDays();
}
}
}
</script>
<style>
.ivu-affix{background: #fff;}
.fl{float: left;}
.fr{float: right;}
.hand{cursor: pointer;}
.cal-wrap,.perconsult .cert-title + p{font-family:'SimSun';}
.cal-YM{text-align:center;font-size:28px;line-height:50px; width: 260px; margin:0 auto;}
.cal-body{ border-right:1px solid #eee; border-left:1px solid #eee;}
.cal-week-wrap{border:1px solid #eeeeee; border-bottom:none;}
.cal-week{width:14.28%;text-align:center;line-height:40px; font-size: 16px; float: left;}
.YM-text{ font-size: 18px;}
.YM-text span{display:inline-block;margin:-10px 0 0 10px;width:26px;height:26px;border-radius:3px;background:#f17437;line-height:26px;color:#fff; font-size: 14px;}
.cal-left,.cal-right{font-size: 22px; width: 20px; text-align: center;}
.cal-left:hover > i,.cal-right:hover > i{color:#3583f7};
.cal-table{width: 100%; border: 1px solid #eee; text-align: center; border-collapse: collapse;}
.cal-table tr{ border-bottom: 1px solid #eee;}
.cal-table tr td:first-child .cal-item > span,.cal-table tr td:last-child .cal-item > span{color:red;}
.cal-table td{border-right: 1px rgb(239, 239, 239) solid; cursor: pointer; vertical-align: top;}
.cal-table td:hover{background: #f5f5ed;}
.cal-item{width: 129px;padding:5px;min-height: 80px;}
.cal-item > span{display:block; width: 32px; height: 32px; border-radius: 50%; margin: 4px auto; line-height: 32px; font-size: 16px;}
.cal-active > span{ color:#fff!important; background: #3583f7;}
.cal-time-list{font-size: 12px; text-align: left;}
.cal-time-list > p{ width:100px;margin:0 auto; padding-left: 8px; height: 18px; line-height:18px;}
.cal-time-list > p >span{display:block; overflow: hidden;}
</style>
*Affix 图钉组件来源于Iview
来源：https://segmentfault.com/a/1190000018591011
以上是 vue 简单日历组件 的全部内容， 来源链接： utcz.com/z/374821.html
