总览
文章来源：https://www.toymoban.com/news/detail-772799.html
文章来源地址https://www.toymoban.com/news/detail-772799.html
视图
<!-- 计算 -->
<wxs module="containThisData">
module.exports.containThisData = function (dateArr, thisDate) {
// console.log(dateArr, thisDate)
return dateArr.indexOf(thisDate)>-1
}
</wxs>
<view class="components-calendars">
<!--显示当前年月日-->
<view class='calendar-title'>
<view class="lastMonthView" bindtap='lastMonth'>
<image class="lastMonth" src="/images/compoment/lastDay.png"></image>
</view>
<view class='item title'> {{title}} </view>
<view class="nextMonthView" bindtap='nextMonth'>
<image class="nextMonth" src="/images/compoment/nextDay.png"></image>
</view>
</view>
<!--遍历星期-->
<view class='calendar-week'>
<view wx:for='{{weekText}}' class='item' wx:key='item'>{{item}}</view>
</view>
<view class='calendar-container'>
<!--上个月占位格子-->
<view class='grid gray' wx:for='{{empytGridsBefore}}' wx:key='item'>{{item}}</view>
<!--当月格子-->
<view class='grid' wx:for='{{thisMonthDays}}' wx:key='index' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
<view class='read' wx:if="{{ containThisData.containThisData(readDataArr,year+'-'+item.monthFormat+'-'+item.dateFormat) && select!=year+'-'+item.monthFormat+'-'+item.dateFormat}}"></view>
<view class='unread' wx:if="{{ containThisData.containThisData(unReadDataArr,year+'-'+item.monthFormat+'-'+item.dateFormat)&& select!=year+'-'+item.monthFormat+'-'+item.dateFormat }}"></view>
<view class="wrap {{ select === year+'-'+item.monthFormat+'-'+item.dateFormat ? 'select' : ''}}" bindtap='select' data-date='{{item.date}}'>{{item.date}}</view>
</view>
<!--下个月占位格子-->
<view class='grid gray' wx:for='{{empytGridsAfter}}' wx:key='item'>{{item}}</view>
</view>
<view class="calendar-bottom" >
<view class="bottomShow"><view style="width: 10rpx;height: 10rpx; background-color: #178eb6;margin-top: 13rpx;margin-right: 5rpx;border-radius: 50%;"></view>未读报告</view>
<view class="bottomShow"><view style="width: 24rpx;height: 24rpx; background-color: #178eb6;margin-top: 5rpx;margin-right: 5rpx;border-radius: 50%;"></view>当前查看报告</view>
<view class="bottomShow"><view style="width: 10rpx;height: 10rpx; background-color: #178eb6;margin-top: 13rpx;margin-right: 5rpx;border-radius: 50%;opacity: 0.5;"></view>已读报告</view>
</view>
</view>
样式
body {
height: 100%;
position: relative;
}
.components-calendars-bg {
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, .9);
position: absolute;
z-index: 888;
display: flex;
align-items: center;
justify-content: center;
}
.components-calendars {
width: 100%;
background-color: #ffffff;
text-align: center;
font-size: 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
z-index: 999;
margin-top: 20rpx;
}
/* 标题 */
.calendar-title {
line-height: 70rpx;
font-size: 30rpx;
text-align: left;
box-sizing: border-box;
display: inline;
}
.lastMonthView{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-right: 50rpx;
}
.nextMonthView{
display: inline-block;
width: 50rpx;
height: 50rpx;
}
.lastMonth{
height: 20rpx;
width: 20rpx;
}
.nextMonth{
height: 20rpx;
width: 20rpx;
}
.calendar-title .ctrl {
display: inline-block;
padding: 0 20rpx;
background: #f5f5f5;
border-radius: 10rpx;
}
.calendar-title .item {
display: inline-block;
vertical-align: middle;
line-height: 50rpx;
}
.calendar-title .title {
min-width: 300rpx;
text-align: center;
}
.calendar-title .today {
float: right;
margin-top: 10rpx;
}
/* 星期 */
.calendar-week {
display: flex;
text-align: center;
padding: 20rpx 20rpx;
box-sizing: border-box;
background: #ffffff;
}
.calendar-week .item {
flex: 1;
}
/* 日期 */
.calendar-container {
display: flex;
flex-wrap: wrap;
padding: 20rpx 10rpx;
box-sizing: border-box;
}
.calendar-container .grid {
display: inline-block;
width: 14.28571428571429%;
line-height: 70rpx;
position: relative;
z-index: 1;
}
.calendar-container .grid .self {
position: absolute;
top: 0rpx;
right: 0rpx;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
background: #178eb6;
border: 3rpx solid #fff;
}
.calendar-container .grid .read {
position: absolute;
top: 10rpx;
right: 15rpx;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
opacity: 0.5;
background: #178eb6;
border: 3rpx solid #fff;
}
.calendar-container .grid .unread {
position: absolute;
top: 10rpx;
right: 15rpx;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
background: #178eb6;
border: 3rpx solid #fff;
}
.calendar-bottom{
margin-top: 10rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: left;
font-size: 24rpx;
}
.bottomShow{
margin: 20rpx;
display: flex;
justify-content: left;
}
.calendar-container .grid.gray {
color: #ccc;
}
.calendar-container .grid .wrap.select {
background: #178eb6;
border-radius: 50%;
color: #fff;
width: 70%;
margin: 0 auto;
}
.calendar-btn {
height: 80rpx;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-around;
/* justify-content:; */
border-top:2rpx solid #e0e0e0 ;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
逻辑
// 参考文档 https://blog.csdn.net/weixin_43123717/article/details/106645777?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168551453816800226512724%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168551453816800226512724&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-106645777-null-null.142^v88^control,239^v2^insert_chatgpt&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%20%E8%87%AA%E5%AE%9A%E4%B9%89%E6%97%A5%E5%8E%86%E7%BB%84%E4%BB%B6&spm=1018.2226.3001.4187
Component({
//初始默认为当前日期
properties: {
//默认值
defaultValue: {
type: String,
value: '' //2023-05-30
},
readDataArr: {
type: Array,
value: [], //["2023-05-30", "2023-05-31"]
},
unReadDataArr: {
type: Array,
value: [], //["2023-05-28", "2023-05-29"]
},
//星期数组
weekText: {
type: Array,
value: ['日', '一', '二', '三', '四', '五', '六']
},
},
// 组件的初始数据
data: {
//当月格子
thisMonthDays: [],
//上月格子
empytGridsBefore: [],
//下月格子
empytGridsAfter: [],
//显示日期
title: '',
//格式化日期
format: '',
year: 0,
month: 0,
date: 0,
toggleType: 'large',
scrollLeft: 0,
//常量 用于匹配是否为当天
YEAR: 0,
MONTH: 0,
DATE: 0,
startX: 0,
endX: 0,
moveFlag: true,
},
ready: function () {
this.today();
},
methods: {
//初始化
display: function (year, month, date) {
this.setData({
year,
month,
date,
title: year + '年' + this.zero(month) + '月',
// title: year + '年' + this.zero(month) + '月' + this.zero(date) + '日',
})
this.createDays(year, month);
this.createEmptyGrids(year, month);
},
//默认选中当天 并初始化组件
today: function () {
console.log(this.data.defaultValue)
console.log(new Date(this.data.defaultValue))
console.log(new Date())
let DATE = this.data.defaultValue ? new Date(this.data.defaultValue) : new Date(),
year = DATE.getFullYear(),
month = DATE.getMonth() + 1,
date = DATE.getDate(),
select = year + '-' + this.zero(month) + '-' + this.zero(date);
this.setData({
format: select,
select: select,
year: year,
month: month,
date: date,
YEAR: year,
MONTH: month,
DATE: date,
})
//初始化日历组件UI
this.display(year, month, date);
//发送事件监听
this.triggerEvent('select', select);
},
//选择 并格式化数据
select: function (e) {
let date = e.currentTarget.dataset.date,
select = this.data.year + '-' + this.zero(this.data.month) + '-' + this.zero(date);
this.setData({
title: this.data.year + '年' + this.zero(this.data.month) + '月' + this.zero(date) + '日',
select: select,
year: this.data.year,
month: this.data.month,
date: date
});
//发送事件监听
this.triggerEvent('callBackFunction', select);
console.error("选中日期==>", select)
},
//上个月
lastMonth: function () {
let month = this.data.month == 1 ? 12 : this.data.month - 1;
let year = this.data.month == 1 ? this.data.year - 1 : this.data.year;
//初始化日历组件UI
this.display(year, month, 0);
},
//下个月
nextMonth: function () {
let month = this.data.month == 12 ? 1 : this.data.month + 1;
let year = this.data.month == 12 ? this.data.year + 1 : this.data.year;
//初始化日历组件UI
this.display(year, month, 0);
},
//获取当月天数
getThisMonthDays: function (year, month) {
return new Date(year, month, 0).getDate();
},
// 绘制当月天数占的格子
createDays: function (year, month) {
let thisMonthDays = [],
days = this.getThisMonthDays(year, month);
for (let i = 1; i <= days; i++) {
thisMonthDays.push({
date: i,
dateFormat: this.zero(i),
monthFormat: this.zero(month),
week: this.data.weekText[new Date(Date.UTC(year, month - 1, i)).getDay()]
});
}
this.setData({
thisMonthDays
})
},
//获取当月空出的天数
createEmptyGrids: function (year, month) {
let week = new Date(Date.UTC(year, month - 1, 1)).getDay(),
empytGridsBefore = [],
empytGridsAfter = [],
emptyDays = (week == 0 ? 7 : week);
//当月天数
var thisMonthDays = this.getThisMonthDays(year, month);
//上月天数
var preMonthDays = month - 1 < 0 ?
this.getThisMonthDays(year - 1, 12) :
this.getThisMonthDays(year, month - 1);
//空出日期
for (let i = 1; i <= emptyDays; i++) {
empytGridsBefore.push(preMonthDays - (emptyDays - i));
}
// var after = (42 - thisMonthDays - emptyDays) - 7 >= 0 ?
// (42 - thisMonthDays - emptyDays) - 7 :
// (42 - thisMonthDays - emptyDays);
var after = (42 - thisMonthDays - emptyDays);
for (let i = 1; i <= after; i++) {
empytGridsAfter.push(i);
}
this.setData({
empytGridsAfter,
empytGridsBefore
})
},
//补全0
zero: function (i) {
return i >= 10 ? i : '0' + i;
},
touchStart: function (e) {
this.data.startX = e.touches[0].pageX; // 获取触摸时的原点
this.data.moveFlag = true;
},
touchMove: function (e) {
this.data.endX = e.touches[0].pageX; // 获取触摸时的原点
if (this.data.moveFlag) {
if (this.data.endX - this.data.startX > 50) {
// console.log("move right");
this.data.moveFlag = false;
this.lastMonth()
}
if (this.data.startX - this.data.endX > 50) {
// console.log("move left");
this.data.moveFlag = false;
this.nextMonth()
}
}
},
touchEnd: function () {
this.data.moveFlag = false;
},
}
})
使用
<!-- 日期选择 -->
<view class="mask" wx:if="{{showSelectDate}}" bindtap="closeShowSelectDate"></view>
<myCalendar wx:if="{{showSelectDate}}" defaultValue="{{defaultValue}}" readDataArr="{{readDataArr}}" unReadDataArr="{{unReadDataArr}}" bind:callBackFunction="selectDatedraw" class="date_choose"></myCalendar>
到了这里，关于小程序自定义日历组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
