<template>
<div id='calendar'>
<!-- 年份 月份 -->
<div class='month'>
<ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
<li class='year-month'>
<span class='choose-year'>{
{ currentYear }}年</span>
<span class='choose-month'>{
{ currentMonth }}月</span>
</li>
<li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
</ul>
</div>
<!-- 星期 -->
<ul class='weekdays'>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<!-- 日期 -->
<ul class='days' style="position:relative;">
<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
<li v-for='(dayobject,i) in days' :key='i'>
<!--本月-->
<!--如果不是本月 改变类名加灰色-->
<span v-if='dayobject.day.getMonth()+1 != currentMonth' class='other-month all-span' @click="getDayTime(dayobject.day)">{
{ dayobject.day.getDate() }}</span>
<!--如果是本月 还需要判断是不是这一天-->
<span v-else class='all-span'>
<!--今天 同年同月同日-->
<span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()' class='active' @click="getDayTime(dayobject.day)">{
{ dayobject.day.getDate() }}</span>
<span v-else @click="getDayTime(dayobject.day)">{
{ dayobject.day.getDate() }}</span>
</span>
<i :class="{blue:dayobject.flag1==1,red:dayobject.flag==1}"></i>
</li>
<div style="display: flex;position: absolute;bottom: 5px; right: 15px;">
<span style="color: #ffffff;">
<span style="display:inline-block;width: 5px;height: 5px;background:#31cd70; border-radius: 5px;margin-right: 8px;"></span>
正常
</span>
<span style="color: #ffffff;">
<span style="display:inline-block;width: 5px;height: 5px;background:#ff0000; border-radius: 5px;margin: 0 8px;"></span>
待补卡
</span>
</div>
</ul>
</div>
</template>
<script>
export default {
props: ['abnormaldayFlag','normaldayFlag'],
data () {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: []
}
},
created: function () {
// 在vue初始化时调用
this.initData(null)
},
mounted(){},
methods: {
initData: function (cur) {
// var leftcount = 0 // 存放剩余数量
var date
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
d.setDate(35)
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
}
this.currentDay = date.getDate()
this.currentYear = date.getFullYear()
this.currentMonth = date.getMonth() + 1
this.currentWeek = date.getDay() // 1...6,0
if (this.currentWeek === 0) {
this.currentWeek = 7
}
var str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
)
this.days.length = 0
// 今天是周日，放在第一行第7个位置，前面6个
// 初始化本周
for (var i = this.currentWeek; i >= 0; i--) {
var d2 = new Date(str)
d2.setDate(d2.getDate() - i)
var dayobjectSelf = {} // 用一个对象包装Date对象 以便为以后预定功能添加属性
dayobjectSelf.day = d2
this.days.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
}
// 其他周
for (var j = 1; j <= 35 - this.currentWeek; j++) {
var d3 = new Date(str)
d3.setDate(d3.getDate() + j)
var dayobjectOther = {}
dayobjectOther.day = d3
this.days.push(dayobjectOther)
}
this.days.forEach((item , index)=>{
// console.log(item.day.getFullYear())
const dateNow = this.formatDate(item.day.getFullYear(),item.day.getMonth()+1,item.day.getDate())
this.abnormaldayFlag.forEach((e , i)=>{
if(dateNow==e){
item.flag = 1
}
})
this.normaldayFlag.forEach((e , i)=>{
if(dateNow==e){
item.flag1 = 1
}
})
})
},
getDayTime (el) {
var currentDate = this.formatDate(el.getFullYear(),el.getMonth()+1,el.getDate())
this.$emit('currentDate',currentDate)
},
pickPre: function (year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1))
d.setDate(0)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
pickNext: function (year, month) {
var d = new Date(this.formatDate(year, month, 1))
d.setDate(35)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function (year, month, day) {
var y = year
var m = month
if (m < 10) m = '0' + m
var d = day
if (d < 10) d = '0' + d
return y + '-' + m + '-' + d
}
}
}
</script>
<style lang="scss" scoped>
#calendar {
font-size: 12px;
width: 95%;
height:280px;
margin:auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
.month {
width: 100%;
color: #ffffff;
ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
height: 35px;
li{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
}
.year-month {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 10px;
.choose-month {
text-align: center;
font-size: 12px;
}
}
.arrow {
padding: 15px;
color: #ffffff;
cursor: pointer;
}
}
}
li{
position:relative;
.blue{
position:absolute;
background:#31cd70;
bottom:0;
right:50%;
width:5px;
height:5px;
border-radius: 5px;
transform: translateX(2.5px);
}
.red{
position:absolute;
background:red;
bottom:0;
right:50%;
width:5px;
height:5px;
border-radius: 5px;
transform: translateX(2.5px);
}
}
.weekdays {
margin: 0;
padding: 10px;
display: flex;
flex-wrap: wrap;
color: #28daff;
justify-content: space-around;
li {
display: inline-block;
width: 13.6%;
text-align: center;
}
}
.days {
padding: 10px;
background: rgba(10,25,49,0.4);
border: 1px solid #214F7E;
margin: 0;
display: flex;
flex-wrap: wrap;
li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
/* padding-bottom: 4px;
padding-top: 10px; */
padding: 8px;
font-size: 12px;
color: #ffffff;
.active {
padding: 5px 5px;
border-radius: 50%;
background: #00b8ec;
color: #fff;
}
.other-month {
padding: 5px;
color: gainsboro;
display:none;
}
}
li:hover>span>span {
padding: 5px 5px;
border-radius: 50%;
background: #e1e1e1;
color: #fff;
}
}
}
</style>
日历--js
猜你喜欢
转载自blog.csdn.net/diaojw090/article/details/96310696
今日推荐
周排行