vue展示日历 考勤展示_Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示...

之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。

现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦

现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持

1.总共分为两个组件(父组件calendar.vue)

• 一
• 二
• 三
• 四
• 五
• 六
• 日

• { {day.day}}

  { {day.nongli.old_str}}

  { {thing.title}}

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

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)

return year + '-' + month + '-' + day;

},

getWeek(year,month,day){

var dt = new Date(year,month,day)

var weekArr = []

var dt_first = new Date(year,month,day-((dt.getDay()+6) % 7))

var week = []

// console.log(year,month,day)

for(var j=0;j<7;j++){

var newdt = new Date(dt_first.getFullYear(),dt_first.getMonth(),dt_first.getDate()+j)

var _year = newdt.getFullYear()

var _month = newdt.getMonth()

var _day = newdt.getDate()

week.push({

mode:'week',

day:_day,

year:_year,

month:_month,

date:this.format(_year,_month,_day),

nongli:format.solar2lunar(_year,_month+1,_day),

istoday:(this.today.getFullYear()==_year && this.today.getMonth()==_month && this.today.getDate() == _day)?true:false,

ischecked:false,

othermonth:_month!=month

})

}

weekArr.push(week)

return weekArr

},

getMonth(year,month){ //创建单月历

var monthArr = []

var dt_first = new Date(year,month,1) //每个月第一天

var dt_last = new Date(year,month+1,0) //每个月最后一天

var monthLength = dt_last.getDate()-dt_first.getDate()+1

var daylist =[];

var space = (dt_first.getDay() - 1 + 7) % 7 //月历前面空格

//console.log(year,month)

for(var i = -space;i<36;i+=7){

var week = []

for(var j=0;j<7;j++){

var day = i+j+1

if(day>0 && day<=monthLength){

week.push({

mode:'month',

day:day,

year:year,

month:month,

date:this.format(year,month,day),

// 日历要显示的其他内容

thing:(day == 22 || day == 4) ? [{title:'生日',color:'red'},{title:'买蛋糕',color:'yellow'}]:[],

nongli:format.solar2lunar(year,month+1,day),

istoday:(this.today.getFullYear()==year && this.today.getMonth()==month && this.today.getDate() == day)?true:false,

ischecked:false

})

}else{

//其它月份

//week.push({})

var newdt = new Date(year,month,day)

var _year = newdt.getFullYear()

var _month = newdt.getMonth()

var _day = newdt.getDate()

week.push({

mode:'month',

day:_day,

year:_year,

month:_month,

date:this.format(year,month,day),

nongli:format.solar2lunar(_year,_month+1,_day),

istoday:(this.today.getFullYear()==_year && this.today.getMonth()==_month && this.today.getDate() == _day)?true:false,

ischecked:false,

othermonth:day<=0?-1:1,

})

}

}

monthArr.push(week)

}

return monthArr

},

get3month(){

var year = this.disp_date.getFullYear()

var month = this.disp_date.getMonth()

this.monthList = []

this.monthList.push(this.getMonth(year,month-1))

this.monthList.push(this.getMonth(year,month))

this.monthList.push(this.getMonth(year,month+1))

},

get3week(){

var year = this.disp_date.getFullYear()

var month = this.disp_date.getMonth()

var day = this.disp_date.getDate()

this.monthList = []

this.monthList.push(this.getWeek(year,month,day-7))

this.monthList.push(this.getWeek(year,month,day))

this.monthList.push(this.getWeek(year,month,day+7))

console.log(this.monthList)

},

changeIndex(index,is_week,is_click = false){

if(index){

if(is_week){

this.disp_date = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth(),this.disp_date.getDate()+(7*(index)))

this.checkedDay = this.format(this.disp_date.getFullYear(), this.disp_date.getMonth(), this.disp_date.getDate())

this.current_day = this.disp_date

this.get3week()

}else{

// console.log(this.disp_date.getMonth()+index)

var _tmpdt = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth()+index,0)

var maxday = _tmpdt.getDate()

var _day = maxday

console.log(_day)

this.disp_date = new Date(this.disp_date.getFullYear(),this.disp_date.getMonth()+index,_day)

if(!is_click){

this.checkedDay = this.format(this.disp_date.getFullYear(),this.disp_date.getMonth(),this.disp_date.getDate())

console.log(this.checkedDay)

}

// console.log(this.format(this.disp_date.getFullYear(),this.disp_date.getMonth(),_day))

this.get3month()

console.log('move_change')

}

this.$refs.calendar_swiper.move_change()

}

}

},

components:{

calendarContent

}

}

.calendar-box{

/*background: #4188d8;*/

color: #fff;

position: relative;

height:100%;

z-index:99;

}

.calendar-head{

background: #4188d8;

display: flex;

height:30px;

line-height: 30px;

}

.calendar-head li{

flex-grow: 1;

text-align: center;

}

.swiper-item{

position: absolute;

width:100%;

height:100%;

top:0;

}

.swiper-item:nth-child(1){

left: -100%;

}

.swiper-item:nth-child(2){

left:0;

}

.swiper-item:nth-child(3){

left: 100%;

}

.month ul{

display:flex;

margin:0;

padding:0;

width: 100%;

height:16%;

min-height:40px;

border-right:1px solid #eee;

}

.month li{

flex: 1;

flex-grow: 1;

overflow: hidden;

}

.week-day{

position: relative;

margin: auto;

font-size:12px;

text-align: center;

border: 0;

line-height: 10px;

overflow: hidden;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

z-index: 1;

height:140px;

}

.week-day i{

display:block;

text-align: center;

font-size: 10px;

font-style:normal;

padding:1px;

line-height: 14px;

height:14px;

}

.thing a {

cursor: pointer;

display: block;

width: 100%;

overflow: hidden;