vue下编辑一个日历组件，当不使用vue框架时只需要重新定义下函数就可以
一直需要一个日历插件，但是网上的日历插件拿下来自己想插件中添加自定义功能时太麻烦，有些代码还看不明白，还是自己写一个把，到时候自己想怎么改就怎么改
先上效果图吧：
以下为代码，因为我们自己数据和你们的数据格式不太一样，我只是贴了下纯日历的代码，向日历中添加内容就根据你们自己的来吧
<div class="calendar-center">
<h2 class="calender-top-back">
<span style="cursor:pointer;">
日历
</span>
</h2>
<div class="calendar-main">
<div class="calendar-left">
<h4 class="calendar-left-top">
<span>{{calenderYearMonth}}</span>
<i class="el-icon-arrow-up" @click="prevMonth()"></i>
<i class="el-icon-arrow-down" @click="nextMonth()"></i>
</h4>
<div class="calendar-left-box">
<ul class="calendar-left-box-top">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<ul class="calendar-left-box-main">
<li v-for="date in dateLeft" :class="date.class" @click="pitchData(date.num,date.class)">
<span :class="date.checked">{{date.num}}</span>
</li>
</ul>
</div>
</div>
<div class="calendar-right">
<h4 class="calendar-left-top calendar-right-top">
<ul class="calender-date-type-ul">
<li @click="showDateFun" :class="showDacs">日</li>
<li @click="showWeekFun" :class="showWecs">周</li>
<li @click="showMonthFun" :class="showMocs">月</li>
</ul>
<p class="calender-date-type-today" @click="todayFun" :class="showtoDacs">今天</p>
{{calenderYearMonth}}
<div class="calendar-right-top-right">
<i class="el-icon-arrow-right" v-show="calendarMonthIs" @click="nextMonth()"></i>
<i class="el-icon-arrow-left" v-show="calendarMonthIs" @click="prevMonth()"></i>
<i class="el-icon-arrow-right" v-show="calendarWeekIs" @click="nextWeek()"></i>
<i class="el-icon-arrow-left" v-show="calendarWeekIs" @click="prevWeek()"></i>
<i class="el-icon-arrow-right" v-show="calendarDateIs" @click="nextDay()"></i>
<i class="el-icon-arrow-left" v-show="calendarDateIs" @click="prevDay()"></i>
</div>
</h4>
<!--月日历-->
<div class="calendar-right-main" v-show="calendarMonthIs">
<ul class="calendar-right-main-top">
<li v-for="item in weekNameList">{{item}}</li>
</ul>
<ul class="calendar-right-main-center">
<li v-for="date in dateLeft" :class="date.class">
<h2 class="calendar-right-main-center-date">{{ date.num }}日</h2>
<div class="calendar-activity-list-box-scroll">
<div class="calendar-activity-list-box" v-for="item in date.activity" v-if="item.title && date.class != ''">
<el-popover placement="right" :title="item.title" width="200" trigger="click" class="calendar-alert-active">
<div>
<p>{{item.classroom[0].title}}</p>
<p>{{calenderYearMonth}}{{ date.num }}日 {{item.time}}</p>
</div>
<p slot="reference" class="calendar-activity-list-p">
<span>{{ item.time }}</span>
<i>{{ item.title }}</i>
</p>
</el-popover>
</div>
</div>
</li>
</ul>
</div>
<!--周日历-->
<div class="calendar-right-main" v-show="calendarWeekIs">
<ul class="calendar-right-main-left">
<li v-for="item in dayHoursList">{{item}}</li>
</ul>
<div class="calendar-right-main-right">
<ul class="calendar-right-main-right-top">
<li class="calendar-right-main-right-top-li" v-for="item in weekOnelist">
<p>{{item.week}}</p>
<span>{{item.date}}</span>
</li>
</ul>
<ul class="calendar-right-main-right-center">
<li class="calendar-right-main-right-center-col" v-for="week in weekOnelist">
<div class="calendar-right-center-col-one" v-for="item in dayHoursActivity">
{{item.empty}}
<div v-if="!item.isItem" style="overflow-y:auto;height:100%;">
<div class="calendar-right-center-active-one calendar-right-center-active-one-week" v-for="active in item.weekactives" v-if="week.date == active.activeDate" :style="{height:active.continueTime}">
<p>{{active.title}}</p>
<span>{{active.time}}</span>
</div>
</div>
<div v-else>
<div class="calendar-right-center-active-one calendar-right-center-active-one-week" v-for="active in item.weekactives" v-if="week.date == active.activeDate" :style="{height:active.continueTime}">
<p>{{active.title}}</p>
<span>{{active.time}}</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--日日历-->
<div class="calendar-right-main" v-show="calendarDateIs">
<ul class="calendar-right-main-left">
<li v-for="item in dayHoursList">{{item}}</li>
</ul>
<div class="calendar-right-main-right">
<div class="calendar-right-day-top">
<p>{{oneDayWeek}}</p>
<span>{{oneDayNum}}</span>
</div>
<ul class="calendar-right-day-main">
<li class="calendar-right-day-li" v-for="(item,index) in dayOneHoursList">
<div v-if="!item.isItem" style="height:100%;overflow-y:auto;">
{{item.empty}}
<div class="calendar-right-center-active-one" v-for="active in item.dayActives" :style="{height:active.continueTime}">
<p>{{active.title}}</p>
<span>{{active.time}}</span>
</div>
</div>
<div v-else>
{{item.empty}}
<div class="calendar-right-center-active-one" v-for="active in item.dayActives" :style="{height:active.continueTime}">
<p>{{active.title}}</p>
<span>{{active.time}}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'calendar',
data() {
return {
calendarMonthIs:true, //显示月列表
calendarWeekIs:false, //显示周列表
calendarDateIs:false, //显示日列表
showDacs:'', //日列表选中
showWecs:'', //周列表选中
showMocs:'showDacs-css', //月列表选中
showtoDacs:'', //今天
weekNameList:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
dateLeft:[], //展示的日期列表
dayHoursList:['','00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
dayHoursActivity:[], //周活动列表
weeklist:[], //全月周列表
weekOnelist:[], //单周列表
calenderYearMonth:'', //左侧展示的当前年月
dateTime:'', //显示的一号的时间戳
oneDayNum:'', //日类型显示时的几号
oneDayWeek:'', //日类型显示时的星期几
dayOneHoursList:[], //日列表
}
},
methods: {
//获取当前月份第一天是周几
getWeek(year,month) {
//1.根据年度和月份，创建日期
//应该先对year,month进行整数及范围校验的。
var d = new Date();
d.setYear(year);
d.setMonth(month-1);
d.setDate(1);
//获得周几
var weeks = ['7','1','2','3','4','5','6'];
return weeks[d.getDay()];
},
//获取当前月份日期列表
firstDate() {
var Year = new Date().getFullYear();
var Month = new Date().getMonth();
this.dateTime = new Date(Year+'-'+(Month+1)+'-1').getTime();
this.calendarList(Year,Month);
},
//获取上一月日期列表
prevMonth(prevDay) {
var prevYear = new Date(this.dateTime-86400000).getFullYear();
var prevMonthNum = new Date(this.dateTime-86400000).getMonth();
this.dateTime = new Date(prevYear+'-'+(prevMonthNum+1)+'-1').getTime()
if(prevDay){
this.calendarList(prevYear,prevMonthNum,prevDay);
}else{
this.calendarList(prevYear,prevMonthNum);
}
},
//获取下一月日期列表
nextMonth() {
var Year = new Date(this.dateTime).getFullYear()
var Month = new Date(this.dateTime).getMonth()
var date = new Date(Year, Month);//当前月的
var thisDateLast = (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate(); //获取当月最后一天
var nextYear = new Date(new Date(Year+'-'+(Month+1)+'-'+thisDateLast).getTime()+86400000).getFullYear();
var nextMonthNum = new Date(new Date(Year+'-'+(Month+1)+'-'+thisDateLast).getTime()+86400000).getMonth();
this.dateTime = new Date(nextYear+'-'+(nextMonthNum+1)+'-1').getTime()
this.calendarList(nextYear,nextMonthNum);
},
//获取上一周日期列表
prevWeek() {
for(var i=0;i<this.weeklist.length;i++){
if(this.weekOnelist[0].date == this.weeklist[i].date && i != 0){
this.weekOnelist = this.weeklist.slice(i-7,i)
for(var j=0;j<this.weekNameList.length;j++){
this.weekOnelist[j].week = this.weekNameList[j]
}
break;
}else if(this.weekOnelist[0].date == this.weeklist[i].date && i == 0){
this.prevMonth()
this.weekOnelist = this.weeklist.slice(this.weeklist.length-7,this.weeklist.length)
for(var j=0;j<this.weekNameList.length;j++){
this.weekOnelist[j].week = this.weekNameList[j]
}
break;
}
}
},
//获取下一周日期列表
nextWeek() {
for(var i=0;i<this.weeklist.length;i++){
if(this.weekOnelist[6].date == this.weeklist[i].date && i != this.weeklist.length-1){
this.weekOnelist = this.weeklist.slice(i+1,i+8)
for(var j=0;j<this.weekNameList.length;j++){
this.weekOnelist[j].week = this.weekNameList[j]
}
break;
}else if(i == this.weeklist.length-1){
this.nextMonth()
break;
}
}
},
//获取下一天日期列表
nextDay() {
if(this.oneDayNum.substring(0,this.oneDayNum.length-1) > 7){
for(var i=6;i<this.dateLeft.length;i++){
if(this.oneDayNum == this.dateLeft[i].num+'日' && i != this.dateLeft.length-1){
if(this.dateLeft[i+1].num != 1){
this.oneDayNum = this.dateLeft[i+1].num+'日'
for(var i=0;i<this.weekNameList.length;i++){
if(this.oneDayWeek == this.weekNameList[i]){
if(i == 6){
this.oneDayWeek = this.weekNameList[0]
}else{
this.oneDayWeek = this.weekNameList[i+1]
}
break;
}
}
}else{
this.nextMonth()
}
break;
}else if(this.oneDayNum == this.dateLeft[i].num+'日' && i == this.dateLeft.length-1){
this.nextMonth()
break;
}
}
}else{
for(var i=0;i<this.dateLeft.length;i++){
if(this.oneDayNum == this.dateLeft[i].num+'日' && i != this.dateLeft.length-1){
if(this.dateLeft[i+1].num != 1){
this.oneDayNum = this.dateLeft[i+1].num+'日'
for(var i=0;i<this.weekNameList.length;i++){
if(this.oneDayWeek == this.weekNameList[i]){
if(i == 6){
this.oneDayWeek = this.weekNameList[0]
}else{
this.oneDayWeek = this.weekNameList[i+1]
}
break;
}
}
}else{
this.nextMonth()
}
break;
}else if(this.oneDayNum == this.dateLeft[i].num+'日' && i == this.dateLeft.length-1){
this.nextMonth()
break;
}
}
}
this.dayActivifyFun()
},
//获取上一天日期列表
prevDay() {
for(var i=this.dateLeft.length-1;i>=0;i--){
if(this.oneDayNum == this.dateLeft[i].num+'日' && i != 0){
if(this.oneDayNum != '1日'){
this.oneDayNum = this.dateLeft[i-1].num+'日'
for(var i=0;i<this.weekNameList.length;i++){
if(this.oneDayWeek == this.weekNameList[i]){
if(i == 0){
this.oneDayWeek = this.weekNameList[6]
}else{
this.oneDayWeek = this.weekNameList[i-1]
}
break;
}
}
}else{
this.prevMonth('prevDay')
}
break;
}else if(this.oneDayNum == this.dateLeft[i].num+'日' && i == 0){
this.prevMonth('prevDay')
break;
}
}
this.dayActivifyFun()
},
//生成左侧日期列表
calendarList (Year,Month,prevDay){
this.calenderYearMonth = Year+'年'+(Month+1)+'月'
var week = this.getWeek(Year,Month+1); //获取是周几
this.oneDayWeek = this.weekNameList[week-1];
this.oneDayNum = '1日'
//获取月份第一天和最后一天
var date = new Date(Year, Month);//当前月的
var dateLast = new Date(new Date(this.dateTime-86400000).getFullYear(),new Date(this.dateTime-86400000).getMonth())
var thisDateLast = (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate(); //获取当月最后一天
var LastDateLast = (new Date(dateLast.getFullYear(), dateLast.getMonth() + 1, 0)).getDate(); //获取上月最后一天
//当前月份最后一天是周几
var LastWeek = new Date(Year+'-'+(Month+1)+'-'+thisDateLast).getDay()
this.dateLeft = [];
this.weeklist = [];
for(var i=(LastDateLast-week+2);i<=LastDateLast;i++){
this.dateLeft.push({num:i,class:'',checked:''});
this.weeklist.push({date:Month+'月'+i+'日'});
}
for(var i=1;i<=thisDateLast;i++){
this.dateLeft.push({num:i,class:'this-month',checked:''});
this.weeklist.push({date:(Month+1)+'月'+i+'日'});
}
if(prevDay){
this.oneDayNum = this.dateLeft[this.dateLeft.length-1].num+'日'
this.oneDayWeek = this.weekNameList[LastWeek-1]
}
for(var i=1;i<=(7-LastWeek);i++){
this.dateLeft.push({num:i,class:'',checked:''});
this.weeklist.push({date:(Month+2)+'月'+i+'日'});
}
for(var i=0;i<this.weekNameList.length;i++){ //给周日历添加星期几
this.weeklist[i].week = this.weekNameList[i]
}
this.weekOnelist = this.weeklist.slice(0,7)
for(var i=0;i<this.dateLeft.length;i++){
var dayActivity = [];
//此处添加活动
}
this.weekActivifyFun();
this.dayActivifyFun();
},
//生成周活动列表
weekActivifyFun() {
this.dayHoursActivity = [];
for(var i=1;i<this.dayHoursList.length;i++){
var weekactive = []
this.dayHoursActivity.push({empty:' '})
//此处添加活动
}
},
//生成日活动列表
dayActivifyFun() {
this.dayOneHoursList = [];
for(var j=1;j<this.dayHoursList.length;j++){
this.dayOneHoursList.push({empty:''})
var dayOneactivity = []
//此处添加活动
}
},
//类型切换
//日类型
showDateFun() {
this.calendarMonthIs = false
this.calendarWeekIs = false
this.calendarDateIs = true
this.showDacs = 'showDacs-css'
this.showWecs = ''
this.showMocs = ''
this.showtoDacs = ''
},
//周类型
showWeekFun() {
this.calendarMonthIs = false
this.calendarWeekIs = true
this.calendarDateIs = false
this.showWecs = 'showDacs-css'
this.showDacs = ''
this.showMocs = ''
this.showtoDacs = ''
},
//月类型
showMonthFun() {
this.calendarMonthIs = true
this.calendarWeekIs = false
this.calendarDateIs = false
this.showMocs = 'showDacs-css'
this.showWecs = ''
this.showDacs = ''
this.showtoDacs = ''
},
//今天
todayFun() {
this.calendarMonthIs = false
this.calendarWeekIs = false
this.calendarDateIs = true
this.showDacs = ''
this.showWecs = ''
this.showMocs = ''
this.showtoDacs = 'showDacs-css'
this.calendarList (new Date().getFullYear(),new Date().getMonth())
this.oneDayNum = new Date().getDate()+'日'
this.oneDayWeek = this.weekNameList[new Date().getDay()-1]
var thisTime = new Date().getFullYear()+'年'+(new Date().getMonth()+1)+'月'+this.oneDayNum
this.dayActivifyFun()
},
//点击左侧选择日期
pitchData(numText,className) {
if(className == 'this-month'){
this.calendarMonthIs = false
this.calendarWeekIs = false
this.calendarDateIs = true
this.showDacs = 'showDacs-css'
this.showWecs = ''
this.showMocs = ''
this.showtoDacs = ''
var thisYear = this.calenderYearMonth.substring(0,this.calenderYearMonth.indexOf('年'))
var thisMonth = this.calenderYearMonth.substring(this.calenderYearMonth.indexOf('年')+1,this.calenderYearMonth.indexOf('月'))-1
this.calendarList (thisYear,thisMonth)
this.oneDayNum = numText+'日'
if(new Date(thisYear+'-'+(thisMonth+1)+'-'+numText).getDay() == 0){
this.oneDayWeek = '星期日';
}else{
this.oneDayWeek = this.weekNameList[new Date(thisYear+'-'+(thisMonth+1)+'-'+numText).getDay()-1];
}
var thisTime = this.calenderYearMonth+this.oneDayNum
this.dayActivifyFun()
for(var i=0;i<this.dateLeft.length;i++){
if(this.dateLeft[i].num == numText && this.dateLeft[i].class == className){
this.dateLeft[i].checked = 'pitch-in-date'
}else{
this.dateLeft[i].checked = ''
}
}
}
},
},
mounted: function() {
this.firstDate()
}
}
</script>
<style scoped>
.calendar-center{
margin: 20px;
background: #FFFFFF;
border: 1px solid #BDBDBD;
border-radius: 8px;
background:#F5F5F7;
overflow:hidden;
min-width:1100px;
}
.calender-top-back{
background: #E5E8E9;
height:48px;
line-height:48px;
padding:0 0 0 20px;
font-size: 14px;
color: #2F4157;
}
.calendar-left{
float:left;
width:310px;
background:#F5F5F7;
padding:15px;
}
.calendar-left-top{
height:40px;
border-bottom:1px dashed #3499FF;
}
.calendar-left-top span{
float:left;
height:30px;
line-height:30px;
font-size: 14px;
color: #2F4157;
}
.calendar-left-top i{
float:right;
font-size:20px;
margin:5px;
color: #2F4157;
}
.calendar-left-box-top{
width:100%;
height:40px;
margin-bottom:5px;
}
.calendar-left-box-top li{
width:40px;
text-align:center;
float:left;
height:40px;
line-height:40px;
font-size: 16px;
color: #2C2C2C;
font-weight:bold;
}
.calendar-left-box-main{
width:100%;
height:36px;
margin-bottom:4px;
}
.calendar-left-box-main li{
width:40px;
text-align:center;
float:left;
height:36px;
line-height:32px;
font-size: 16px;
color: #BFCBDA;
}
.calendar-left-box-main li span{
width:30px;
height:30px;
margin:3px 5px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display:block;
}
.calendar-left-box-main li.this-month{
font-size: 18px;
color: #001D27;
cursor:pointer;
}
.calendar-right{
padding:0 20px 40px 330px;
background:#fff;
}
.calender-date-type-ul{
float:left;
width:180px;
height:30px;
}
.calender-date-type-ul li,.calender-date-type-today{
width:60px;
border:1px solid #CECED0;
height:30px;
line-height:30px;
text-align:center;
font-size:16px;
color:#2F4157;
float:left;
}
.calender-date-type-ul li{
margin-left:-1px;
}
.calender-date-type-ul li:first-child{
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.calender-date-type-ul li:last-child{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.calender-date-type-today{
margin-left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.calendar-right-top{
text-align:center;
padding:20px 0;
color:#2F4157;
font-size:20px;
line-height:30px;
height:70px;
border:none;
}
.calendar-right-top-right{
float:right;
width:270px;
}
.calendar-right-top-right .el-select{
float:right;
}
.calendar-right-top-right input{
height:30px;
width:190px;
}
.calendar-left-top .el-select__caret{
margin:0;
}
.calendar-right-main{
border-left:1px solid #DDDEE0;
overflow:hidden;
}
.calendar-right-main-top{
overflow: hidden;
}
.calendar-right-main-top li{
float:left;
border:1px solid #DDDEE0;
height:34px;
line-height:34px;
width:14.3%;
text-align:center;
padding:0 10px;
font-size:16px;
font-weight:bold;
margin-left:-1px;
}
.calendar-right-main-center{
overflow: hidden;
}
.calendar-right-main-center li{
float:left;
border:1px solid #DDDEE0;
height:140px;
width:14.3%;
padding:10px 0 0;
font-size:14px;
margin:-1px 0 0 -1px;
background:#F5F5F7;
}
.calendar-right-main-center-date{
height:30px;
line-height:30px;
color:#868F99;
font-size:14px;
padding: 0 10px;
}
.calendar-right-main-center li.this-month{
background:#Fff;
}
.calendar-activity-list-box-scroll{
height:100px;
overflow-y:auto;
overflow-x:hidden;
}
.calendar-activity-list-box{
}
.calendar-activity-list-box .calendar-activity-list-p{
float:none;
height:30px;
line-height:30px;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:none;
width:100%;
padding:0 5px;
}
.calendar-activity-list-box .calendar-activity-list-p span{
padding-right:6px;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(odd) .calendar-activity-list-p{
background:#eff9eb;
color:#63c42d;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(even) .calendar-activity-list-p{
background:#fbe5d0;
color:#f19c4a;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(1) .calendar-activity-list-p{
background:#fbe6e6;
color:#f88381;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(2) .calendar-activity-list-p{
background:#d3e9ff;
color:#48a3ff;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(3) .calendar-activity-list-p{
background:#eff9eb;
color:#63c42d;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(4) .calendar-activity-list-p{
background:#fbe5d0;
color:#f19c4a;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(5) .calendar-activity-list-p{
background:#fbe6e6;
color:#f88381;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(6) .calendar-activity-list-p{
background:#d3e9ff;
color:#48a3ff;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(7) .calendar-activity-list-p{
background:#eff9eb;
color:#63c42d;
}
.calendar-activity-list-box-scroll .calendar-activity-list-box:nth-child(8) .calendar-activity-list-p{
background:#fbe5d0;
color:#f19c4a;
}
.calendar-alert-active{
background:#2F4157;
color:#fff;
}
.calendar-alert-active h2{
font-size:14px;
}
.calendar-right-main-left{
float:left;
width:9%;
border-top:1px solid #DDDEE0;
}
.calendar-right-main-left li{
border-bottom:1px solid #DDDEE0;
border-right:1px solid #DDDEE0;
height:80px;
line-height:80px;
text-align:center;
font-size: 16px;
color: #868F99;
}
.calendar-right-main-right{
float:left;
width:91%;
}
.calendar-right-main-right-top{
height:81px;
border-top:1px solid #DDDEE0;
overflow:hidden;
}
.calendar-right-main-right-top-li{
height:80px;
padding:10px;
float:left;
border-bottom:1px solid #DDDEE0;
border-right:1px solid #DDDEE0;
width:14.28%;
}
.calendar-right-main-right-top-li p{
height:30px;
font-size:16px;
color:#2F4157;
line-height:30px;
font-weight:bold;
}
.calendar-right-main-right-top-li span{
height:24px;
font-size:14px;
color:#7E7E7E;
line-height:24px;
display:block;
}
.calendar-right-main-right-center-col{
width:14.28%;
float:left;
}
.calendar-right-center-col-one{
height:80px;
border-bottom:1px solid #DDDEE0;
border-right:1px solid #DDDEE0;
}
.calendar-right-center-active-one{
min-height:70px;
width:100%;
background: #EBF5FF;
border: 1px solid #3499FF;
padding:10px 6px;
font-size:1px;
color:#3E9EFF;
margin-bottom:5px;
}
.calendar-right-center-active-one-week{
min-height:70px;
}
.calendar-right-center-active-one p{
line-height:24px;
float:left;
margin-right: 10px;
height:24px;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.calendar-right-center-active-one span{
height:30px;
background: #D9EBFE;
border: 1px solid #3499FF;
border-radius: 4px;
display:block;
padding:0 5px;
line-height:30px;
float:left;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.calendar-right-day-top{
height:81px;
border-bottom:1px solid #DDDEE0;
border-right:1px solid #DDDEE0;
border-top:1px solid #DDDEE0;
padding:10px;
}
.calendar-right-day-top p{
height:30px;
line-height:30px;
font-size: 16px;
color: #2F4157;
font-weight:bold;
margin-top:10px;
}
.calendar-right-day-top span{
display:block;
height:24px;
line-height:24px;
font-size: 14px;
color: #868F99;
padding: 0 5px;
}
.calendar-right-day-li{
height:80px;
border-bottom:1px solid #DDDEE0;
border-right:1px solid #DDDEE0;
}
.showDacs-css{
background: #D0E8FF;
border: 1px solid #3499FF;
}
.pitch-in-date{
background:#67c23a;
color:#fff;
}
</style>
自己起一个组件完全复制就可以看了，有icon是用的elementui中的，这个自己替换吧，日历div的宽度最小1100px，无限大兼容。
一点想法,日历中添加功能:
- 月日历比较好说，循环月日历加循环活动列表，对比日期就行了，然后把活动添加到日历列表中，一起循环生成日历。
- 周日历和日日历就比较费劲了，也是对照活动把活动添加日历列表中，不一样的就是这个活动div是跨好几个小时的，所以生成的div得浮动出来，定位的位置按照几点来换算，高度也得按照活动是几个小时来算。（我就是这么写的，有什么好的方法请留言吧）
