vue日历组件vue-calendar-component的使用介绍

ゝ一纸荒年。 2023-02-26 05:26 278阅读 0赞

[vue-calendar-component的GitHub介绍][vue-calendar-component_GitHub]  
使用效果：根据开始时间和结束时间，查询出当前时间前6个月的签到详情，日历控件中只能切换6个月的日历情况  
效果图：  
![在这里插入图片描述][20200715095640968.gif]  
核心代码：

<template>
       <div class="calendar">
         <Calendar ref="Calendar" :markDate="markDate" @choseDay="clickDay" :agoDayHide="today" @changeMonth="changeMonth"></Calendar>
       </div>
    </template>

<script>
    import Calendar from '@/components/calendar/calendar.vue'
      export default { 
        data() { 
          return { 
            markDate: [],
            signinList: [], // 签到日期列表
            today: Date.parse(new Date()).toString(),
            isSign: false,
          }
        },
        components: { 
          Calendar
        },
        created() { 
          this.queryIsSignIn();
          this.getSignIn()
        },
        methods: { 
          getSignIn() {  // 签到日历查询
            var that = this;
            var year = new Date().getFullYear()
            // var month = (new Date().getMonth() + 1) > 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)
            var month = new Date().getMonth() + 1
            if (month < 6) { 
              month = (month + 7) > 10 ? (month + 7) : '0' + (month + 7)
              year = year - 1
            } else { 
              month = (month - 5) > 10 ? (month - 5) : '0' + (month - 5)
            }
            var params = { 
              studentid: that.$utils.CONFIG.user.data.student.id,
              starttime: year + '-' + month + '-01',
              endtime: that.$utils.moment(new Date()).format('YYYY-MM-DD'),
            }
            that.$utils.getJson(that.$utils.CONFIG.api.getSignIn, function (res) { 
              if (res.succflag === 0) { 
                that.signinList = res.data
                that.signinList.forEach(item => { 
                  that.markDate.push(that.$utils.moment(item.time).format('YYYY/MM/DD'))
                })
              }
            }, function () { }, params, false, { token: that.$utils.CONFIG.user.token});
          },
          clickDay (date) { 
            console.log(date)
          },
          changeMonth (date) {  // 已签到时日历
            var month = parseInt(date.split('/')[1])
            var year = new Date().getFullYear()
            var currentMoth = (new Date()).getMonth() + 1
            if (month === (currentMoth - 6) && currentMoth < 6) { 
              currentMoth = (currentMoth + 7) > 10 ? (currentMoth + 7) : '0' + (currentMoth + 7)
              year = year - 1
              this.$refs.Calendar.ChoseMonth((year + '-' + currentMoth + '-01'), false)
            } else if (month === (currentMoth - 6) && currentMoth >= 6) { 
              currentMoth = (currentMoth - 5) > 10 ? (currentMoth - 5) : '0' + (currentMoth - 5)
              this.$refs.Calendar.ChoseMonth((year + '-' + currentMoth + '-01'), false)
            } else if (month > currentMoth) { 
              this.$refs.Calendar.ChoseMonth(this.$utils.moment(new Date()).format('YYYY-MM-DD'), false)
            }
          },
        }
      }
    </script>

[vue-calendar-component_GitHub]: https://github.com/zwhGithub/vue-calendar
[20200715095640968.gif]: /images/20230209/034773f5f62141e3bdcd69655fd2bf82.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在vue中使用dayjs修改日历组件的星期名称

在vue中使用日历组件Calendar时，头部的星期默认展示为\['日', '一', '二', '三', '四', '五', '六'\]，如下图所示。 ![8ce0a6669

客官°小女子只卖身不卖艺/ 2024年03月22日 16:16/ 0 赞/ 10 阅读

相关 vue日历组件vue-calendar-component的使用介绍

[vue-calendar-component的GitHub介绍][vue-calendar-component_GitHub] 使用效果：根据开始时间和结束时间，查询出当

ゝ一纸荒年。/ 2023年02月26日 05:26/ 0 赞/ 279 阅读

相关小程序vant-weapp的日历组件的使用

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[https://github.com/youzan/

╰半橙微兮°/ 2022年12月20日 01:27/ 0 赞/ 141 阅读

相关小程序vant-weapp的日历组件的使用

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[https://github.com/youzan/

秒速五厘米/ 2022年12月19日 01:30/ 0 赞/ 210 阅读

相关 vue打卡日历_vue实现日历备忘录功能

用vue写了个日历备忘录的功能，省略了备忘录的增删改查功能。 ![543dd331fe38cda0ab38b72155ed9fe2.png][] 直接上代码备忘录 \

分手后的思念是犯贱/ 2022年11月05日 15:59/ 0 赞/ 598 阅读

相关日历组件的应用

将My97DatePicker.rar里的My97DatePicker的所有内容与demo.html放在同一目录下打开demo.html就可以看到日历组件可以查看k

我就是我/ 2022年06月11日 08:06/ 0 赞/ 159 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 459 阅读

相关 vue的日历组件

一个vue calendar的npm组件说明： 1.基于element-ui开发的vue日历组件。 ![图片描述][bVbcHKw_w_612_h_491]

浅浅的花香味﹌/ 2022年05月21日 00:39/ 0 赞/ 303 阅读

相关 react日历组件

一、简单版效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

电玩女神/ 2022年04月05日 08:37/ 0 赞/ 711 阅读

相关基于vue的自定义日历组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

你的名字/ 2021年09月20日 07:46/ 0 赞/ 435 阅读