之前写了一篇周和月日历，但感觉体验不是太好，所以有重新做了一遍，加上了动画。还可以自定义显示日历里的内容。
现在贴出项目源码,我现在是放在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;