在线小例子http://geoffzhu.cn/vue-event-calendar/
支持移动端和web端，因为他可以随着屏幕大小一行摆不下事件就跑到下面啦。
使用方式
安装
npm install vue-event-calendar --save入口 Main.js
import 'vue-event-calendar/dist/style.css' //1.1.10之后的版本，css被放在了单独的文件中，方便替换
import vueEventCalendar from 'vue-event-calendar'
Vue.use(vueEventCalendar, {locale: 'en'，color:'blue'}) //可以设置语言，支持中文和英文,color这里设置的是事件的背景色。不写color默认是上面效果的黄色
例子中只有两行，如果想要显示更多的自定义的样式。
<template>
<vue-event-calendar :events="demoEvents" @monthChanged="" @dayChanged=""></vue-event-calendar>
</template><script>
export default {
data () {
return {
demoEvents: [{
date: '2016/12/15', //date必须是这个格式啊。如果后台给的数据不是这个格式还必须转化为这个格式
title: 'eat',
desc: 'longlonglong description'
},{
date: '2016/11/12',
title: 'this is a title'
}]
}
},
methods: {
monthChange (month) {
console.log(month)
},
dayChange (day) {
console.log(day)
}
}
}
</script>
如果是后台传数据，并且自定义事件格式
<template>
<vue-event-calendar :events="demoEvents" @day-changed="handleDayChanged"
@month-changed="handleMonthChanged">
<template slot-scope="props">
<div v-for="(event, index) in props.showEvents" class="event-item classItem" :key="index">
{{event}}//这就是你定义的demoEvents里面的所有的数据
</div>
</template>
</vue-event-calendar></template>
export default {
data (){
return {
demoEvents:[],
}
},
methods: {timetableAlls(firstDay,lastDay){
timetableAll({date_start:firstDay,date_end:lastDay}).then(res=>{
if(res.code==1){
this.demoEvents=[];//切换月份也会触发这个接口，所有每次都得清空，不然切换月份下面会累加的for(var i=0;i<res.data.length;i++){
var day=res.data[i].starttime.replace(/\-/g,"/");
day=day.split(" ")[0];
this.demoEvents.push({
date:day,
title:res.data[i],//日期具体在html里面切割
desc:res.data[i].username,//老师
classroom:res.data[i].classroom,//教室//这两个是我自定义的，名字随便取的
classname:res.data[i].classname,//班级名
})
}
}
})}
}