微信小程序原生实现日历功能

1.实现效果图：

当前日期底部显示一个点，其他状态可根据自己的需求自定义。

2.完整代码

码云链接：https://gitee.com/susuhhhhhh/wxmini_demo

3.部分代码


<!-- 日历 -->
<view class="calendar"><view class="cale_month flex-row j_b"><view catchtap="toLastMon"><image src="/img/de_icon3.png" class="cale_img"></image></view><view>{{year}}.{{months[monthIndex]}}</view><view catchtap="toNextMon"><image src="/img/de_icon2.png" class="cale_img"></image></view></view><view class="cale_week flex-row j_b "><block wx:for="{{weekArr}}"><view>{{item}}</view></block></view><view class='box1' style='width: {{ sysW * 7 }}rpx'><block wx:for='{{ arr }}'><view class="isrela flex-column" style='{{ index == 0 ? "margin-left:" + sysW * marLet + "rpx;" : "" }}width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;' key="{{item}}"><view  wx:if="{{item.isbook==1}}" class='book isbook'>{{ item.day }}</view><view  wx:if="{{item.isbook==0}}">{{ item.day }}</view><view  wx:if="{{item.isbook==2}}" class=' book waitbook'>{{ item.day }}</view><view  wx:if="{{item.isbook==3}}" class='book stopbook'>{{ item.day }}</view><!-- 当前日期 --><view  wx:if="{{item.day===getToday}}" class='dot'></view></view></block></view>
</view>


.top{margin-bottom: 30rpx;
}
/*  */
.calendar{margin: 20rpx 24rpx 26rpx 24rpx;width: 700rpx;background: #FFFFFF;border-radius: 20rpx;box-sizing: border-box;padding: 25rpx 24rpx 54rpx;
}
.cale_month{text-align: center;font-size: 28rpx;font-weight: 600;color: #333333;
}
.cale_img{width: 14rpx;height: 23rpx;
}.cale_week{margin: 32rpx auto;width: 651rpx;height: 65rpx;background: rgba(103, 32, 116, 0.1);border-radius: 36rpx;font-size: 26rpx;font-weight: 500;color: #672074;box-sizing: border-box;padding: 0 38rpx;
}.box1 {display: flex;flex-wrap: wrap;margin: 15rpx auto 0;font-size: 26rpx;font-weight: 400;color: #333333;
}.isbook {background: #672074;
}
.isrela {text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;
}
.book{width: 48rpx;height: 48rpx;border-radius: 50%;text-align: center;line-height:48rpx;color: #FFFFFF;
}
.waitbook{background: rgba(103, 32, 116, 0.25);
}
.stopbook{background: #D3D3D3;
}
.dot{position: absolute;width: 15rpx;height: 15rpx;border-radius: 50%;background: #672074;top: 72rpx;
}


Page({data: {getToday:'',//当前日期chosedMonth:'',arr: [],sysW: 92,marLet:'',//左边边距weekArr: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],monthIndex:'',months:['January','February','March','April','May','June','July','August','September','October','November','December '],booklist: ["5","12"],//状态一waitList:['19'],//状态二stopList:['26'],//状态三},//上个月toLastMon(){let date=this.data.chosedMonth;date.setMonth(date.getMonth()-1);let getToday='';if((new Date()).getMonth()==(date.getMonth())){getToday=(new Date()).getDate()}this.getTime(date)this.setData({chosedMonth:date,getToday:getToday})},//下个月toNextMon(){let date=this.data.chosedMonth;date.setMonth(date.getMonth()+1);let getToday='';if((new Date()).getMonth()==(date.getMonth())){// -11getToday=(new Date()).getDate()}this.getTime(date)this.setData({chosedMonth:date,getToday:getToday})},//获取日历相关参数dataTime: function (date) {//   var date = new Date('2021-7-2');var year = date.getFullYear();var month = date.getMonth();  //0（一月） 到 11（十二月） var months = date.getMonth() + 1;//这个是当前的月份this.data.year=year //当前的年份this.data.monthIndex=month;//当前月份的索引this.data.getToday = date.getDate();//获取当前的日期 8号var d = new Date(year, months, 0);//Wed Jun 30 2021 00:00:00 GMT+0800 (中国标准时间)  2021年6月30日 周三this.data.lastDay = d.getDate();//这是当前月份的所有天数 30let firstDay = new Date(year, month, 1);//Tue Jun 01 2021 00:00:00 GMT+0800 (中国标准时间)this.data.firstDay = firstDay.getDay();// 第一天开始前的位置},onShow: function (options) {var date = new Date();this.getTime(date);//获取时间this.setData({chosedMonth:date})},getTime(date){this.dataTime(date);//先清空数组，根据得到今月的最后一天日期遍历 得到所有日期if (this.data.arr) {this.data.arr = [];}for (var i = 0; i < this.data.lastDay; i++) {var obj = {};obj.day = i + 1;obj.isbook=0//无状态this.data.arr.push(obj);this.data.booklist.forEach(item=>{if(this.data.arr[i].day==item){this.data.arr[i].isbook = 1//状态一}})this.data.waitList.forEach(item=>{if(this.data.arr[i].day==item){this.data.arr[i].isbook = 2//状态2}})this.data.stopList.forEach(item=>{if(this.data.arr[i].day==item){this.data.arr[i].isbook = 3//状态3}})}this.setData({marLet: this.data.firstDay,arr: this.data.arr,monthIndex: this.data.monthIndex,getToday:this.data.getToday,year:this.data.year});},});

微信小程序原生实现日历功能相关推荐

微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序横版日历，tab栏
代码地址如下: http://www.demodashi.com/demo/14243.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验前期准备因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
【微信小程序-原生开发】watch 的实现
微信小程序-原生开发本身并没有 vue 中 watch 的功能,可以通过以下方式实现定义监听器 utils\watch.js /*** 设置监听器*/ export function setWatc ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...

微信小程序原生实现日历功能

1.实现效果图：

2.完整代码

3.部分代码

微信小程序原生实现日历功能相关推荐

最新文章

热门文章