微信小程序日历组件（swiper可滑动的日历）

可滑动的日历组件

根据现实需求自行调整其他

rili.wxml页面

<!--pages/rili/rili.wxml-->
<view class="rili">

</view>
<view class='month'>
    <!-- <view class='arrow' bindtap='prevMonth'>《 </view> -->
    <view class="shijian">
        <!-- <picker mode="date" value="{
   {date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange"> -->
        <view class="flex">
           <view style="color: #1677FF;margin-right: 20rpx;font-weight: bold;">く</view>{
  {date}}
        </view>
        <!-- </picker> -->
        <view class="jintian" bindtap="jintian">回今天</view>
    </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 weeks' wx:for="{
    {week}}" wx:key='key'>{
  {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='key'
          class='grid fw {
    {x.month === month?"":"notCurrent"}} {
    {x.date === today?"today":""}} {
    {x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{
    {x.month}}' data-day='{
    {x.day}}' data-date='{
    {x.date}}' bindtap='bindDayTap'>
          <view  class='views {
    {x.date === today ? "view" :""}} {
    { bindDayTap === x.date ? "view" :""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}}'>
              <!-- <view class="weizhi">{
   {x.date === today?'今天':x.day}}</view> -->
              <view class="weizhi">{
  {x.day}}</view>
              <view class="tods" wx:if="{
    {x.date === today}}">今天</view>
          </view>
              <!-- <block wx:if="{
   {workerClockData.length>0}}">
              <view wx:for="{
   {workerClockData}}" wx:key="key">
                <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='key'
          class='grid fw {
    {x.month === month?"":"notCurrent"}} {
    {x.date === today?"today":""}} {
    {x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{
    {x.month}}' data-day='{
    {x.day}}' data-date='{
    {x.date}}' data-test='{
    {(year + "-" +month + "-" + day)}}'  bindtap='bindDayTap'>
          <view class='views {
    {x.date === today || x.date === date+"-05" ? "view" :""}} {
    { bindDayTap === x.date ? "view" :""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} '>
              <!-- <view class="weizhi">{
   {x.date === today?'今天':x.day}}</view> -->
              <view class="weizhi">{
  {x.day}}</view>
              <view class="tods" wx:if="{
    {x.date === today}}">今天</view>
          <!-- {
   {x.date === today?'今天':x.day}} -->
          </view>
          <!-- <block wx:if="{
   {workerClockData.length>0}}">
          <view wx:for="{
   {workerClockData}}" wx:key="key">
            <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='key'
          class='grid fw  {
    {x.date === today?"today":""}} {
    {x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "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?'今天':x.day}}</view> -->
          <!-- <view style="color: #1677FF;">{
   {date+"-01"}}</view> -->
          <!-- <view>1{
   {bindDayTap}}</view> -->
          <view class='views {
    {x.date === date+"-01" ? "view" :""}} {
    { bindDayTap === x.date ? "view" :""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {
    {x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} {
    {x.month === month?"":"notCurrent"}}'>
              <view class="weizhi">{
  {x.day}}</view>
              <view class="tods" wx:if="{
    {x.date === today}}">今天</view>
          </view>
          
          <!-- <block wx:if="{
   {workerClockData.length>0}}">
          <view wx:for="{
   {workerClockData}}" wx:key="key">
            <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='key'
          class='grid fw {
    {x.month === month?"":"notCurrent"}} {
    {x.date === today?"today":""}} {
    {x.date === beSelectDate ? "choice":