用vue来写一个日历组件
项目要用到一个日历,但是css和功能比较奇怪,就需要自己撸一个了
原理
一个日历当前月页面会显示3部分的日期天数
上月的，本月的，下月的
计算到这3部分组合起来的数组就是完整的当月日历
所以重点在于计算这三部分就完成了
文章图片
【用vue来写一个日历组件】1.上月的 new Date('2021-09-01').getDay()
2021年9月1号是星期3,这时候就得到上月的3天
2.本月的new Date(year, month, 0).getDate()
3.下月的7 - (preAndCenter.length % 7)
最后得到当前页所以日期数组后就可以随意扩展自己要的功能了
上
{{headerData.year}} / {{headerData.month}}
下{{item}}{{item.num}}.calendar_mod {
border: 1px solid #333;
user-select: none;
}.header_warp,
.week_warp,
.cell_warp {
display: flex;
}
.header_warp {
height: 50px;
border: 1px solid rgb(143, 53, 53);
justify-content: space-between;
}
.header_btn{
width: 100px;
text-align: center;
background-color: #999;
cursor: pointer;
}
.week_item {
flex: 1;
text-align: center;
border: 1px solid rgb(94, 179, 119);
}
.cell_warp {
flex-wrap: wrap;
}
.cell_box {
height: 70px;
flex: 0 0 14.285%;
margin: 5px 0;
}
.cell_box div{
width: 50px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cell_box .prev{
background-color: #f1b9b9;
}
.cell_box .next{
background-color: #b9f1c1;
}
.marking{
color:red;
}
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- JS中的各种宽高度定义及其应用
- 由浅入深理解AOP
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 2020-04-07vue中Axios的封装和API接口的管理
- 涉毒患者(新诗)
- 参保人员因患病来不及到指定的医疗机构就医，能否报销医疗费用（）
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决