公司的业务，顺便记录一下吧，小程序如何自定义日程提醒

一头小绵羊

已于 2024-02-06 11:19:24 修改

阅读量561

点赞数 9

文章标签：小程序 apache

于 2024-02-06 11:17:18 首次发布

本文链接：https://blog.csdn.net/rojie0/article/details/136044417

版权

示例：

在这里插入图片描述

小程序日常示例

vant 版本 :"vant-weapp": "^0.5.29"

1、新建小程序文件 calendarProcessing,
在这里插入图片描述

calendarProcessing.json 文件

{
  "usingComponents": {
    "van-datetime-picker": "@vant/weapp/datetime-picker/index",
    "van-popup": "@vant/weapp/popup/index"
  },
  "navigationBarTitleText": "日程提醒",
  "navigationBarTextStyle": "black"
}

calendarProcessing.js 文件

// components/calendar/calendar.js
Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.initYearMonth()
      this.initSloatArr()
      this.getYMDays(this.data.year, this.data.month)
      this.getNowDay(this.data.year, this.data.month, 1)
      this.getDayTime()
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    week: ['日', '一', '二', '三', '四', '五', '六', ],
    nowDay: new Date().getDate(),   // 当前日
    nowYear: new Date().getFullYear(), // 当前年份
    nowMonth: new Date().getMonth() + 1,   //当前月份
    year: '', //年份
    month: '', //月份
    allDays: [], //当前总共多少天,
    firstDay: '', //当月第一天是星期几
    slotArr: [], //占位数组(元素35个),
    // 需要加日程提醒的日期
    colorList: ['2024-02-20', '2024-02-07', '2024-02-08', '2024-03-08', '2024-04-01', '2024-05-03'], 
    currentDate: new Date().getTime(),
    minDate: new Date().getTime(),
    // 时间选择器弹窗
    dateShow: false,
    //当前年月日，选择日期不是当天，保留当天的样式，加边框，改字体颜色
    nowYearMonthDay: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 初始化占位数组
    initSloatArr() {
      let copyArr = []
      for (let i = 0; i < 35; i++) {
        copyArr.push({
          year: '',
          month: '',
          day: '',
          yearMonthDay: ''
        })
      }
      this.setData({
        slotArr: copyArr
      })
    },
    showPopup() {
      this.setData({
        dateShow: true
      })
    },
    onClose() {
      this.setData({
        dateShow: false
      })
    },
    //点击日期
    tapItem(item) {
      this.setData({
        nowDay: item.currentTarget.dataset.day.text
      })
    },
    onInput(event) {
      const date = new Date(event.detail)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const time = `${year}-${month}`
      this.setData({
        month,
        year,
        dateShow: false,
      })
      this.initSloatArr()
      this.getYMDays(this.data.year, this.data.month)
      this.getNowDay(this.data.year, this.data.month, 1)
    },
    // 初始化年月
    initYearMonth() {
      this.setData({
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1
      })
    },
    // 获取当前 年月日
    getDayTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month = this.fillZero(date.getMonth() + 1)
      const day = this.fillZero(date.getDate())
      this.setData({
        nowYearMonthDay:`${year}-${month}-${day}`
      })
    },

    //根据年月获取总共多少天
    getYMDays(year, month) {
      var newDate = new Date(year, month, 0);
      let allFlag = newDate.getDate()
      let allData = []
      for (let i = 1; i <= allFlag; i++) {
        const dateInfo = {
          year,
          month: this.fillZero(month),
          day: this.fillZero(i),
          text: i,
          yearMonthDay: `${year}-${ this.fillZero(month)}-${this.fillZero(i)}`
        }
        allData.push(dateInfo)
      }
      this.setData({
        allDays: allData
      })
    },
    fillZero(num) {
      if (num.length > 1 && num[0] === '0') {
        return num
      }
      return num < 10 ? '0' + num : num
    },
    //根据年月日判断是星期几&修改占位数组内容显示日历
    getNowDay(y, m, d) {
      let newDate = `${y}-${m}-${d}`
      this.setData({
        firstDay: new Date(newDate).getDay()
      })
      //改占位数组--->当前月第一天为周几
      this.setData({
        [`slotArr[${this.data.firstDay}].text`]: 1
      })
      //递增占位数组

      this.data.slotArr.map((item, index) => {
        if (this.data.slotArr[index].text) {
          this.setData({
            [`slotArr[${index+1}].text`]: this.data.slotArr[index].text + 1,
          })
        }
      })


      //删除占位数组中多出的日子
      let zArr = JSON.parse(JSON.stringify(this.data.slotArr))
      for (let i = 0; i < this.data.slotArr.length; i++) {
        if (this.data.slotArr[i].text > this.data.allDays.length) {
          zArr.splice(i, 6)
        }
      }
      this.setData({
        slotArr: zArr
      })


      const tempSlotArr = JSON.parse(JSON.stringify(this.data.slotArr))
      this.data.allDays.forEach(day => {
        tempSlotArr.forEach(slot => {
          if (day.text === slot.text) {
            slot.year = day.year
            slot.month = day.month
            slot.day = day.day
            slot.yearMonthDay = day.yearMonthDay
          }
        })
      });
      this.setData({
        slotArr: tempSlotArr
      })
      console.log('tempSlotArr', tempSlotArr)
      // return
      //设置要渲染的圆点
      //  colorList:[1,2,3],   //#44e036 ,展示圆点 

      for (let i = 0; i < this.data.colorList.length; i++) {
        const index = this.data.slotArr.findIndex(slot => slot.yearMonthDay === this.data.colorList[i])

        if (index > -1) {
          this.setData({
            [`slotArr[${index}].bgcolor`]: '#ff373d'
          })
        }
      }
      console.log(this.data.colorList)
      console.log(this.data.slotArr)
    }
  }
})

calendarProcessing.wxml 文件

<!--日历组件-->
<view class='cld'>
  <view class="cld-top">
    <!-- 年月区域 -->
    <view class="day-schedule">
      日程安排
      <image class="day-schedule-icon" src="/images/schedule-bgc.svg" mode="scaleToFill" />
    </view>

    <view class="detail">
      <view bindtap='showPopup'>{{year}}年{{month}}月</view>
      <van-icon name="arrow" class="arrow-down" bindtap='showPopup' />
    </view>
    <image class="add-icon" mode="scaleToFill" src="/images/add.svg" alt="" srcset="" />
  </view>
  <!-- 日期显示区域 -->
  <view class="date-content">
    <view class="dayData">
      <text class="week" wx:for="{{week}}" wx:key="index">{{item}}</text>
    </view>
    <view class="cld-bottom">
      <text wx:for='{{slotArr}}' class="day {{item.text === nowDay ? 'day-active' : item.yearMonthDay === nowYearMonthDay ? 'now-day':'' }}" data-day="{{item}}" bindtap="tapItem" wx:key='index'>{{item.text}}
        <text class='round' style='background: {{item.bgcolor}};'></text>
      </text>
    </view>
  </view>
  <!-- 星期显示区域 -->
  <van-popup show="{{ dateShow }}" position="bottom">
    <van-datetime-picker type="year-month" bind:cancel="onClose" value="{{ currentDate }}" min-date="{{ minDate }}" bind:confirm="onInput" />
  </van-popup>
</view>

calendarProcessing.wxss 文件

/* pages/calendarProcessing/calendarProcessing.wxss */
/* components/calendar/calendar.wxss */
view {
  box-sizing: border-box;
}

.cld {
  height: 100%;
  padding: 24rpx;
}

.date-content {
  background-color: #fff;
  padding: 36rpx;
  border-radius: 18rpx;
}

.week {
  width: 24rpx;
  height: 33rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #A8A8A8;
}

.cld-top {

  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 130rpx;
  font-size: 26rpx;
  padding: 0 10rpx 10rpx 10rpx;
}

.day-schedule {
  position: relative;
  white-space: nowrap;
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 550;
  color: #1B1B1B;
  line-height: 40rpx;
  padding-left: 20rpx;
}

.arrow-down{
  transform: rotate(90deg);
}

.add-icon {
  width: 60rpx;
  height: 60rpx;
}

.detail {
  display: flex;
  white-space: nowrap;
  font-size: 32rpx;
  font-weight: 550;
  color: #314160;

}

.day-schedule-icon {
  position: absolute;
  top: -20rpx;
  left: 0;
  width: 50rpx;
  height: 50rpx;
  z-index: -1;
}

.mData {
  text-align: center;
  height: 43rpx;
  color: black;
}

.dayData {
  padding-top: 16rpx;
  height: calc(100% - 43rpx);
}

.dayData text {
  display: inline-block;
  width: 13%;
  margin-left: 1.5%;
  text-align: center;
}

.dayData text:nth-child(1) {
  margin-left: 0;
}

.cld-bottom {
  height: calc(100% - 130rpx);
  padding: 10rpx;
  padding-top: 0;
  font-size: 29rpx;
}

.cld-bottom text {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 13%;
  margin-left: 1.5%;
  margin-top: 28rpx;
}

.day {
  width: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 30rpx;
  font-weight: 550;
  color: #313131;
  border-radius: 22rpx;
  box-sizing: border-box;
  border: double 1rpx transparent;
}
.day-active{
  background: #3A5DF0;
  color: #fff;
}
.now-day{
  border: double 1rpx #3A5DF0;
  color: #3A5DF0;
}
.cld-bottom .round {
  position: absolute;
  display: inline-block;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  bottom: -20rpx;
  left: 54%;
  margin-left: -7rpx;
}

.cld-bottom text:nth-child(7n-6) {
  margin-left: 0;
}