<template>
{{ currentDay }}
<div class="calendatFa">
<div v-for="(item,index) in timeList" :key="index">
<div class="divStyle" style="color:#86969C">{{item.name}}</div>
<div :id="'date'+index" @click="dateClick(item,index)" :style="{color:(index===0||index===6)?'#C9D0D4':'#1D2129',cursor: 'pointer'}" :class="{divStyle:true,dateStyle:index === weekDay}">{{item.day}}</div>
<div class="divStyle">
<!-- <div class="workDayIcon" v-if="item.needWork"></div> -->
<div class="workDayIcon" v-if="index!==0&&index!==6"></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let dataList:any = ref(['日','一','二','三','四','五','六',])
let timeList:any = ref([])
let weekDay = ref(0)
const currentDay = ref('')
const dateClick = (item:any,index:any) =>{
// 设置点击背景色
for(let i=0;i<7;i++){
let dom:any = document.getElementById('date'+i)
if (dom){
if (index == i) {
dom.style.backgroundColor = '#05A4B6'
}else{
dom.style.backgroundColor = '#fff'
}
}
}
currentDay.value= `${item.year}年${item.month}月${item.day}日`
// 调接口查询数据
}
const getTimeList = ()=>{
timeList.value = []
let time = new Date()
weekDay.value = time.getDay()
// 循环出周日到周六
for(let i=0;i<7;i++){
let year,month,day;
if((weekDay.value-i)>0){
year= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getFullYear()
month= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getMonth()+1
day= new Date(time.getTime()-((weekDay.value-i)*1000*60*60*24)).getDate()
}else{
year= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getFullYear()
month= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getMonth()+1
day= new Date(time.getTime()+((i-weekDay.value)*1000*60*60*24)).getDate()
}
let obj = {
name: dataList.value[i],
year:year,
month:month,
day:day,
needWork: false //该日期是否存在待办事项
}
timeList.value.push(obj)
}
}
const initData = () =>{
getTimeList()
}
initData()
</script>
<style lang="less" scoped>
.calendatFa{
margin: 8px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 14px;
}
.divStyle{
width: 32px;
padding: 4px;
border-radius: 16px;
}
.dateStyle{
border: 1px solid #05A4B6;
}
.workDayIcon{
margin-left: 10px;
margin-top: 2px;
width: 4px;
height: 4px;
border-radius:2px ;
background-color: #05A4B6;
}
</style>
周日历组件
于 2023-12-21 16:58:58 首次发布