wepy-com-calendar.wpy

<script>
/**
 * Copyright (c) 2015-present, ronffy, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import wepy from 'wepy';
const dateUtils = {
  /**
   * 日、月去掉前缀0
   * @param {string|number} d
   * @returns {number}
   */
  rmDatePrefix: d => {
    if (typeof d === 'string') {
      if (d.indexOf('0') === 0) {
        return parseInt(d);
      } else {
        return d - 0;
      }
    }
    return d;
  },
  /**
   * 当前日期面板中包含几天是上个月的; 例如结果是3，则当前日期面板中，有3天是上个月的
   * @param {string|number} year YYYY
   * @param {string|number} month M|MM
   * @returns {number}
   */
  getPreMonthBlendDay: (year, month) => {
    return new Date(year, month - 1, 1).getDay();
  },
  /**
   * 获取某年某月总天数
   * @param {string|number} year YYYY
   * @param {string|number} month MM|M
   * @returns {number}
   */
  getMonthDays: (year, month) => {
    return new Date(year, month, 0).getDate();
  },
  /**
   * 获取完整的年月日 YYYY-MM-DD
   * @param {string} year YYYY
   * @param {string|number} month MM|M
   * @param {string|number} day DD|D
   * @returns {string} YYYY-MM-DD
   */
  getFullDate: (year, month, day) => {
    const addDatePrefix = dateUtils.addDatePrefix;
    month = addDatePrefix(month);
    day = addDatePrefix(day);
    return `${year}-${month}-${day}`;
  },
  /**
   * 格式化日期
   * @param {string|number|date} d
   * @returns {string} YYYY-MM-YY
   */
  formatDate: d => {
    const addDatePrefix = dateUtils.addDatePrefix;
    let date = new Date(d);
    let year = date.getFullYear();
    let month = addDatePrefix(date.getMonth() + 1);
    let day = addDatePrefix(date.getDate());
    return `${year}-${month}-${day}`;
  },
  /**
   * 给日、月添加前缀0
   * @param {string|number} d
   * @returns {string}
   */
  addDatePrefix: d => {
    if (
      (typeof d === 'number' && d < 10) ||
      (typeof d === 'string' && d.indexOf('0') === -1 && parseInt(d) < 10)
    ) {
      return `0${d}`;
    }
    return `${d}`;
  },
  multiWeeks: [
    {
      langu: 'zh_CN',
      weeks: ['日', '一', '二', '三', '四', '五', '六']
    },
    {
      langu: 'en_GB',
      weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sta']
    }
  ],
  getWeeks: (language = 'zh_CN') => {
    for (const { langu, weeks } of dateUtils.multiWeeks) {
      if (langu === language.trim()) {
        return weeks;
      }
    }
  }
};

export default class WepyCalendar extends wepy.component {
  props = {
    activeDate: {
      type: String,
      default: dateUtils.formatDate(new Date())
    },
    checks: {
      type: Array,
      default: []
    },
    theme: {
      type: String,
      default: 'orange' // 目前支持的主题有 default, green, pink, orange, black, blue，如需自定义，请通过themeStyle属性控制
    },
    // 比theme优先级高，用于自定义主题样式
    themeClassName: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'zh_CN' // 可选zh_CN, en_GB
    },
    // check状态时icon
    icon: {
      type: String,
      default: ''
    },
    activeStyle: {
      type: String,
      default: ''
    }
  };
  data = {
    weeks: dateUtils.getWeeks(),
    width: 375, // 单位px
    currYear: '',
    currMonth: '',
    // 此数组长度为35或42
    panelDaysList: [],
    icons: {
      default: 'http://i2.bvimg.com/679506/f84500a422e33aaf.png',
      black: 'http://i2.bvimg.com/679506/f84500a422e33aaf.png',
      blue: 'http://i2.bvimg.com/679506/ea61d6ce6a3b883e.png',
      green: 'http://i2.bvimg.com/679506/f758a4b4473ba8d8.png',
      orange: 'http://i2.bvimg.com/679506/95d664045b4dcb1e.png',
      pink: 'http://i2.bvimg.com/679506/ceb7a353787929b9.png'
    }
  };

  watch = {
    checks(newValue, oldValue) {
      this.resetPanelDays(this.currYear, this.currMonth, true);
      this.$apply();
    }
  }

  onLoad() {
    this.setWidth();
    this.setLanguage();
    const [year, month] = this.activeDate.split('-');
    this.resetPanelDays(year, month);
    this.$apply();
  }

  setWidth() {
    wepy
      .createSelectorQuery()
      .select('.wepy-com-calendar-root')
      .boundingClientRect(rect => {
        this.width = rect.width;
        this.$apply();
      })
      .exec();
  }

  setLanguage() {
    if (this.language !== 'zh_CN') {
      this.weeks = dateUtils.getWeeks(this.language);
    }
  }

  methods = {
    tapDayItem(e) {
      const { index, info } = e.currentTarget.dataset;
      this.setCurrPanelActiveDay(info.fullDate);
      this.$emit('calendarAfterTapDay', info.fullDate);
    },
    /**
     * 修改日历月份
     * @param {number} modify 用于对month进行微调
     */
    changeCurrMonth(month, modify = 0) {
      let monthNum = dateUtils.rmDatePrefix(month);
      let resaultMonth = monthNum;
      if (modify !== 0) {
        resaultMonth = monthNum + parseInt(modify);
      }
      let resaultYear = this.currYear;

      // 处理月份超过12或小于1时的情况
      if (resaultMonth < 1) {
        resaultYear = `${parseInt(resaultYear) - 1}`;
        resaultMonth = 12;
      } else if (resaultMonth > 12) {
        resaultYear = `${parseInt(resaultYear) + 1}`;
        resaultMonth = 1;
      }
      this.resetPanelDays(
        resaultYear,
        `${dateUtils.addDatePrefix(resaultMonth)}`
      );
      if (modify > 0) {
        this.$emit('calendarAfterTapNextMonth');
      } else {
        this.$emit('calendarAfterTapPreMonth');
      }
    },
    /**
     * 改变日期选择器value后的回调，event.detail = {value: value}
     * @param {number} modify 用于对month进行微调
     */
    changePicker(e) {
      const value = e.detail.value;
      if (!value) {
        return;
      }
      const [year, month] = value.split('-');
      this.resetPanelDays(year, month);
      this.$emit('calendarAfterChangePicker');
    }
  };

  // 根据索引值，设置当前日期面板的active项
  setCurrPanelActiveDay(fullDate) {
    if (this.activeDate === fullDate) {
      return;
    }
    let doed = 0; // 性能优化处理
    let newpanelDaysList = [...this.panelDaysList];
    for (const [i, dayItem] of this.panelDaysList.entries()) {
      if (doed === 2) {
        break;
      }
      if (dayItem.active && dayItem.fullDate !== fullDate) {
        // 将非当前选中的其他active项的active置为false
        newpanelDaysList[i] = {
          ...newpanelDaysList[i],
          active: false
        };
        ++doed;
      } else if (dayItem.fullDate === fullDate) {
        // 将非当前选中项的active置为true
        newpanelDaysList[i] = {
          ...newpanelDaysList[i],
          active: true
        };
        ++doed;
      }
    }

    this.activeDate = fullDate;
    this.panelDaysList = newpanelDaysList;
  }

  getPreMonthBlendDays(year, monthNum) {
    // 上个月需要展示的数据
    const resaultList = [];
    const preMonthBlendDay = dateUtils.getPreMonthBlendDay(year, monthNum);
    let thisMonthNum = monthNum - 1;
    let thisYear = year;
    if (monthNum === 1) {
      thisYear = year - 1;
      thisMonthNum = 12;
    }
    let preMonthFullDays = dateUtils.getMonthDays(thisYear, thisMonthNum);
    for (let i = 0; i < preMonthBlendDay; i++) {
      const dayItem = this.setDayItem(
        thisYear,
        thisMonthNum,
        preMonthFullDays--,
        'pre'
      );
      resaultList.unshift(dayItem);
    }
    return resaultList;
  }

  getThisMonthBlendDays(year, monthNum) {
    // 本月需要展示的数据
    const resaultList = [];
    const thisMonthFullDays = dateUtils.getMonthDays(year, monthNum);
    for (let i = 1; i <= thisMonthFullDays; i++) {
      const dayItem = this.setDayItem(year, monthNum, i, 'curr');
      resaultList.push(dayItem);
    }
    return resaultList;
  }

  getNextMonthBlendDays(year, monthNum, monthBlendDays) {
    // 下个月需要展示的数据
    const resaultList = [];
    for (let i = 1; i <= monthBlendDays; i++) {
      const dayItem = this.setDayItem(year, monthNum + 1, i, 'next');
      resaultList.push(dayItem);
    }
    return resaultList;
  }

  /**
   * 根据传进来的activeDate，计算年、月、当前月面板内的所有日（包含上月和下月的连接日）
   * @param {string} year YYYY
   * @param {string} month MM
   * @param {boolean} force 是否强制刷新日历
   */
  resetPanelDays(year, month, force = false) {
    if (!force && this.currYear === year && this.currMonth === month) {
      return;
    }
    const monthNum = dateUtils.rmDatePrefix(month);
    let panelDaysList = [];

    // 将上个月需要展示的数据添加进panelDaysList数组
    const preMonthBlendDays = this.getPreMonthBlendDays(year, monthNum);
    panelDaysList.push(...preMonthBlendDays);

    // 将本月月需要展示的数据添加进panelDaysList数组
    const thisMonthDays = this.getThisMonthBlendDays(year, monthNum);
    panelDaysList.push(...thisMonthDays);

    // 将下个月需要展示的数据添加进panelDaysList数组
    // 如果当前月和上个月需展示天数超过35，则一共需要展示42天；
    // 未超过35天时，则一共展示35天
    const existDays = preMonthBlendDays.length + thisMonthDays.length;
    const nextMonthBlendDay = (existDays > 35 ? 42 : 35) - existDays;
    const nextMonthBlendDays = this.getNextMonthBlendDays(
      year,
      monthNum,
      nextMonthBlendDay
    );
    panelDaysList.push(...nextMonthBlendDays);

    this.currYear = year;
    this.currMonth = month;
    this.panelDaysList = panelDaysList;
    this.$emit('calendarAfterRender');
  }

  setDayItem(year, month, day, type = 'curr') {
    day = dateUtils.addDatePrefix(day);
    const fullDate = dateUtils.getFullDate(year, month, day);
    let dayItem = {
      type,
      day,
      fullDate
    };
    this.setActiveItemProp(dayItem);
    this.setCheckedItemProp(dayItem);
    return dayItem;
  }
  setActiveItemProp(dayItem) {
    if (dayItem.fullDate === this.activeDate) {
      dayItem.active = true;
    }
  }
  setCheckedItemProp(dayItem) {
    if (this.checks.indexOf(dayItem.fullDate) > -1) {
      dayItem.checked = true;
    }
  }
}
</script>
<template>
  <view class="wepy-com-calendar-root">
    <view class="wepy-com-calendar {{themeClassName || ('theme-' + theme)}}" style="width: {{width}}px;">
      <view class="header">
        <view class="pre" @tap="changeCurrMonth({{currMonth}}, {{-1}})">《</view>
        <picker class="picker" mode="date" fields="month" value="{{currYear}}-{{currMonth}}" @change="changePicker">
          {{currYear}}-{{currMonth}}
        </picker>
        <view class="next" @tap="changeCurrMonth({{currMonth}}, {{1}})">》</view>
      </view>
      <view class="fullcalendar">
        <view class="weeks">
          <repeat for="{{weeks}}" key="index" index="index" item="item">
            <text>{{item}}</text>
          </repeat>
        </view>
        <view class="body" style="height: {{width / 2}}px;">
          <repeat for="{{panelDaysList}}" key="index" index="index" item="item">
            <view class="body-item {{item.type}} {{item.active ? 'active' : ''}} {{item.checked ? 'select' : ''}}" data-info="{{item}}" data-index="{{index}}" @tap="tapDayItem">
              <view class="info">
                <text class="active-icon" @style="activeStyle">{{item.day}}</text>
                <image wx:if="{{item.checked}}" class="icon-checked" mode="widthFix" src="{{icon || icons[theme]}}" />
              </view>
            </view>
          </repeat>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="less" >
.wepy-com-calendar {
  font-size: 30rpx;
}
.wepy-com-calendar .header {
  display: flex;
  text-align: center;
}
.wepy-com-calendar .header .pre,
.wepy-com-calendar .header .next,
.wepy-com-calendar .header .picker {
  width: 33%;
}
.wepy-com-calendar .fullcalendar {
  margin-top: 20rpx;
}
.wepy-com-calendar .fullcalendar .weeks,
.wepy-com-calendar .fullcalendar .body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wepy-com-calendar .fullcalendar .weeks text,
.wepy-com-calendar .fullcalendar .body .body-item {
  width: 14.2%;
  text-align: center;
}
.wepy-com-calendar .fullcalendar .body {
  margin-top: 15rpx;
}
.wepy-com-calendar .fullcalendar .body .pre,
.wepy-com-calendar .fullcalendar .body .next {
  color: rgba(0, 0, 0, 0.25);
}
.wepy-com-calendar .fullcalendar .body .body-item .info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wepy-com-calendar .fullcalendar .body .body-item .info text {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.wepy-com-calendar .fullcalendar .body .body-item.active .info text {
  border-radius: 50%;
  color: #fff;
}
.wepy-com-calendar .fullcalendar .body .body-item.select .icon-checked {
  position: absolute;
  right: 14rpx;
  bottom: -2rpx;
  width: 50%;
}
.wepy-com-calendar.theme-blue .header {
  color: #000;
}
.wepy-com-calendar.theme-blue .fullcalendar .weeks text {
  color: #000;
}
.wepy-com-calendar.theme-blue .fullcalendar .body .curr {
  color: #666;
}
.wepy-com-calendar.theme-blue .fullcalendar .body .body-item.active .active-icon {
  background: #69c0ff;
}
.wepy-com-calendar.theme-default .header,
.wepy-com-calendar.theme-black .header {
  color: #000;
}
.wepy-com-calendar.theme-default .fullcalendar .weeks text,
.wepy-com-calendar.theme-black .fullcalendar .weeks text {
  color: #000;
}
.wepy-com-calendar.theme-default .fullcalendar .body .curr,
.wepy-com-calendar.theme-black .fullcalendar .body .curr {
  color: #333;
}
.wepy-com-calendar.theme-default .fullcalendar .body .body-item.active .active-icon,
.wepy-com-calendar.theme-black .fullcalendar .body .body-item.active .active-icon {
  background: #666;
}
.wepy-com-calendar.theme-green .header {
  color: #f759ab;
}
.wepy-com-calendar.theme-green .fullcalendar .weeks text {
  color: #f759ab;
}
.wepy-com-calendar.theme-green .fullcalendar .body .curr {
  color: #42b983;
}
.wepy-com-calendar.theme-green .fullcalendar .body .body-item.active .active-icon {
  background: #f759ab;
}
.wepy-com-calendar.theme-pink .header {
  color: #42b983;
}
.wepy-com-calendar.theme-pink .fullcalendar .weeks text {
  color: #42b983;
}
.wepy-com-calendar.theme-pink .fullcalendar .body .curr {
  color: #f759ab;
}
.wepy-com-calendar.theme-pink .fullcalendar .body .body-item.active .active-icon {
  background: #42b983;
}
.wepy-com-calendar.theme-orange .header {
  color: #ff9c6e;
}
.wepy-com-calendar.theme-orange .fullcalendar .weeks text {
  color: #ff9c6e;
}
.wepy-com-calendar.theme-orange .fullcalendar .body .curr {
  color: #36cfc9;
}
.wepy-com-calendar.theme-orange .fullcalendar .body .body-item.active .active-icon {
  background: #ffbb96;
}

</style>