没有合适的资源?快使用搜索试试~ 我知道了~
首页Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画。还可以自定义显示日历里的内容。 现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦 现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件(父组件calendar.vue) <template> <div class=calendar-box> <ul class=calendar-head> <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
资源详情
资源评论
资源推荐
Vue编写可显示周和月模式的日历编写可显示周和月模式的日历 Vue自定义日历内容的显示自定义日历内容的显示
之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画。还可以自定义显示日历里的内容。
现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦
现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持
1.总共分为两个组件(父组件calendar.vue)
<template>
<div class="calendar-box">
<ul class="calendar-head">
<li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
</ul>
<calendarContent ref="calendar_swiper" :checkDate="current_day" @on-change="changeIndex">
<div v-for="(month,index) in monthList" :key="index" class="month swiper-item">
<ul v-for="(week,weekindex) in month" :key="weekindex">
<li v-for="(day,dayindex) in week" @click="chooseDay(day.year,day.month,day.day,day.othermonth,day.mode)">
<div class="week-day" :class="{ischecked:checkedDay==day.date,othermonth:day.othermonth,istoday:day.istoday}">
<span style="padding-top:2px;display:block;">
<i class="day">{{day.day}}</i>
<i>{{day.nongli.old_str}}</i>
</span>
<div class="thing">
<a :style="{color:thing.color}" v-for="thing in day.thing">{{thing.title}}</a>
</div>
</div>
</li>
</ul>
</div>
</calendarContent>
</div>
</template>
<script>
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<day?maxday:day
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()
weixin_38717171
- 粉丝: 1
- 资源: 877
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0