要实现的样子
实现的功能：
上面年月左右切换至改变月份，改变后显示月份的1号在的一周从周天开始
下面周历左右切换周，当存在1号的时候月份变为1号的月份和年份。
点击日程时间下面的日程变化（日程上的点代表有日程信息）
这里用到了获取// 指定日期的一周的所有日期的数组 js中获取指定日期的一周的开始和结束日期，以及一周的所有日期的数组_js获取一周内的日期_slom_fxt的博客-CSDN博客
代码如下：
<template>
<div class="rcZj">
<div class="head">
<div>
<div class="left">
<div :class="[tab4Index == index ? 'active' : '']" v-for="(item, index) in tab4" :key="index"
@click="getTab4(index)">
{{ item }}
</div>
</div>
<div class="right">
<div v-html="'更多 >'">
</div>
</div>
</div>
</div>
<div class="timeBox">
<div class="ny">
<div class="pre"
:style="{ 'opacity': dateList.yVale == 1 ? '0.6' : '1', 'cursor': dateList.yVale == 1 ? 'not-allowed' : 'pointer' }"
@click="nyPre(0)" v-html="'<'"></div>
<div class="dateBox">
<el-dropdown trigger="click" @command="getNian">
<span class="el-dropdown-link">
{{ dateList.nVale }}年<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="item.value" v-for="(item, index) in dateList.n" :key="index">{{
item.value }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click" @command="getYue">
<span class="el-dropdown-link">
{{ dateList.yVale }}月<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="item" v-for="(item, index) in dateList.y" :key="index">{{ item
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="pre"
:style="{ 'opacity': dateList.yVale == 12 ? '0.6' : '1', 'cursor': dateList.yVale == 12 ? 'not-allowed' : 'pointer' }"
@click="nyPre(1)" v-html="'>'"></div>
</div>
<div>
<div class="rl">
<div>
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div>
<div :class="[el.time == activeRc ? 'active' : '']" v-for="(el, index) in riDate" :key="index"
@click="clickRc(el)">
<span>{{ el.time.split('/')[2] }}</span>
<div class="dian">
<div v-show="el.isRc"></div>
</div>
</div>
</div>
</div>
<div class="pre-left" @click="rcLeft()"></div>
<div class="pre-right" @click="rcRight()"></div>
</div>
</div>
<div class="rcBox">
<div>
<div class="title">
今日日程
</div>
<div class="table">
<div>
<div>
<img src="../assets/rc.png" alt="">江西省区域金融改革优秀项目展
</div>
<div>09:00-10:00</div>
</div>
<div>
<div>
<img src="../assets/rc.png" alt="">参加数字化转型项目会议
</div>
<div>09:00-10:00</div>
</div>
</div>
</div>
<div>
<div class="title">
明日日程
</div>
<div class="table">
<div>
<div>
<img src="../assets/rc.png" alt="">人力资源部第二季工作汇总
</div>
<div>09:00-10:00</div>
</div>
<div>
<div>
<img src="../assets/rc.png" alt="">人力资源部第二季工作汇总
</div>
<div>09:00-10:00</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'rcZj',
components: {
},
data: () => ({
//日程的tab
tab4: ["个人日程", "领导日程", "部门日程"],
tab4Index: 0,
//日程的年月下拉
dateList: {
n: [
{
name: "2018年",
value: 2018
},
{
name: "2019年",
value: 2019
},
{
name: "2020年",
value: 2020
},
{
name: "2021年",
value: 2021
},
{
name: "2022年",
value: 2022
},
{
name: "2023年",
value: 2023
}
],
nVale: new Date().getFullYear(),
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
yVale: new Date().getMonth() + 1
},
//选中的日程
activeRc: `${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}`,
//一周日历从周天开始到下周六
riDate: [],
}),
computed: {},
watch: {},
created() { },
mounted() {
//初始化
this.getrlDate('','','',true)
},
methods: {
//日程的切换
getTab4(index) {
this.tab4Index = index
},
//日程年份的下拉选项
getNian(item){
this.dateList.nVale=item
this.$nextTick(()=>{
this.getrlDate2()
})
},
//日程月份的下拉选项
getYue(item){
this.dateList.yVale=item
this.$nextTick(()=>{
this.getrlDate2()
})
},
//获取周日历从周日开始
getrlDate(year,month,day,flag,type){
//有日程的标识
let dianArr=[true,true,true,false,false,true,true]
let riDate=[]
let arr1=[]
//初始化
if(flag){
//现获取正常的从周一到周天
arr1 =new Date().getWeekTime()
arr1.pop();
arr1.unshift(new Date(this.dateList.nVale,this.dateList.yVale-1,Number(arr1[0].split('/')[2])-1).getWeekTime()[6])
arr1.map((el)=>{
riDate.push({
time:el,
})
})
}else{
arr1 =new Date(year,month-1,day).getWeekTime()
arr1.pop();
arr1.unshift(new Date(year,Number(arr1[0].split('/')[1])-1,Number(arr1[0].split('/')[2])-1).getWeekTime()[6])
arr1.map((el)=>{
riDate.push({
time:el,
})
})
let a= arr1.filter((el)=>{
return el.split('/')[2] ==1
})
if(a.length>0){
this.dateList.nVale=a[0].split('/')[0]
this.dateList.yVale=a[0].split('/')[1]
}else{
this.dateList.nVale=arr1[0].split('/')[0]
this.dateList.yVale=arr1[0].split('/')[1]
}
}
dianArr.map((el,index)=>{
riDate[index].isRc=el
})
this.riDate=riDate
},
//获取每年一月一的第一周的日期
getrlDate2(){
//有日程的标识
let dianArr=[true,true,true,false,false,true,true]
//获取月第一周的时间
let arr =new Date( this.dateList.nVale,Number(this.dateList.yVale)-1,1).getWeekTime()
let timeArr=[]
let riDate=[]
//判断1号是周天吗
if(arr[arr.length-1].split('/')[2]==1){
timeArr= new Date(this.dateList.nVale,Number(this.dateList.yVale)-1,2).getWeekTime()
timeArr.pop()
timeArr.unshift(arr[arr.length-1])
timeArr.map((el)=>{
riDate.push({
time:el,
})
})
}else{
timeArr=arr
timeArr.pop()
timeArr.unshift(new Date(this.dateList.nVale,Number(timeArr[0].split('/')[1])-1,Number(timeArr[0].split('/')[2])-1).getWeekTime()[6])
timeArr.map((el)=>{
riDate.push({
time:el,
})
})
}
dianArr.map((el,index)=>{
riDate[index].isRc=el
})
this.riDate=riDate
},
//年月的左右切换月份
nyPre(type){
if(type!=1 && this.dateList.yVale!=1){
this.dateList.yVale=Number(this.dateList.yVale)-1
this.getrlDate2()
}
if(type==1 && this.dateList.yVale!=12){
this.dateList.yVale=Number(this.dateList.yVale)+1
this.getrlDate2()
}
},
//日程的日历下方的左边
rcLeft(){
this.getrlDate(Number(this.riDate[0].time.split('/')[0]),Number(this.riDate[0].time.split('/')[1]),Number(this.riDate[0].time.split('/')[2])-1,false,0)
},
//日程的日历下方的右边
rcRight(){
this.getrlDate(Number(this.riDate[this.riDate.length-1].time.split('/')[0]),Number(this.riDate[this.riDate.length-1].time.split('/')[1]),Number(this.riDate[this.riDate.length-1].time.split('/')[2])+2,false,1)
},
//点击选择日程
clickRc(el){
this.activeRc=el.time
},
},
destroyed() { },
}
</script>
<style>
.el-dropdown-menu{
/* width: 80px; */
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.el-dropdown-menu .el-dropdown-menu__item{
list-style: none;
line-height: 36px;
padding: 0;
margin: 0;
font-size: 14px;
padding: 0 20px;
color: #606266;
cursor: pointer;
outline: 0;
text-align: center;
}
</style>
<style lang="scss" >
.head {
height: 56px;
width: 100%;
border-bottom: 1px solid rgba(221, 226, 231, 1);
&>div {
width: 97%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.left {
height: 100%;
font-family: 'pf';
font-size: 18px;
color: #333333;
font-weight: 400;
display: flex;
align-items: center;
&>div {
height: 100%;
display: flex;
align-items: center;
;
justify-content: center;
cursor: pointer;
}
&>div:not(:first-child) {
margin-left: 50px;
}
.active {
color: #0070FF;
font-weight: 600;
position: relative;
}
.active::before {
content: '';
display: inline-block;
width: 72px;
height: 3px;
background: #0070FF;
position: absolute;
bottom: 0;
}
}
.right {
font-family: 'pf';
font-size: 16px;
color: #999999;
text-align: right;
font-weight: 400;
cursor: pointer;
}
}
}
.rcZj {
width: 100%;
height: 100%;
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);
border-radius: 8px;
.head {
&>div {
width: 92%;
}
}
.timeBox {
width: 92%;
height: 35%;
margin: 0 auto;
margin-bottom: 24px;
display: flex;
flex-direction: column;
align-items: center;
.ny {
display: flex;
align-items: center;
margin-top: 24px;
margin-bottom: 18px;
.pre {
width: 18px;
height: 18px;
background: #4F8BE2;
border-radius: 2.25px;
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dateBox {
margin: 0 15px;
&>div:nth-child(2) {
margin-left: 10px;
}
>>>.el-dropdown {
font-family: 'pfm';
font-size: 16px;
color: #4F8BE2;
letter-spacing: 0;
font-weight: 500;
cursor: pointer;
.el-icon-caret-bottom {
margin-left: 4px;
color: #c6c6c6;
}
}
}
}
&>div:nth-child(2) {
width: 100%;
height: 100%;
background: rgba(236, 245, 254, 0.53);
border-radius: 4px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.rl {
width: 90%;
margin: 0 auto;
&>div {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'pf';
font-size: 14px;
color: #9EA0A2;
text-align: center;
line-height: 20px;
font-weight: 400;
&>div {
width: 52px;
}
}
&>div:nth-child(2) {
font-family: 'pfm';
font-size: 16px;
color: #303031;
text-align: center;
line-height: 20px;
font-weight: 500;
margin-top: 13px;
&>div {
width: 52px;
height: 44px;
// background: #0070FF;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.dian {
width: 6px;
height: 6px;
margin-top: 3px;
&>div {
width: 6px;
height: 6px;
background: #0070FF;
border-radius: 50%;
}
}
}
.active {
background: #0070FF;
color: #fff;
.dian {
&>div {
background: #ffffff;
}
}
}
}
}
.pre-left {
position: absolute;
width: 19px;
height: 42px;
background: url(../assets/left.png) no-repeat;
background-size: 100% 100%;
left: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
.pre-right {
position: absolute;
width: 19px;
height: 42px;
background: url(../assets/right.png) no-repeat;
background-size: 100% 100%;
right: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
}
}
.rcBox {
width: 92%;
margin: 0 auto;
height: 50%;
overflow-y: auto;
&>div {
.title {
font-family: 'pfm';
font-size: 16px;
color: #4D4636;
font-weight: 600;
margin-bottom: 16px;
}
.table {
&>div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
&>div:nth-child(1) {
display: flex;
align-items: center;
font-family: 'pf';
font-size: 16px;
color: #333333;
line-height: 20px;
font-weight: 400;
img {
width: 28px;
height: 28px;
margin-right: 16px;
}
}
&>div:nth-child(2) {
font-family: 'pf';
font-size: 16px;
color: #626466;
line-height: 16px;
font-weight: 400;
margin-right: 4px;
}
}
}
}
}
/*设置滚动条的样式*/
.rcBox::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
}
.rcBox::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background-color: #7dafe4;
}
.rcBox::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(29, 94, 164, 0.4);
/* background: #ededed; */
border-radius: 10px;
}
}
</style>
