微信小程序日历组件

已于 2022-02-22 14:17:09 修改
阅读量3.1k 收藏 11
点赞数 2
分类专栏： 小程序 文章标签： 微信小程序 css 小程序
于 2022-02-22 13:21:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YourNikee/article/details/123065906
版权

要求的ui样式
在这里插入图片描述

实现后

在这里插入图片描述
在这里插入图片描述

日期年月可以选择。

实现：

wxml

<view class="calendarOut">
    <view class="fullDate titleText">
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
            <view class="picker">
            {{multiArray[0][multiIndex[0]]}}年{{multiArray[1][multiIndex[1]]}}月
            </view>
        </picker>
    </view>
    <view class="nowrap allFlexBet lineCalendar" wx:for="{{list}}" wx:for-index="indexs" wx:for-item='items' wx:key='indexs'>
        <view wx:for="{{items}}" bindtap="seeOneDay" data-indexs='{{item.indexOn}}' class="singleDay {{item.day?'':'contentText_xl dayTitle'}} {{item.lastWeek?'loatDay':''}} {{item.indexOn == activeDay?'activeDay':''}}">
        {{item.name}}
            <view class="calendarDot" wx:if="{{item.schedule}}"></view>
        </view>
    </view>
</view>

wxcss

/*@import "/static/css/common.wxss";*/

.nowrap{
	display:flex;
	flex-wrap:nowrap;
}
.allFlexBet{
	display: flex;
    justify-content: space-between;
}

.calendarOut{
    background: #fff;
    border-radius: 0 0 60rpx 60rpx;
    padding:20rpx 29rpx 70rpx 29rpx;
}
.fullDate{
    color: #000;
    font-weight: bold;
    margin-bottom: 32rpx;
}
.lineCalendar{
    margin-bottom: 40rpx;
}
.singleDay{
    width: 64rpx;
    height: 64rpx;
    text-align: center;
    line-height: 64rpx;
    position: relative;
    transition: all .3s linear;
    border-radius: 50%;
}
.calendarDot{
    position: absolute;
    bottom: -20rpx;
    left: 0;
    right: 0;
    margin: auto;
    background: #FF9502;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
}
.dayTitle{
    color: #666;
}
.thisMonth{
    color: #000;
}
.loatDay{
    color: rgba(0,0,0,0.3);
}
.activeDay{
    background: linear-gradient(0deg, #3693F1, #152CD8);
    box-shadow: 0px 10rpx 10rpx 0px rgba(38, 98, 229, 0.3);
    border-radius: 50%;
    color: #fff;
}
.thisDay{
    color:#3693F1;
}

js部分

// colorui/common/calendar/calendar.js
const app = getApp()
Component({
    lifetimes:{
        attached: function() {
            this.createOptions().then(()=>{
                this.createCaleData(new Date())
            })
        },
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        list:[],
        fullDate:'',
        thisDay:'',
        activeDay:'',
        dateArr:[],
        multiArray: [],
        multiIndex: [0, 0],
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getWeek(dateString) {
            var dateArray = dateString.split("-");
            date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
            return "日一二三四五六".charAt(date.getDay());
        },
        pushData(list,dayNum){
            for(let i=0;i<dayNum;i++){
                list.push({name:i+1,lastWeek:false,day:true})
            }
            return list 
        },
        haveDay(dateString){
            let str = '日一二三四五六'
            return str.indexOf(dateString)
        },
        seeOneDay(e){
            let index = e.currentTarget.dataset.indexs
            if(index>6){
                this.setData({
                    activeDay:e.currentTarget.dataset.indexs
                })
            }
        },
        createCaleData(myDate){
            if(myDate.getFullYear() == new Date().getFullYear() && myDate.getMonth() == new Date().getMonth()){
                myDate = new Date()
            }
            var year = myDate.getFullYear(); //年
            var month = myDate.getMonth()+1; //月
            var day = myDate.getDate(); //日
            var fristDay = this.getWeek(year + '-' + month + '-' + '01');
            var fullDate = year + '年' + month + '月'
            var list = [
                {name:"日",lastWeek:false,day:false,schedule:false},
                {name:"一",lastWeek:false,day:false,schedule:false},
                {name:"二",lastWeek:false,day:false,schedule:false},
                {name:"三",lastWeek:false,day:false,schedule:false},
                {name:"四",lastWeek:false,day:false,schedule:false},
                {name:"五",lastWeek:false,day:false,schedule:false},
                {name:"六",lastWeek:false,day:false,schedule:false}
            ]
            var dayNum = new Date(year,month,0).getDate()
            var lastDay = 6-this.haveDay(this.getWeek(year + '-' + month + '-' + dayNum))
            var preMonthDay = new Date(year,month-1,0).getDate()
            var residueDay = this.haveDay(fristDay)
            for(let i = 0; i<residueDay;i++){
                list.push({name:preMonthDay-(residueDay-i)+1,lastWeek:true,day:true,schedule:false})
            }
            list = this.pushData(list,dayNum)
            for(let i = 0; i<lastDay;i++){
                list.push({name:i+1,lastWeek:true,day:true,schedule:false})
            }
            list.map((item,index)=>{
                item.indexOn = index
                if(item.name == day && !item.lastWeek){
                    this.setData({
                        activeDay:index
                    })
                }
            })
            this.getThisMonth(year,month)
            this.setData({
                list:app.splieLine(list,7),
                fullDate:fullDate,
                thisDay:day
            })
        },
        bindMultiPickerChange(e){
            this.setData({
                multiIndex:e.detail.value
            })
            this.createCaleData(new Date(this.data.multiArray[0][this.data.multiIndex[0]],this.data.multiArray[1][this.data.multiIndex[1]]-1,01))
        },
        getThisMonth(year,month){
            let arr = []
            this.data.multiArray[0].map((item,index)=>{
                if(item == year){
                    arr[0] = index
                }
            })
            this.data.multiArray[1].map((item,index)=>{
                if(item == month){
                    arr[1] = index
                }
            })
            this.setData({
                multiIndex:arr
            })
        },
        createOptions(){
            return new Promise(resolve=>{
                let thisYear = new Date().getFullYear()
                let arr = [[thisYear-1,thisYear,thisYear+1],['01', '02', '03', '04', '05','06', '09', '08', '09', '10','11', '12']]
                this.setData({
                    multiArray:arr
                },()=>{
                    resolve()
                })
            })
            
        }
    }
})

app.js中的拆分方法

splieLine(list,line){
    let num = Math.ceil(list.length/line),nlist =[]
    for(let i=0;i<num;i++){
      nlist.push(list.splice(0,line))
    }
    return nlist
  }

该功能我是以全局组件的形式注册在app.json中的，注意是创建的时候需要 新建component

然后再app.json中注册全局。

在这里插入图片描述

-=-=-=-=-=-=-=-=-更新

加入了日程内容（传入时间数组，在时间下方显示圆点）

在这里插入图片描述

// colorui/common/calendar/calendar.js
const app = getApp()
Component({
    lifetimes:{
        attached: function() {
            let self = this;
            self.createOptions().then(()=>{
                let date = new Date(),month = date.getMonth()+1
                self.disposeDate(date.getFullYear() + (month<=9?'0'+month:month)).then(()=>{
                    self.createCaleData(new Date())
                })
            })
        },
    },
    /**
     * 组件的属性列表
     */
    properties: {
        scheduleList:{
            type:Array,
            value:[]
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        list:[],
        fullDate:'',
        thisDay:'',
        activeDay:'',
        dateArr:[],
        multiArray: [],
        multiIndex: [0, 0],
        monthCale:[]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getWeek(dateString) {
            var dateArray = dateString.split("-");
            date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
            return "日一二三四五六".charAt(date.getDay());
        },
        pushData(list,dayNum){
            for(let i=0;i<dayNum;i++){
                list.push({name:i+1,lastWeek:false,day:true})
            }
            return list 
        },
        haveDay(dateString){
            let str = '日一二三四五六'
            return str.indexOf(dateString)
        },
        seeOneDay(e){
            let index = e.currentTarget.dataset.indexs
            if(index>6){
                this.setData({
                    activeDay:e.currentTarget.dataset.indexs
                })
            }
        },
        createCaleData(myDate){
            if(myDate.getFullYear() == new Date().getFullYear() && myDate.getMonth() == new Date().getMonth()){
                myDate = new Date()
            }
            var year = myDate.getFullYear(); //年
            var month = myDate.getMonth()+1; //月
            var day = myDate.getDate(); //日
            var fristDay = this.getWeek(year + '-' + month + '-' + '01');
            var fullDate = year + '年' + month + '月'
            var list = [
                {name:"日",lastWeek:false,day:false,schedule:false},
                {name:"一",lastWeek:false,day:false,schedule:false},
                {name:"二",lastWeek:false,day:false,schedule:false},
                {name:"三",lastWeek:false,day:false,schedule:false},
                {name:"四",lastWeek:false,day:false,schedule:false},
                {name:"五",lastWeek:false,day:false,schedule:false},
                {name:"六",lastWeek:false,day:false,schedule:false}
            ]
            var dayNum = new Date(year,month,0).getDate()
            var lastDay = 6-this.haveDay(this.getWeek(year + '-' + month + '-' + dayNum))
            var preMonthDay = new Date(year,month-1,0).getDate()
            var residueDay = this.haveDay(fristDay)
            for(let i = 0; i<residueDay;i++){
                list.push({name:preMonthDay-(residueDay-i)+1,lastWeek:true,day:true,schedule:false})
            }
            list = this.pushData(list,dayNum)
            for(let i = 0; i<lastDay;i++){
                list.push({name:i+1,lastWeek:true,day:true,schedule:false})
            }
            list.map((item,index)=>{
                item.indexOn = index
                if(item.name == day && !item.lastWeek){
                    this.setData({
                        activeDay:index
                    })
                }
            })
            this.getThisMonth(year,month)
            this.disposeList(list)
            this.setData({
                list:app.splieLine(list,7),
                fullDate:fullDate,
                thisDay:day
            })
        },
        bindMultiPickerChange(e){
            this.setData({
                multiIndex:e.detail.value
            })
            this.disposeDate(this.data.multiArray[0][this.data.multiIndex[0]]+this.data.multiArray[1][this.data.multiIndex[1]]).then(()=>{
                this.createCaleData(new Date(this.data.multiArray[0][this.data.multiIndex[0]],this.data.multiArray[1][this.data.multiIndex[1]]-1,01))
            })
        },
        getThisMonth(year,month){
            let arr = []
            this.data.multiArray[0].map((item,index)=>{
                if(item == year){
                    arr[0] = index
                }
            })
            this.data.multiArray[1].map((item,index)=>{
                if(item == month){
                    arr[1] = index
                }
            })
            this.setData({
                multiIndex:arr
            })
        },
        createOptions(){
            return new Promise(resolve=>{
                let thisYear = new Date().getFullYear()
                let arr = [[thisYear-1,thisYear,thisYear+1],['01', '02', '03', '04', '05','06', '09', '08', '09', '10','11', '12']]
                this.setData({
                    multiArray:arr
                },()=>{
                    resolve()
                })
            })
        },
        disposeDate(thisMonth){
            return new Promise(resolve=>{
                let arr = []
                this.data.scheduleList.map(item=>{
                    let str = String(item.date)
                    let year = str.slice(0,6)
                    if(year == thisMonth){
                        arr.push(str.substring(str.length-2))
                    }
                })
                this.setData({
                    monthCale:arr
                },()=>{
                    resolve()
                })
            })
        },
        disposeList(list){
            list.map(item=>{
                let str = item.name<=9?'0'+item.name:String(item.name)
                this.data.monthCale.map(it=>{
                    if(it== str){
                        item.schedule = true
                    }
                })
            })
        }
    }
})

使用

list:[{date:20220222},{date:20220223}]


<cu-calendar scheduleList='{{list}}'></cu-calendar>
Your-Nikee
关注
专栏目录
微信小程序日历组件（可多选单选）
01-13
可复选单选时间，可在日历上标记红蓝点，开箱即用
微信小程序自定义组件--日历组件
06-05
这是自己编写的一个轻量级的微信小程序组件，将该组件解压到你的组件文件夹下，即可使用。该组件可以标记日期，自行更改标记图标即可，可折叠展开，可左右滑动切换月份
wx-calendar 微信小程序日历组件使用教程
最新发布
gitblog_00927的博客
09-13 903
wx-calendar 微信小程序日历组件使用教程 项目地址:https://gitcode.com/gh_mirrors/wxcale/wx-calendar 1. 项目目录结构及介绍 wx-calendar/ ├── components/ │ └── wx-calendar/ │ ├── index.js │ ├── index.json │ ├── ...
微信小程序日历组件（可滑动，可展开收缩，可标点）
aaa123aaasqw的博客
12-08 2365
6.在需要的页面中引入：index.wxss。7.在需要的页面中引入：index.json。8.在需要的页面中引入：index.js。
微信小程序简单日历组件
weixin_43790802的博客
11-03 1144
微信小程序简单的日历组件 代码： <!--日历组件--> <view class='cld'> <view class="cld-top"> <!-- 年月区域 --> <view class="mData"> <view class="detail"> <van-icon name="arrow-left" bindtap='previousMonth'/> {{yea
微信小程序日历组件-calendar
03-29
原生的日期选择器picker只支持公历，于是采用picker-view自定义了一个组件，可以支持农历。         (此图片来源于网络，如有侵权，请联系删除! ) 模版使用：   src="../cal/calendar.wxml">   is="calendar...
微信小程序日历组件calendar详解及实例
08-30
微信小程序日历组件calendar详解及实例 微信小程序日历组件calendar是一种常用的日期选择控件，提供了多种日期选择方式，满足不同场景的需求。在本文中，我们将详细介绍微信小程序日历组件calendar的使用方法和实例...
简陋至极：微信小程序日历组件（思路）
03-29
最近在做微信小程序项目，其中涉及到日历。一直以来，遇到日历，就是网上随便找个插件，这次心血来潮，想着自己去实现一下。这次不是封装功能强大，健硕完美的组件，只是记录一下，主体思路。更多功能还得根据项目...
微信小程序日历组件源码+使用说明.zip
06-28
微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+使用说明.zip微信小程序日历组件源码+...
微信小程序——日历组件:calendar:。
01-20
Demo 以下为一个简单日历展示的使用方法 { "usingComponents": { "calendar": "/your_component_path/calendar/index" } } 在页面 wxml 中引入组件 更多自定义配置及功能 效果图
微信小程序日历插件
07-19
微信小程序的日历实现，方便和我一样的小白使用，可以自己调节样式
小程序 日历组件 ______
01-02
小程序日历组件，包含当月日历展示，上一月、下一月日期查看，回到今天等功能，代码由微信开发和工具完成。该资源包含.wxml、.css、.js文件，使用时直接引入项目，根据所需修改css样式即可。如有发现代码运行出错，请在csdn博客 https://blog.csdn.net/sinat_33184880 下留言告诉我
小程序日历插件
weixin_30879833的博客
05-18 236
首先引入第三方极点日历插件 wxml <view class="container-fluid"> <text class="title">Demo1</text> <view class="calendar-box"> <view class="left"> &l...
微信小程序自定义日历组件
weixin_51610941的博客
07-19 1222
wxml{nowMonth--星期展示-->
uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
heavenz19的博客
09-18 5193
【代码】uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值