微信小程序可滑动月日历组件
此日历可进行左右滑动，展示签到打卡信息，和大家分享一下。
如果样式变形，请检查是否有共用样式起冲突
展示一下效果图
在components组件文件夹下新建calendarMonth文件夹
直接上代码吧：
index.wxml
<!--components/calendar/index.wxml--> <view> <!-- <view 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 bindtap='nextMonth'> 》</view> --> </view> <view> <view> <view> <view wx:for="{{week}}" wx:key='item'>{{item}}</view> </view> <swiper circular="true" current="{{swiperIndex}}" bindchange='swiperChange'> <swiper-item> <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today?'今天':x.day}}</view> <block wx:if="{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <textwx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item> <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'> <view>{{x.date === today?'今天':x.day}}</view> <block wx:if="{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <textwx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item> <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today?'今天':x.day}}</view> <block wx:if="{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <textwx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text> </view> </block> </view> </swiper-item> <swiper-item> <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today?'今天':x.day}}</view> <block wx:if="{{workerClockData.length>0}}"> <view wx:for="{{workerClockData}}" wx:key="{{index}}"> <text wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text> <textwx: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