自定义日历样式,每日签到_vant签到日历-程序员宅基地

技术标签: 自定义日历  vue  每日签到  

需求:两种日历签到样式,周日历,以及月日历签到。是用框架vue-cli

  1. 月日历代码
export default {
    
	  data () {
    
	    return {
      // 所需的属性
	      startTime: '2019-08-15',
	      year: 0,
	      month: 0,
	      weekMonth: 0,
	      day: 0,
	      newDate: new Date().format('yyyy-MM-dd'),
	      weekList: [],
	      monthList: [],
	      monthDays: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
	      weekDay: 1,
	      lastWeekDay: 1,
	      preMonthSize: 0,
	      typeWeek: 2, // 日历类型 1:月日历; 2:周日历
	      preMonth: 0,
	      preMonthList: [],
	      daysList: [], // 签到日期列表
	      isLeak: false, // 昨天是否漏签
	      isSign: false // 今天是否签到
	    }
	  },
	  mGetDate (year, month) {
    
        var d = new Date(year, month, 0)
        return d.getDate()
     },
    // 根据年月日获得为星期几
    getWeekDay (year, month, day) {
    
      return new Date(`${
      year}/${
      month}/${
      day}`).getDay() === 0 ? 7 : new Date(`${
      year}/${
      month}/${
      day}`).getDay()
    },
    initDate () {
    
      if ((this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0) {
    
        this.monthDays[1] = 29
      } else {
    
        this.monthDays[1] = 28
      }
      // 获得指定年月的1号是星期几
      const firstDay = this.getWeekDay(this.year, this.month, 1)
      // 在1号前面填充多少个上个月的日期
      this.weekDay = firstDay === 1 ? 0 : firstDay - 1
      this.preMonthSize = this.mGetDate(this.year, this.month, 0)
      this.preMonth = this.month
      if (this.month === 1) {
    
        this.preMonth = 12
      } else {
    
        this.preMonth -= 1
      }
      // console.log('现在的月份' + this.month)
      var temTime = new Date(this.year, this.month - 1, 1)
      // console.log('现在的时间' + temTime)
      var arr = []
      for (var i = 0; i < this.monthDays[this.month - 1]; i++) {
    
        var ymd = temTime.format('yyyy-MM-dd')
        arr.push({
    
          'date': ymd,
          'isPrize': false,
          'status': 0, // 1是未签到,2是已签到,3是漏签
          'showDate': temTime.getDate()
        })
        temTime.setDate(temTime.getDate() + 1)
      }
      this.monthList = arr
    },
    // 选择上一月,下一月
    changeDate (type) {
    
      var newTime = `${
      this.year}-${
      this.month > 9 ? this.month : '0' + this.month}`
      switch (type) {
    
        case 'preMonth':
          if (newTime > this.startTime) {
    
            if (this.month === 1) {
    
              this.month = 12
              this.year -= 1
            } else {
    
              this.month -= 1
            }
            this.initDate()
            this.getListSignDate()
          }
          break
        case 'nextMonth':
          if (newTime < new Date(this.newDate).format('yyyy-MM')) {
    
            if (this.month === 12) {
    
              this.month = 1
              this.year += 1
            } else {
    
              this.month += 1
            }
            this.initDate()
            this.getListSignDate()
          }
          break
        default:
          break
      }
    }
 }

在这里插入图片描述
2. 周日历代码

// 以下是周日历的方法
    getMonDate (test) {
     // 计算周一的时间戳
      if (test.getDay() === 1) {
    
        return test
      } else {
    
        if (test.getDay() === 0) {
    
          test.setDate(test.getDate() - 6)
        } else {
    
          test.setDate(test.getDate() - test.getDay() + 1)
        }
        return test
      }
    },
    getResult (date) {
    
      var time = new Date(date)
      var timeobj = this.getMonDate(time) // timeobj是当前星期一的日期对象
      // console.log(timeobj)
      var temTime = new Date(timeobj.getTime()) // 当前星期一对象转换成时间戳
      // console.log(temTime)
      var arr = []
      for (var i = 0; i < 7; i++) {
    
        var ymd = temTime.format('yyyy-MM-dd')
        var weekMonth = temTime.getMonth()+ 1
        arr.push({
    
          'date': ymd,
          'isPrize': false,
          'status': 0, // 1是未签到,2是已签到,3是漏签
          'showDate': temTime.getDate(),
          'weekMonth': weekMonth
        })
        temTime.setDate(temTime.getDate() + 1)
      }
      this.weekList = arr
    },

在这里插入图片描述
比较函数
另外添加一个比较函数,用于当前周日历or月日历的日期与后台返回的日期数组比较,得到最终未签到,已签到,漏签数组

ergodicFun (arr1, arr2) {
     // status 1==未签到,2==已签到,3==漏签
  // arr1(月日历数组,or周日历数组),arr2后台返回日期数组
  // 后台返回数组格式 [{date: "2019-08-01", isPrize: false}, {date: "2019-08-02", isPrize: false},…]}
  for (var i = 0; i < arr1.length; i++) {
    
    var o = arr1[i]
    var m = 0
    var date = new Date(this.newDate).format('yyyy-MM-dd')
    if (arr2 === [] || arr2 === '' || arr2 === null || arr2 === undefined || arr2.length === 0) {
     // 如果后台无返回数组,即无签到数据,当前日期之前的为漏签,当前日期之后的为未签到
      if (o['date'] < date) {
    
        o['status'] = 1
      } else {
    
        o['status'] = 3
      }
    } else {
     // 如果后台有返回数组,即有签到数据
      for (var j = 0; j < arr2.length; j++) {
    
        var e = arr2[j]
        if (o['date'] === e['date']) {
    
          o['status'] = 2
          if (e['isPrize']) {
    
            o['isPrize'] = true
          }
        } else {
    
          m += 1
        }
        if (m === arr2.length) {
    
          if (o['date'] < date) {
    
            o['status'] = 1
          } else {
    
            o['status'] = 3
          }
        }
      }
    }
  }
}

最后,template部分

<div class="signIn-content">
   <span class="change-btn" v-on:click="changeTypeWeek()">{
    {
     typeWeek === 1 ? '收起' : '展开' }} <i class="icon-arrow" :class="typeWeek === 1 ? 'top' : 'bottom'"></i></span>
   <span class="sign-btn" :class="isSign === true ? 'signed-in' : ''" v-on:click="sign()">{
    {
     isSign === true ? '已签到' : '立即签到' }}</span>
   <div class="canlendarPanel">
    <div class="canlendar-header" v-show="typeWeek === 1">
      <p class="pre">
        <span @click="changeDate('preMonth')">
          <i class="icon left-small-icon" :class="{'opacity':`${this.year}-${this.month > 9 ? this.month : '0' + this.month}` <= startTime}"></i>
        </span>
      </p>
      <p class="currenDate">{
    {
     `${
      year}${
      month}月` }}</p>
      <p class="next">
        <span @click="changeDate('nextMonth')">
          <i class="icon right-small-icon" :class="{'opacity':month >= (new Date().getMonth() + 1)}"></i>
        </span>
      </p>
    </div>
    <div class="canlendar-main">
      <ul class="main week" v-if="typeWeek === 2"> // 周日历部分
        <li v-for="item of weekList" :key="item.date">
          <span class="i-coin" v-show="item.date < newDate" :class="{'signed':item.status === 2,  'unsigned': item.status === 3 || item.status === 1 || item.status === 0, 'haveRedBag': item.isPrize === true}">
            <i v-on:click="windowOpen('repairWindowFlag')"
            class="repair-icon"
              :class="(((item.status === 1 && (new Date(new Date(newDate).getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd')) === item.date)) && isLeak) && isSign? 'repair-img' : ''"></i>
          </span>
          <span class="i-coin" v-show="item.date >= newDate" :class="{'signed':item.status === 2,  'unsigned': item.status === 3 || item.status === 1 || item.status === 0, 'haveRedBag': showRedBag(item.date, signRuleDays, isSign)}">
            <i v-on:click="windowOpen('repairWindowFlag')"
            class="repair-icon"
              :class="(((item.status === 1 && (new Date(new Date(newDate).getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd')) === item.date)) && isLeak) && isSign? 'repair-img' : ''"></i>
          </span>
          <span :class="{'signed-text':item.status === 2, 'missedSign-text':item.status === 1, 'unsigned-text':item.status === 3}">
              {
    {
    (item.weekMonth > 9 ? item.weekMonth : '0' + item.weekMonth) + '.' + (item.showDate > 9 ? item.showDate : '0' + item.showDate)}}
          </span>
        </li>
      </ul>
      <ul class="main" v-else>  // 月日历部分
        <li v-for="inx in weekDay" class="disabled" :key="inx">
        	<span class="i-coin unsigned"></span>
        	 <span class="unsigned-text">
            {
    {
     (preMonth> 9 ? preMonth: '0' + preMonth) + '.' + (preMonthSize - weekDay + inx) }}</span>
        </li>
        <li v-for="item of monthList" :key="item.date">
          <span class="i-coin" v-show="item.date < newDate"
                :class="{
    'signed':item.status === 2,
                'unsigned': item.status === 3 || item.status === 1 || item.status === 0,
                'haveRedBag': item.isPrize === true}"
                >
            <i v-on:click="windowOpen('repairWindowFlag')"
            class="repair-icon"
            :class="(((item.status === 1 && (new Date(new Date(newDate).getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd')) === item.date)) && isLeak) && isSign? 'repair-img' : ''"></i>
          </span>
          <span v-show="item.date >= newDate" class="i-coin"
                :class="{'signed':item.status === 2, 'unsigned': item.status === 3 || item.status === 1 || item.status === 0, 'haveRedBag': showRedBag(item.date, signRuleDays, isSign)}">
            <i v-on:click="windowOpen('repairWindowFlag')"
            class="repair-icon"
            :class="(((item.status === 1 && (new Date(new Date(newDate).getTime() - 24 * 60 * 60 * 1000).format('yyyy-MM-dd')) === item.date)) && isLeak) && isSign? 'repair-img' : ''"></i>
          </span>
          <span :class="{'signed-text':item.status === 2, 'missedSign-text':item.status === 1, 'unsigned-text':item.status === 3}">
            {
    {
     (month > 9 ? month : '0' + month) + '.' + (item.showDate > 9 ? item.showDate : '0' + item.showDate) }}</span
          >
        </li>
      </ul>
    </div>
  </div>
 </div>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/talentzym/article/details/99636783

智能推荐

Trias技术丨通过去中心化信任根dRoT可以在程序间高效地建立信任关系_trias 可信计算-程序员宅基地

文章浏览阅读576次。12月14日,Trias创始人阮安邦博士受邀出席第21届国际信息与通信安全会议(ICICS 2019),并做了题为「去中心化信任根:用可信计算与区块链技术构建互联网可信计算基础设施」的分享。该主题得到了与会嘉宾的好评和关注,在此次大会上,除了Trias之外,来自阿里巴巴、微软、AWS、360等多位企业代表也进行了相关技术的主题分享。阮博士在演讲中表示,「去中心化信任根..._trias 可信计算

kafka启用SASL/PLAIN+ACL后,kafka-consumer-group.sh查看消费组报错_executing consumer group command failed due to req-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏2次。kafka启用SASL/PLAIN+ACL后,kafka-consumer-group.sh查看消费组报错问题kafka启用用户认证和权限管理(SASL/PLAIN+ACL)之后,kafka-consumer-group.sh 查看消费组会报错-bash-4.2$cd $KAFKA_HOME-bash-4.2$bin/kafka-consumer-groups.sh --new-consu..._executing consumer group command failed due to request metadata failed on brokers lis

cmake编译时,设置ANDROID_PLATFORM版本不起效_dandroid_platform-程序员宅基地

文章浏览阅读4.7k次。cmake编译时,设置ANDROID_PLATFORM版本不起效。在CMakeLists.txt里我的设置是:add_definitions(-DANDROID_PLATFORM=android-18)但是AS最终生成的build_command.txt中仍旧是:​​​​​​​-DANDROID_PLATFORM=android-21查看其它资料时发现,可以在build.gradle中设置:android { ... defaultConfig {._dandroid_platform

使用Matlab的appdesigner创建一个简单的图像处理app_用matlab做一个图像处理的app-程序员宅基地

文章浏览阅读5.7k次,点赞15次,收藏85次。利用matlab的appdesigner建造一个简单的图像处理app_用matlab做一个图像处理的app

新手开始记录博客生涯,用C#写个简单的计时器在textbox中显示计时时间。_asp.net(c#)中textbox开始时间和结束时间-程序员宅基地

文章浏览阅读937次,点赞4次,收藏4次。新手C#小白,想在textbox中实现自动计时功能,百度了一下午,要么看不明白,要么太复杂。于是就自己随便弄了下,虽然不是很好,但基本实现功能。首先拖入timer和textbox控件:![timer](https://img-blog.csdnimg.cn/20200819170321144.PNG#pic_center)接下来设置timer的事件最后直接贴代码 int hour; int minute; int second; p_asp.net(c#)中textbox开始时间和结束时间

用JAVA和C++ 画心_system.out画心-程序员宅基地

文章浏览阅读4.4k次。心形线 心形线,是一个圆上的固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹,因其形状像心形而得名。 心脏线亦为蚶线的一种。在曼德博集合正中间的图形便是一个心脏线。心脏线的英文名称“Cardioid”是 de Castillon 在1741年的《Philosophical Transactions of the Royal Society》发表的;意为“像心脏..._system.out画心

随便推点

【优化算法】符号LMS算法【含Matlab源码 697期】-程序员宅基地

文章浏览阅读2.4k次,点赞6次,收藏34次。最小均方(LMS, Least Mean Squares)是最基本的自适应滤波算法。LMS算法是自适应滤波器中常用的一种算法与维纳算法不同的是其系统的系数随输入序列而改变。维纳算法中截取输入序列自相关函数的一段构造系统的最佳系数。而LMS算法则是对初始化的滤波器系数依据最小均方误差准则进行不断修正来实现的。因此理论上讲LMS算法的性能在同等条件下要优于维纳。_符号lms算法

VTK学习笔记(十六)vtkImageReslice 与 vtkExtractVOI_vtkcommand::leftbuttonpressevent-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏9次。VTK学习笔记(十六)vtkImageReslice1、关键代码:2、完整代码:3、CMakeLists.txt1、关键代码:先通过vtkMetaImageReader读取一副三维图像,获取图像范围、原点和像素间隔,由这三个参数可以计算图像的中心位置。接下来定义了切面的变换矩阵axialElements,该矩阵的前三列分别表示X、Y和Z方向矢量,第四列为切面坐标系原点。通过修改切面坐标系原点,可以得到不同位置的切面图像。然后将读取的图像作为vtkImageReslice的输入,通过函数SetResl_vtkcommand::leftbuttonpressevent

linux jobs继续运行,Linux jobs等前后台运行命令详解-程序员宅基地

文章浏览阅读393次。A,Shell支持作用控制,有以下命令:1. command& 让进程在后台运行2. jobs 查看后台运行的进程3. fg %n 让后台运行的进程n到前台来4. bg %n 让进程n到后台去;PS:"n"为jobs查看到的进程编号.B. 命令详解fg、bg、jobs、&、ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令,但学会了也是很实用的一。&..._jobs怎么调到台前运行

蓝牙模块四大天线方式_蓝牙天线设计-程序员宅基地

文章浏览阅读2w次,点赞17次,收藏148次。在蓝牙产品中,天线与蓝牙模块的关系是相辅相成的,是一个除了作为核心的系统芯片外,天线是另一个具有影响蓝牙模块传输特性的关键性组件。首先简单概述什么是天线?天线是一种用来发送或者接收电磁波的器件。天线的作用:发射天线的作用是将发射机的高频电流(或波导系统中的导行波)的能量有效地转换成空间的电磁能量;而接收天线的作用则恰恰相反,因此天线实际上是一个换能器。比如,拿目前市面上蓝牙模块常见的三种天线:陶瓷天线、PCB天线和IPEX外接天线来对比一下。1,陶瓷天线是一种适合于蓝牙装置使用的小型化天线。陶瓷_蓝牙天线设计

从ReentrantReadWriteLock看AQS_透过reentrantreadwritelock窥探aqs-程序员宅基地

文章浏览阅读187次。大家推荐个靠谱的公众号程序员探索之路,公众号内点击网赚获取彩蛋,大家一起加油,这个公众号已经接入图灵​======================================1.ReentrantReadWriteLock属性和读/写锁 概要======================================/** Inner class providing readl..._透过reentrantreadwritelock窥探aqs

防止前端重复提交表单_前段防止页面重复提交-程序员宅基地

文章浏览阅读741次。在加载时添加下面两条语句protected void Page_Load(object sender, EventArgs e){if (!Page.IsPostBack){#region 遮罩按钮this.Download.Attributes.Add(" onclick ", ClientScript.GetPostBackEventReference(Download, " C..._前段防止页面重复提交

推荐文章

热门文章

相关标签