圆月山庄资源网 Design By www.vgjia.com
微信小程序可滑动月日历组件
此日历可进行左右滑动,展示签到打卡信息,和大家分享一下。
如果样式变形,请检查是否有共用样式起冲突
展示一下效果图
在components组件文件夹下新建calendarMonth文件夹
直接上代码吧:
index.wxml
<!--components/calendar/index.wxml--> <view class='month'> <!-- <view class='arrow' bindtap='prevMonth'>《 </view> --> <view> <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange"> <view > {{date}} </view> </picker> </view> <!-- <view class='arrow' bindtap='nextMonth'> 》</view> --> </view> <view class='container'> <view class='calendar flex column s-center'> <view class='week-row flex m-around wid100'> <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view> </view> <swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'> <swiper-item class='flex m-around days-table '> <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date' class='grid fw {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01""choice2":""}}'>{{x.date === today"{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item class='flex m-around days-table '> <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date' class='grid fw {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'> <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01""choice2":""}}'>{{x.date === today"{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item class='flex m-around days-table'> <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date' class='grid fw {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01""choice2":""}}{{x.month === month"":"notCurrent"}}'>{{x.date === today"{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item class='flex m-around days-table '> <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date' class='grid fw {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01""choice2":""}}'>{{x.date === today"{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> </swiper> </view> </view>
index.wxss
/* pages/calendar/calendar.wxss */ .container{ width: 100%; height: auto; padding: 6rpx; font-size: 28rpx; } .month{ width: 100%; height: 100rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color:#333333; font-weight: 700; border-bottom: 1px solid #f5f5f5; } .days-table { flex-wrap: wrap; align-content: flex-start; } .wid100{ width: 100%; } .calendar{ z-index:10000; } .grid { /* width: 107.14rpx; */ height: 100rpx; text-align: center; line-height: 100rpx; font-size:.7rem; color:#333333; flex: 1; } .today { color: red; } .grid view { height:85rpx; line-height: 85rpx; width:85rpx; flex: 1 } .choice2 { /* border-radius: 50%; */ background: silver; background-position:center; color: white; } .choice .view{ flex: 1; border-radius: 50%; background: #88a1fd; background-position:center; color: white; display: flex; align-items: center; justify-content: center } .fw { font-weight: 700; font-size: 28rpx; position: relative; } .grid text.da{ display: flex; width: 32rpx; height: 32rpx; position: absolute; right:12rpx; top:1rpx; font-weight: 1000; background: red; border-radius: 50%; overflow: hidden; text-align: center; line-height: 24rpx; color: #ffffff; font-size: 8px; align-items: center; justify-content: center } .grid text.da2 { width: 100%; height: 100%; text-align: center; font-size: 12px; font-weight: 800; color: red; position: absolute; bottom:-25rpx; display: flex; left: -4rpx; align-items: center; justify-content: center; } /* 非本月日期 */ .notCurrent { color: silver; font-weight: normal } .day-hover { background: red; } .container .corred { color: red; } .swpier-box { height: 600rpx; width: 100%; } .arrow { width: 100rpx; color: #88a1fd; text-align: center; } .flex { display: flex; } /* 轴向 */ .column { flex-direction: column; } /* 主轴方向 */ .m-start { justify-content: flex-start; } .m-end { justify-content: flex-end; } .m-around { justify-content: space-around; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .m-between { justify-content: space-between; } .m-center { justify-content: center; } /* 侧轴方向 */ .s-start { align-items: flex-start; } .s-end { align-items: flex-end; } .s-around { align-items: space-around; } .s-between { align-items: space-between; } .s-center { align-items: center; }
index.js
// components/calendar/index.js let choose_year = null, choose_month = null; Component({ /** * 组件的属性列表 */ properties: { workerClockData: { type: Array, observer: function (newVal, oldVal, changedPath) { // console.log(newVal, oldVal, changedPath,this) } } }, /** * 组件的初始数据 */ data: { day: '', year: '', month: '', date: '2017-01', today: '', week: ['日', '一', '二', '三', '四', '五', '六'], calendar: { first: [], second: [], third: [], fourth: [] }, swiperMap: ['first', 'second', 'third', 'fourth'], swiperIndex: 1, showCaldenlar: false }, ready: function () { this.getinit() }, /** * 组件的方法列表 */ methods: { getinit() { //初始化 const date = new Date() , month = this.formatMonth(date.getMonth() + 1) , year = date.getFullYear() , day = this.formatDay(date.getDate()) , today = `${year}-${month}-${day}` let calendar = this.generateThreeMonths(year, month) // console.log(calendar) this.setData({ calendar, month, year, day, today, beSelectDate: today, date: `${year}-${month}` }) }, showCaldenlar() { this.setData({ showCaldenlar: !this.data.showCaldenlar }) }, /** * * 左右滑动 * @param {any} e */ swiperChange(e) { const lastIndex = this.data.swiperIndex , currentIndex = e.detail.current let flag = false , { year, month, day, today, date, calendar, swiperMap } = this.data , change = swiperMap[(lastIndex + 2) % 4] , time = this.countMonth(year, month) , key = 'lastMonth' console.log(lastIndex, currentIndex) if (lastIndex > currentIndex) { lastIndex === 3 && currentIndex === 0 "jin") // console.log(year, month, days) return days }, /** * * 生成日详情 * @param {any} year * @param {any} month * @param {any} daysNum * @param {boolean} [option={ * startNum:1, * grey: false * }] * @returns Array 日期对象数组 */ generateDays(year, month, daysNum, option = { startNum: 1, notCurrent: false }) { const weekMap = ['一', '二', '三', '四', '五', '六', '日'] let days = [] for (let i = option.startNum; i <= daysNum; i++) { let week = weekMap[new Date(year, month - 1, i).getUTCDay()] let day = this.formatDay(i) days.push({ date: `${year}-${month}-${day}`, event: false, day, week, month, year }) } return days }, /** * * 获取指定月第n天是周几 | * 9月第1天: 2017, 08, 1 | * 9月第31天:2017, 09, 0 * @param {any} year * @param {any} month * @param {number} [day=0] 0为最后一天,1为第一天 * @returns number 周 1-7, */ getWeekOfDate(year, month, day = 0) { let dateOfMonth = new Date(year, month, 0).getUTCDay() + 1; dateOfMonth == 7 "htmlcode">//json文件调用 "usingComponents": { "calendarMonth": "../../components/calendarMonth/index" }页面调用组件
//workerClockData 传过去的数据 显示签到金额 和 记 <calendarMonth workerClockData="{{workerClockData}}"></calendarMonth>要显示打卡数据要传入参数,格式为如下,格式为数组
更多精彩的日历效果请学习参考专题:javascript日历插件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]