代码编织梦想

业务需求:签到页面用日历展示签到情况,只显示当月的。

过期未签的显示灰色字,已签的显示橙色字,当天显示白色字加一个背景图。

 1、新建日历组件(取名:calendar)

 

 2、calendar.wxml代码

<!--components/calendar/calendar.wxml-->
<view class="calendar-box">
  <view class="calendar-day">
    <view class="day-item" wx:for="{{day}}" wx:key="index">
      {{item}}
    </view>
  </view>
  <view class="calendar-date-box">
    <view class="date-item" wx:for="{{calendarList}}" wx:key="num">
      <image wx:if="{{item.type=='day'}}" class="curbg" src="/static/img/qiandaobg.png" mode="aspectFill"/>
      <view class="date-text {{item.type=='day'?'fontcur':''}} {{item.type=='before'?item.sign=='1'?'fontbf':'fontbfnos':''}} {{item.type=='after'?'fontaf':''}}">
        {{item.num=='0'?'':item.num}}
      </view>
    </view>
  </view>
</view>

3、calendar.wxss

/* components/calendar/calendar.wxss */
/* 日历 */
.calendar-box{
  /* width: 100%; */
  box-sizing: border-box;
  padding:20rpx 30rpx 30rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: #f5f5f5 0 0 12rpx;
  font-size: 28rpx;
  font-weight: 500;
}
.calendar-day{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
}
.day-item{
  width: 14.2%;
  color: #C5C5C5;
}
.calendar-date-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: center;
}
.date-item{
  width: 14.2%;
  height: 80rpx;
  position: relative;
}
.date-text{
  z-index: 9;
  line-height: 48rpx;
}
.fontbf{
  color: #FF5800;
}
/* 过期未签到的 */
.fontbfnos{
  color: #d6d6d6;
}
.fontcur{
  color: #ffffff;
}
.fontaf{
  color: #6E6E6E;
}
.curbg,.date-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 48rpx;
  height: 48rpx;
}

4、calendar.js(组件只需要传入当前月签到的日期列表  2023-3-1格式,格式可以自己改,但是这里要统一格式,要不然相同日期匹配不了:

 

)

// components/calendar/calendar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list:{
      type:Array,
      default:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    curDate:'',//当天日期
    calendarList:[],//日历列表
    day:['S','M','T','W','T','F','S']
  },
  attached(){
    this.getCalendar(); //初始化日历
  },
  /**
   * 组件的方法列表
   */
  methods: {
    getCalendar(){
      // 获取当前月签到日期列表
      let signlist=this.data.list
      let curTime=new Date()
      let curYear=curTime.getFullYear()//当前年份
      let curMonth=curTime.getMonth()+1//当前月份
      let curDate=curTime.getDate()//当前日期
      
      // 获取当月第一天日期  当获取第一天的时候,月份是0~11,0代表获取1月1日
      let curFirstDate=new Date(curYear,curMonth-1,1)
      // 第一天周几
      let firstDay=curFirstDate.getDay()
      // 第一天日期
      let firstDate=curFirstDate.getFullYear()+'-'+(curFirstDate.getMonth()+1)+'-'+curFirstDate.getDate()
      // 获得当月最后一天是几号==本月有多少天  当获取最后一天的时候,月份需要加1
      let lastdate=new Date(curYear,curMonth,0).getDate()
      let bigarr=[]
      // 1号前面空格补上
      for(let d=0;d<firstDay;d++){
        bigarr[d]={num:0}
      }
      // 循环得到本月日历列表详情
      for(let i=1;i<=lastdate;i++){
        let dateitem=curYear+'-'+curMonth+'-'+i
        let type=''//before当前日期之前 day当天 after之后
        let sign='0'//表示没签到
        if(i<curDate){
          type='before'
        }else if(i==curDate){
          type='day'
        }else if(i>curDate){
          type='after'
        }
        // 看看当前日期是否在签到日期列表里面
        let samearr=signlist.filter(v=>v==dateitem)
        if(samearr.length==1){
          sign='1'
        }
        let obj={
          date:dateitem,
          num:i,
          type:type,
          sign:sign
        }
        bigarr.push(obj)
      }
      this.setData({
        curDate:curDate,
        calendarList:bigarr
      })
    },
  }
})

5、签到页面  index.json  

 "usingComponents": {
    "calendar":"/components/calendar/calendar"
  },

6、签到页面应用(list是当前月签到日期列表)

//list:['2023-3-1','2023-3-3'] //已签的日期
<calendar list="{{list}}"></calendar>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rookie_toy/article/details/129356665

python 微信小程序签到系统_微信小程序实现签到的日历功能-爱代码爱编程

前言 因为要做签到,所以要写了个日历。 只有基础的日历,签到需要自行实现。 (我等下也要实现签到了…) 效果图 wxml {{ item }} wx:for="{{ dateData }}"> {{ item.day }} wxss.calendar{ margin-top: 10%;}.month{ displ

日历签到 java_微信小程序签到 日历 每日签到积分加1-爱代码爱编程

signIn.json { "navigationBarTitleText": "签到", "usingComponents": { } } signIn.wxss /* 签到顶部背景信息 */ .signBkImg{ width: 100%; height: 241rpx; position: relative; } .si

微信小程序日历签到组件(原创)-爱代码爱编程

微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用 其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容问题,输出和输入为yyyy-MM-dd格式,简单易用,有问题可以评论区评论或联系我提出改进 dk-calendar小程序日期打卡组件 该组件是以微

微信小程序实现日历功能(附加签到、迟到、未签的状态显示)-爱代码爱编程

最近接的毕设,做一个考勤系统,练练手;对于日历功能的实现,参考了一位大佬的文章:微信小程序之打卡日历 大佬使用的对象属性方法,而我直接把它分成了两组数据; 这是针对我自己的数据所作出的一些改变: 效果图: 源码wxml <!--pages/Calendar/Calendar.wxml--> <!-- 打卡日历页面 --> &l

微信小程序日历签到,拿走即用~-爱代码爱编程

参考了小友那个谁的,具体也忘记了,改be改be即用了,因为是日历,里面有一个算空格的地方,嘻嘻~,也是小友提供的,再次感谢! html: <view> <view class="flex flex-wrap padding bg-white justify-center"> <view

微信小程序签到日历_歪歪的橘猫的博客-爱代码爱编程

微信小程序签到日历: 项目开发需要做一个签到日历,看了几个已封装的组件都不满足需求,于是动手封装了一个 组件界面: 可以扫码查看是否符合自己的需求,案列中的签到日期是随机生成的,所以切换月后签到日期会不一致 wxml: <!--components/calendar/index.wxml--> <view> <

关于小程序内存在违规内容的处理警告-爱代码爱编程

遇到了问题,就记录一下解决过程吧 小程序涉及提供在线观看视频服务,请补充文娱-视频广场类目; 我们的小程序做了一个类似抖音上下滑动观看视频的页面,被警告了,查看了文档, https://developers.weixin.

【微信小程序】富文本rich-text的图片预览效果的几种方法-爱代码爱编程

前言 使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 1.正则+wx.previewImage(有明显不足) 一个不需要用额外组件或插件的方法: 思路:使用正则把图片的url进行剖离

微信小程序开发快速上手【小程序js开发快速入门详解】_js小程序-爱代码爱编程

一,前言 补:发现一篇很久之前的存文。补发 为了最近的作业忙了许久,今天终于把最近的大作业都搞定了,抽空来学习一下,微信小程序的开发。 从今天开始,记录一下,微信小程序从0到1的开发过程。 二,准备 目标是微信小程序,

微信小程序 | 吐血整理的日历及日程时间管理_小程序 日历按日期排列-爱代码爱编程

📌个人主页:个人主页 ​🧀 推荐专栏:小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏!从个人到商业的全套开发教程,实打实的干货分享,确定不来看看? 😻😻】 📝作者简介:一个读过研、创过业