小程序日历

ゞ浴缸里的玫瑰 2023-06-06 12:14 7阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

时间捉急，先写一个简单的用着，过几天写个插件

## **wxml** ##

<view class="canlendarBgView">
      <view class="canlendarView">
        <view class="canlendarTopView">
          <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
            <view class="leftView"></view>
          </view>
          <view class="centerView">{
       {cur_year || "--"}} 年 {
       {cur_month || "--"}} 月</view>
          <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
            <view class="rightView"></view>
          </view>
        </view>
        <view class="weekBgView">
          <view class="weekView" wx:for="{
       {weeks_ch}}" wx:key="{
       {index}}" data-idx="{
       {index}}">{
       {item}}</view>
        </view>
        <view class="dateBgView">
          <view wx:if="{
       {hasEmptyGrid}}" class="dateEmptyView" wx:for="{
       {empytGrids}}" wx:key="{
       {index}}" data-idx="{
       {index}}">
          </view>
          <view class="dateView" wx:for="{
       {days}}" wx:key="{
       {index}}" data-idx="{
       {index}}" bindtap="dateSelectAction">
            <view class="datesView {
       {index == todayIndex ? 'dateSelectView' : index == nowTodayIndex?'orange':''}}">{
       {item.name}}</view>
            <view class='spot' wx:if='{
       {item.spot}}'></view>
          </view>
        </view>
      </view>
    </view>

## **wxss** ##

.canlendarBgView {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .canlendarView {
      color: #6666CC;
      display: flex;
      flex-direction: column;
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 6px rgba(0,0,0,0.16);
      opacity:1;
      border-radius:0px 0px 5px 5px;
      padding-bottom: 32rpx;
    }
    
    .canlendarTopView {
      height: 124rpx;
      font-size: 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #2F2F2F;
    }
    
    .leftBgView {
      text-align: right;
      height: 80rpx;
      display: flex;
      flex-direction: row-reverse;
    }
    .leftBgView,.rightBgView {
      width: 80rpx;
      height: 100%;
    }
    .leftView {
      width: 18rpx;
      height: 20rpx;
      border-top: 2rpx solid #666666;
      border-right: 2rpx solid #666666;
      transform: rotate(-135deg);
      margin-top: 54rpx;
    }
    
    .centerView {
      width: 50%;
      height: 80rpx;
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    
    .rightView {
      width: 18rpx;
      height: 20rpx;
      border-top: 2rpx solid #666666;
      border-right: 2rpx solid #666666;
      transform: rotate(45deg);
      margin-top: 54rpx;
    }
    
    .weekBgView {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-left: 8%;
      padding-right: 8%;
      background-color: rgba(255,172,48,0.16);
      color: #FFAC30;
      font-size: 28rpx;
      margin-bottom: 46rpx;
    }
    
    .weekView {
      flex-grow: 1;
      text-align: center;
      font-size: 28rpx;
    }
    
    .dateBgView {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-left: 7.7%;
      padding-right: 7.2%;
    }
    
    .dateEmptyView {
      width: 14.2%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dateView {
      width: 14.2%;
      color: #fff;
      align-items: center;
      justify-content: center;
      position: relative;
      text-align: center;
      margin-bottom: 20rpx;
    }
    
    .datesView {
      width: 60rpx;
      height: 60rpx;
      color: #444444;
      font-size: 28rpx;
      font-weight: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
    .spot {
      left: 46%;
      bottom: 5rpx;
      width: 6rpx;
      height: 6rpx;
      border-radius: 50%;
      margin: 0 auto;
      text-align: center;
      background-color: red;
      position: absolute;
    }
    .dateSelectView {
      border-radius: 50%;
      position: relative;
      left: 0;
      top: 0;
      color: #fff;
      background-color: #FFAC30;
    }
    .orange {
      color: #FFAC30;
    }
    .noClass {
      font-size: 30rpx;
      color: #666;
      text-align: center;
    }
    .noClass image{
      width: 200rpx;
      height: 164rpx;
      margin: 110rpx auto 48rpx auto;
    }
    .list {
      width: 90%;
      margin: 20rpx auto auto auto;
      background-color: #FFF;
      padding-left: 20rpx;
      padding-right: 20rpx;
      border-radius: 20rpx;
      color: #666;
    }
    .list>.top {
      border-bottom: solid 2rpx #F3F3F3;
      height: 62rpx;
      line-height: 62rpx;
      display: flex;
      justify-content: space-between;
    }
    .list>.top>.time {
      color: #6E6E6E;
    }
    .list>.top view text {
      color: #FFAC30;
    }
    .bottom>view {
      display: flex;
      justify-content: space-between;
      height: 66rpx;
      line-height: 66rpx;
    }
    .bottom>view>.className {
      color: #444444;
      font-size: 28rpx;
    }
    .bottom .childrenName {
      color: #999;
      font-size: 26rpx;
    }

## **js** ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20230601/4a1d16294cd2441f9b21aedf229904fa.png