先放个实现效果:
calendar.js
const db = wx.cloud.database();//连接云数据库
var util = require('../../utils/util.js');
Page({
data: {
showModal: false,
hasEmptyGrid: false,
cur_year: '',
cur_month: '',
cur_day: '',
notes: '',
},
onLoad(options) {
this.setNowDate();
this.getNotes()
},
// 新建日程
showDialogBtn: function () {
this.setData({
showModal: true
})
},
// 弹出框蒙层截断touchmove事件
preventTouchMove: function () {
},
// 隐藏模态对话框
hideModal: function () {
this.setData({
showModal: false
});
},
// 对话框取消按钮点击事件
onCancel: function () {
this.hideModal();
},
//对话框确认按钮点击事件
onConfirm: function () {
this.hideModal();
//将输入的日程上传到数据库中
var that = this;
db.collection("calendar").add(
{
data: {
notes: that.data.notes,
posttime: `${this.data.cur_year}/${this.data.cur_month}/${this.data.todayIndex + 1}`
}
}
)
this.getNotes()
wx.showToast({
title: '记录成功',
icon: 'success',
duration: 1000
})
},
//输入日程
inputNotes: function (e) {
this.data.notes = e.detail.value
},
//返回
back(){
wx.redirectTo({
url: ''
})
},
dateSelectAction: function (e) {
var cur_day = e.currentTarget.dataset.idx;
this.setData({
todayIndex: cur_day
})
console.log(`${this.data.cur_year}/${this.data.cur_month}/${this.data.todayIndex + 1}`);
this.getNotes()
},
//获取日程
getNotes() {
var that = this
db.collection("calendar").orderBy("posttime", "desc").where({
//筛选日历对应日期的所有日程
posttime: `${this.data.cur_year}/${this.data.cur_month}/${this.data.todayIndex + 1}`
}).get()
.then(res => {
console.log(res)
this.setData({
getArr: res.data
})
})
},
setNowDate: function () {
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const todayIndex = date.getDate() - 1;
console.log(`日期:${todayIndex}`)
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
this.calculateEmptyGrids(cur_year, cur_month);
this.calculateDays(cur_year, cur_month);
this.setData({
cur_year: cur_year,
cur_month: cur_month,
weeks_ch,
todayIndex,
})
},
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
calculateEmptyGrids(year, month) {
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
empytGrids.push(i);
}
this.setData({
hasEmptyGrid: true,
empytGrids
});
} else {
this.setData({
hasEmptyGrid: false,
empytGrids: []
});
}
},
calculateDays(year, month) {
let days = [];
const thisMonthDays = this.getThisMonthDays(year, month);
for (let i = 1; i <= thisMonthDays; i++) {
days.push(i);
}
this.setData({
days
});
},
handleCalendar(e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === 'prev') {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.calculateDays(newYear, newMonth);
this.calculateEmptyGrids(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth
})
}
}
})
calendar.wxml
<!-- 显示日历 -->
<view class="canlendarBgView">
<view class="canlendarView">
<view class="canlendarTopView">
<view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
<view class="leftView">◀</view>
</view>
<view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<view class="rightBgView" bindtap="handleCalendar" data-handle="next">
<view class="rightView">▶</view>
</view>
</view>
<view class="weekBgView">
<view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class="dateBgView">
<view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
</view>
<view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
<view class="datesView {{index == todayIndex ? 'dateSelectView' : ''}}">{{item}}</view>
</view>
</view>
</view>
</view>
<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-title">添加日程</view>
<view class="modal-content">
<view class="modal-input">
<textarea bindinput="inputNotes" class="input" placeholder="请输入您的日程安排"></textarea>
</view>
</view>
<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
</view>
</view>
<!-- 两个按钮 -->
<view class="btnarea2">
<button bindtap="showDialogBtn" type="primary" >新建日程</button>
<button bindtap="back" type="primary" style="margin-left: 20rpx;">返回</button>
</view>
<view class="showNotes">
<view wx:for="{{getArr}}" wx:key="{{index}}" class="show_content">
{{index+1}}.
{{item.notes}}
</view>
</view>
calendar.wxss
/* pages/calendar/calendar.wxss */
page{
background-color: #EFEFEF;
}
.canlendarBgView {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.canlendarView {
color: black;
display: flex;
flex-direction: column;
}
.canlendarTopView {
height: 80rpx;
font-size: 28rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.leftBgView {
text-align: right;
height: 80rpx;
display: flex;
flex-direction: row-reverse;
}
.leftView {
width: 80rpx;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.centerView {
width: 50%;
height: 80rpx;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.rightBgView {
height: 80rpx;
display: flex;
flex-direction: row;
}
.rightView {
width: 80rpx;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.weekBgView {
height: 50rpx;
line-height: 50rpx;
opacity: 0.5;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.weekView {
flex-grow: 1;
text-align: center;
font-size: 28rpx;
}
.dateBgView {
height: 500rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dateEmptyView {
width: 107.1428571429rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.dateView {
width: 107.1428571429rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.datesView {
width: 60rpx;
height: 60rpx;
color: #6666CC;
font-size: 26rpx;
font-weight: 200;
display: flex;
align-items: center;
justify-content: center;
}
.dateSelectView {
border-radius: 50%;
position: relative;
left: 0;
top: 0;
color: #fff;
background-color: #3cb056;
}
.showNotes{
margin-top: 20rpx;
padding:20rpx;
height: auto;
background-color: white;
}
/* 弹框的样式 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 540rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 9999;
background: #f9f9f9;
margin: -180rpx 105rpx;
border-radius: 20rpx;
}
.modal-title {
padding-top: 50rpx;
font-size: 36rpx;
color: #030303;
text-align: center;
}
.modal-content {
padding: 50rpx 32rpx;
}
.modal-input {
display: flex;
background: #fff;
border: 2rpx solid #ddd;
border-radius: 4rpx;
font-size: 38rpx;
}
.input {
width: 100%;
height: 300rpx;
font-size: 38rpx;
line-height: 28rpx;
padding: 10rpx;
box-sizing: border-box;
color: #333;
}
input-holder {
color: #666;
font-size: 38rpx;
}
.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 1px solid #dedede;
font-size: 34rpx;
line-height: 86rpx;
}
.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}
.btn-confirm {
width: 50%;
color: #ec5300;
text-align: center;
}
.btnarea2 {
width: 96%;
margin-right: 2%;
margin-left: 2%;
margin-top: 10rpx;
display: flex;
justify-content: flex-start;
flex-direction: row;
}
utils.js
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}