效果图
功能：可以记录当天是否有某些任务或者某些记录
具体使用：
子组件代码
<template>
<view class="Accumulate">
<view class="bx">
<view class="bxx">
<view class="plank">
</view>
<view class="calendar">
<view class="calendarbx">
<view class="calendarview flex jc ac">
<u-icon name="arrow-left" color="#232323" size="18" @click="addmonth(1)"></u-icon>
<view class="title">
{{viewday}}
</view>
<u-icon name="arrow-right" color="#232323" size="18" @click="addmonth(2)"></u-icon>
</view>
<view class="week flex ac">
<view class="weekli" v-for="(item,index) in week">
{{item.title}}
</view>
</view>
<view class="data">
<view class=" flex ac flexwrap" v-if="show">
<view class="datali flex jc ac" v-for="(item,index) in days" :key="item">
<!-- 三层判断条件 -->
<view class="dataliradius flex jc ac flexwrap"
:class="newday==item&&isnewmonth&&chooseday==item?'dataliradiusc':newday==item&&isnewmonth&&chooseday!=item?'dataliradiuscc':newday!=item&&chooseday==item?'dataliradiusc':''"
@click.stop="funchoosedayy(item)">
{{item==newday&&isnewmonth?'今':item}}
<view class="rounds">
<view class="round" v-if="recordlist.includes(item)&&item!=chooseday">
</view>
</view>
</view>
</view>
</view>
<!-- 以下是为了防止切换闪烁而复制了一份用于展示 -->
<view class=" flex ac flexwrap" v-else>
<view class="datali flex jc ac" v-for="(item,index) in days" :key="item">
<!-- 三层判断条件 -->
<view class="dataliradius flex jc ac flexwrap"
:class="newday==item&&isnewmonth&&chooseday==item?'dataliradiusc':newday==item&&isnewmonth&&chooseday!=item?'dataliradiuscc':newday!=item&&chooseday==item?'dataliradiusc':''">
{{item==newday&&isnewmonth?'今':item}}
<view class="rounds" v-if="recordlist.includes(item)&&item!=chooseday">
<view class="round">
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
day: Number(new Date()), //用于记录今天
showday: null, //用来存储要加减的日期
viewday: null, //页面上展示的日期
newday: null, //当天几号
isnewmonth: true, //是否是当月
chooseday: null, //选中的那一天
show: true,
week: [{
title: '一'
},
{
title: '二'
},
{
title: '三'
},
{
title: '四'
},
{
title: '五'
},
{
title: '六'
},
{
title: '日'
}
],
days: [], //天数数组
height: 0
};
},
props:{
recordlist:{
default: [], //是否有练习记录，需要每次切换月份的时候查询，那几天有练习记录，下标会记录
stype:Array
}
},
onLoad() {
},
onReady() {
let time = this.yearFormat(this.day, 'obj')
this.newday = time.day; //当天日期只用初始化一次就不用再初始化了
this.showday = time.year + '-' + time.month + '-' + time.day; //用来存储要加减的日期
this.viewday = this.yearFormat(this.showday) //页面上展示的日期
this.chooseday = time.day;
this.addmonth(0) //初始化时间
},
methods: {
//选中日期
funchoosedayy(item) {
// console.log(item, '选中几号');
if (item == '') {
return
}
this.chooseday = item;
let dataobj = this.showday.split('-');
let month;
let year;
let day;
let sendtime = dataobj[0] + '-' + dataobj[1] + '-' + this.chooseday;
this.$emit('sendtime', '选中的时间:' + sendtime);
},
//加减月份,初始化月份
addmonth(type) {
this.show = false;
setTimeout(() => {
this.show = true;
}, 100)
let newmonth = this.yearFormat(this.day, 'obj')
let dataobj = this.showday.split('-');
let month;
let year;
let day;
//加
if (type == 2) {
if (dataobj[1] == 12) {
month = 1;
year = (dataobj[0] * 1) + 1
} else {
year = (dataobj[0] * 1);
month = (dataobj[1] * 1) + 1
}
}
//减
if (type == 1) {
if (dataobj[1] == 1) {
month = 12;
year = (dataobj[0] * 1) - 1
} else {
year = (dataobj[0] * 1);
month = (dataobj[1] * 1) - 1
}
}
//初始化使用
if (type == 0) {
month = (dataobj[1] * 1);
year = (dataobj[0] * 1);
}
let daynum = this.getDaysInYearMonth(year, month);
this.days = daynum; //获取天数
let week = this.getDayOfWeek(year, month, 1) //获取每个月1号星期几
//0 相当于星期日
let addday;
if (week == 0) {
addday = 6;
} else {
addday = (week - 1)
}
for (let i = 0; i < addday; i++) {
this.days.unshift('')
this.$forceUpdate()
}
//判断是否是当月,是当月的话，选中当天日期，不是则是当月1号
if (newmonth.month == month) {
day = dataobj[2];
this.chooseday = newmonth.day;
this.isnewmonth = true;
this.showday = year + '-' + month + '-' + day;
this.viewday = year + '年' + month + '月';
// console.log(this.showday, '当月');
this.$forceUpdate()
} else {
day = 1;
this.chooseday = day;
this.isnewmonth = false;
this.showday = year + '-' + month + '-' + day;
this.viewday = year + '年' + month + '月';
this.$forceUpdate()
}
// console.log(this.days);
this.$emit('state_sendtime', '初始化时间:' + this.showday);
this.$forceUpdate()
},
//获取年月
yearFormat(num, obj) {
//过滤器 用于格式化时间
let date = new Date(num); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let year = date.getFullYear();
let month = ("0" + (date.getMonth() + 1)).slice(-2);
let sdate = ("0" + date.getDate()).slice(-2);
let hour = ("0" + date.getHours()).slice(-2);
let minute = ("0" + date.getMinutes()).slice(-2);
let second = ("0" + date.getSeconds()).slice(-2);
let result;
if (obj) {
// 拼接
result = {
year: year,
month: month,
day: sdate
}
} else {
result = year + '年' + month + '月'
}
// 返回
return result;
},
// 获取该年该月的天数
getDaysInYearMonth(year, month) {
// 每一次进行更新前,先清空日期数组
month = parseInt(month, 10);
// javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天（1~31），当设置为0的时候，getDate()返回的就是最后一天，刚好对应我们需要的值。
var date = new Date(year, month, 0);
let arr = [];
for (var i = 1; i <= date.getDate(); i++) {
arr.push(i)
}
return arr;
},
//获取周几
// console.log(getDayOfWeek(2023, 10, 5)); // 输出：星期四
// 0就是 周日
getDayOfWeek(year, month, day) {
console.log(year, (month * 1), day);
const date = new Date(year + '-' + (month * 1) + '-' + day).getDay(); // 注意月份是从0开始计数
const options = {
weekday: 'long'
};
//new Intl.DateTimeFormat('zh-CN', options).format(date)
return date;
}
}
}
</script>
<style lang="less" scoped>
.Accumulate {
// position: relative;
}
.back {
width: 100%;
height: 360rpx;
border-radius: 0 0 60rpx 60rpx;
background: #3366ff;
position: absolute;
}
.Evaluationlist {
margin-top: 30rpx;
padding: 0 30rpx;
box-sizing: border-box;
overflow: scroll;
.Evaluationlistli {
padding: 30rpx 20rpx;
box-sizing: border-box;
border-radius: 30rpx;
background: #fff;
margin-bottom: 30rpx;
.left {
// display: block;
width: 70%;
max-height: 100rpx;
}
.right {
padding: 10rpx 30rpx;
height: 60rpx;
box-sizing: border-box;
border-radius: 20rpx;
background: #3366ff;
color: #fff;
}
.rightb {
padding: 10rpx 30rpx;
height: 60rpx;
box-sizing: border-box;
border-radius: 20rpx;
background: #fff;
color: #3366ff;
border: 1rpx solid #3366ff;
}
}
}
.bx {
width: 100%;
// position: absolute;
z-index: 999;
.plank {
width: 100%;
height: 30rpx;
}
}
.viewdata {
width: 100%;
height: 130rpx;
padding: 0 30rpx;
box-sizing: border-box;
.viewdatali {
width: 46%;
height: 100%;
border-radius: 30rpx;
.num {
width: 100%;
font-size: 38rpx;
font-weight: bold;
text-align: center;
}
.title {
width: 100%;
font-size: 24rpx;
margin-top: 5rpx;
text-align: center;
}
}
.viewdataliA {
background: #f5f5f5;
color: skyblue;
}
.viewdataliB {
background: #f5f5f5;
color: pink;
}
}
.calendar {
width: 100%;
// padding: 30rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
// border-radius: 30rpx;
.calendarbx {
width: 100%;
padding: 30rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
border-radius: 30rpx;
background: #fff;
.calendarview {
background: lightgoldenrodyellow;
padding: 10rpx 20rpx;
box-sizing: border-box;
.title {
color: #232323;
font-size: 28rpx;
margin-left: 100rpx;
margin-right: 100rpx;
}
}
.week {
font-size: 26rpx;
color: #999;
margin-top: 30rpx;
.weekli {
width: 12.2%;
height: 30rpx;
text-align: center;
margin-right: 2.4%;
line-height: 30rpx;
}
.weekli:nth-child(7n+7) {
margin-right: 0% !important;
}
}
.data {
font-size: 28rpx;
color: #999;
margin-top: 40rpx;
font-weight: bold;
min-height: 410rpx;
.datali {
width: 12.2%;
height: 50rpx;
// text-align: center;
margin-right: 2.4%;
margin-bottom: 40rpx;
.dataliradius {
width: 50rpx;
height: 50rpx;
border-radius: 999%;
background: #fff;
line-height: 50rpx;
color: #232323 !important;
.rounds {
width: 100%;
height: 10rpx;
.round {
width: 10rpx;
height: 10rpx;
border-radius: 999%;
background: #3366ff;
margin: auto;
}
}
}
.dataliradiuscc {
color: #3366ff !important;
}
.dataliradiusc {
width: 50rpx;
height: 50rpx;
border-radius: 999%;
background: #3366ff;
color: #fff !important;
line-height: 50rpx;
}
}
.datali:nth-child(7n+7) {
margin-right: 0% !important;
}
}
}
}
</style>父组件
<customCalendar @sendtime="sendtime" @state_sendtime="state_sendtime" :recordlist="[27, 25, 26, 29, 28]" ></customCalendar>有需求可以自行修改。
