【WeChat】定制日历组件

小程序开发还是蛮简单的，之前倒腾过两个小程序，也都上线了。

今天开始第三个，自己写了一个日历模块，主要涉及日历的展现布局，标记日期，点击事件，左右滑动切换月份等。

效果图：

calendar.wxml 代码：

<view class='main'>
  <view class='calendar-con'>
    <view class="calendar-top">
      <view class="current-date">{{nowDate}}</view>
      <picker mode="date" value="{{date}}" start="1995-01-01" end="2025-12-31" bindchange="bindDateChange">
        <view class="calendar-history">选择日期</view>
      </picker>
    </view>
    <view class="calendar-main">
      <swiper autoplay="{{autoplay}}" circular="true" bindanimationfinish="bindanimationfinish"  data-key="{{swipr-item}}">
        <block wx:for="[0]" wx:key="key">
          <swiper-item>
            <view class="calendar-list">
              <view wx:for="{{arr}}" wx:for-item="item" wx:key="key" class="calendar-item {{item.itmeClass}} {{maskId==item.day?'mask':''}}" bindtap="ClickDay" data-day="{{item.day}}" data-date="{{item.date}}">
                {{item.day}}
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
  <view class='calendar-bottom'>
    <view class='calendar-bottom-title'>
      <view class=''>雷阵雨 23 至 30°C</view>
      <view class=''>天气</view>
    </view>
    <view class='calendar-bottom-body'>
      <view class=''>这是一些内容，巴拉巴拉...</view>
      <view class=''>点击了：{{clickDay}}</view>
    </view>
  </view>
</view>

calendar.wxss 代码：

page {
  width: 100%;
  /* height: 100%; */
  background-color: #767ec9;
}

.main {
  margin-top: 30rpx;
}

.calendar-con {
  margin: 0 auto;
  width: 682rpx;
  height: 684rpx;
  background: url('http://120.77.181.53/img/calendar_con.jpg');
  background-size: cover;
  padding: 10rpx;
  border-radius: 20rpx;
}

.calendar-top {
  display: flex;
  justify-content: space-between;
  margin: 5rpx 18rpx;
}

.current-date {
  padding-top: 5rpx;
  padding-left: 65rpx;
  color: #b25d06;
  font-size: 18px;
}

.calendar-history {
  width: 135rpx;
  height: 45rpx;
  border-radius: 8rpx;
  background-color: #b25d06;
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 45rpx;
  margin-right: 18rpx;
}

.calendar-main {
  width: 100%;
}

.calendar-list {
  margin-top: 76rpx;
  margin-left: 32rpx;
  display: flex;
  flex-wrap: wrap;
}

.calendar-item {
  width: 85rpx;
  height: 85rpx;
  margin: 1rpx;
  background-color: #fffff2;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ad560e;
  font-size: 20px;
  font-weight: bold;
}

.styles-icon2 {
  background-image: url(http://120.77.181.53/img/icon-2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.styles-icon3 {
  background-image: url(http://120.77.181.53/img/icon-7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.styles-icon4 {
  background-image: url(http://120.77.181.53/img/icon-6.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.calendar-bottom {
  margin: 0 auto;
  margin-top: 35rpx;
  width: 682rpx;
  height: 380rpx;
  background: url('http://120.77.181.53/img/calendar_bottom.jpg');
  background-size: cover;
  padding: 10rpx;
  border-radius: 20rpx;
}

.calendar-bottom-title {
  display: flex;
  justify-content: space-between;
  width: 460rpx;
  height: 55rpx;
  line-height: 55rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  color: #ad560e;
  font-size: 18px;
}

.calendar-bottom-body {
  width: 460rpx;
  margin: 30rpx;
  color: #777;
}

.mask {
  background: rgba(66, 66, 66, 0.2);
}

swiper{
  height: 600rpx;
}

calendar.js 代码：

// pages/calendar/calendar.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [],
    nowDate: null,
    nowDay: 1,
    clickDay: null,
    maskId: null,
    autoplay: false,
    current: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var date = new Date();
    this.setData({
      arr: this.GetCalendarData(date),
      nowDate: this.GetNowTime(date),
      nowDay: date.getDate()
    })
  },

  //初始化日历数据
  GetCalendarData(now) {
    var data = [];
    var timestamp = Date.parse(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + '1');
    var date = new Date(timestamp);
    var item = {
      date: '',
      day: '',
      itmeClass: ''
    };
    for (var i = 1; i <= 42; i++) {
      if (i <= this.GetWeekDay(now)) {
        data.push(item);
      } else if (now.getMonth() == date.getMonth()) {
        data.push({
          date: this.GetNowTime(date),
          day: date.getDate(),
          itmeClass: ''
        });
        date.setDate(date.getDate() + 1);
      } else {
        data.push(item);
      }
    }
    //添加标记
    var index = now.getDate() + this.GetWeekDay(now) - 1;
    data[index] = {
      day: data[index].day,
      date: data[index].date,
      itmeClass: 'styles-icon2'
    };

    data[26] = {
      day: data[26].day,
      date: data[index].date,
      itmeClass: 'styles-icon3'
    };

    data[11] = {
      day: data[11].day,
      date: data[index].date,
      itmeClass: 'styles-icon4'
    };
    return data;
  },
  //或某个月得一号周几
  GetWeekDay: function(now) {
    var date = Date.parse(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + '1');
    var weekday = new Date(date);
    return weekday.getDay();
  },

  //获取当前日期
  GetNowTime: function(now) {
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    month < 10 ? month = '0' + month : month;
    day < 10 ? day = '0' + day : day;
    var formatDate = year + '/' + month + '/' + day;
    return formatDate;
  },
  //点击日期事件
  ClickDay: function(event) {
    var day = event.target.dataset.day;
    var date = event.target.dataset.date;
    if (day != '') {
      this.setData({
        clickDay: date,
        maskId: day,
        nowDate: date
      })
    }
  },
  //选择日期
  bindDateChange: function(e) {
    var date = new Date(e.detail.value);
    this.setData({
      arr: this.GetCalendarData(date),
      clickDay: null,
      maskId: null,
      nowDate: this.GetNowTime(date),
    })
  },

  bindanimationfinish: function(e) {
    var that = this;
    var date = new Date(that.data.nowDate);
    var index = that.data.current - e.detail.current;
    index = index == 2 ? -1 : index;
    index = index == -2 ? 1 : index;
    if (index != 0) {
      date.setMonth(date.getMonth() - index);
      that.setData({
        current: e.detail.current,
        arr: that.GetCalendarData(date),
        clickDay: null,
        maskId: null,
        nowDate: that.GetNowTime(date),
      })
    }
  },
})

不会写前端代码的，不是一个好的后端开发人员！