移动端使用vue封装日历

1.首先根据头部导航显示历史的六天时间,旁边点击日历icon出现日历组件
在这里插入图片描述
2.日历页面显示两个月份,当前月及上月,我这里将日历分为了三块:上月,中间月,下月。
在这里插入图片描述日历组件index.vue:

<template>
  <div id="calendar">
      <calendarHeader 
      @handlePrevMonth = 'getPrevMonth'
      @handleNextMonth = 'getNextMonth'
      @handleToday = 'handleToday'
      @selectDate = 'selectDate'
      @cancle="cancle"
    />
    <div class="date-title" >
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    
    <div class="calendar-container"  style="height:36rem;" v-on:scroll="scrollDebounce">
        <!-- 上一个月 'signBg':sign==i -->
      <div class="date-container premonth">
        <div class="date-header">{
   {
    `${
     preDivCalendar.year}${
     preDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(preDivCalendar.year, (preDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
                :class=" {
   
                  'todayBlock': isCurrentDay(i,preDivCalendar.month,preDivCalendar.year),
                  'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
                  'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
                }"
                @click="handleClickDay(i,preDivCalendar.month,preDivCalendar.year)"
               v-for="i in preCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
              'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
              }">{
   {
   preLunarList[i]}}</p>
            <span  :class="{
   
              'no-report-status':isHistory(i,preDivCalendar.month,preDivCalendar.year),
              'reported-status':isReported(i,preDivCalendar.month,preDivCalendar.year)
              }"></span>
          </div>
        </div>
      </div>
      <!-- 中间一个月 -->
      <div class="date-container middlemonth">
        <div class="date-header">{
   {
    `${
     middleDivCalendar.year}${
     middleDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(middleDivCalendar.year, (middleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
               :class="{
   
                 'todayBlock': isCurrentDay(i,middleDivCalendar.month,middleDivCalendar.year),
                 'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
                 'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
                 'selectBg':isSelectDay(i,middleDivCalendar.month,middleDivCalendar.year)
                 }"
               @click="handleClickDay(i, middleDivCalendar.month,middleDivCalendar.year)"
               v-for="i in currentCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
              'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
              }">{
   {
   currentLunarList[i]}}</p>
            <span :class="{
   
              'no-report-status':isHistory(i,middleDivCalendar.month,middleDivCalendar.year),
              'reported-status':isReported(i,middleDivCalendar.month,middleDivCalendar.year)
              }"></span>
            
          </div>
        </div>
      </div>
      <!-- 下一个月 :class="{todayBlock: i === 1}" -->
      <div class="date-container nextmonth">
        <div class="date-header">{
   {
    `${
     nextMiddleDivCalendar.year}${
     nextMiddleDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(nextMiddleDivCalendar.year, (nextMiddleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
                :class="{
   
                  'todayBlock': isCurrentDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  }"
                @click="handleClickDay(i, nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)"
               v-for="i in nextCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
              'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
            }">{
   {
   nextLunarList[i]}}</p>
            <span :class="{
   
              'no-report-status':isHistory(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
              'reported-status':isReported(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
            }"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

日历组件的JavaScript,显示的农历有些问题待更新,显示农历的方法在百度上面有很多,大家可以结合我的去调整。

export default {
   
    components: {
   
        calendarHeader
    },
    props:{
   
      middleDate:{
   
        type:Object
      },
      unitProjectId:{
   
        type:Number
      }
    },
    data () {
   
      return {
   
        scrollTimer: null, // 滚动定时器,用于滚动事件防抖动
        // preDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()}, // 第一个div显示的日历
        // middleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+1}, // 中间div显示的日历
        // nextMiddleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+2}, // 最后一个div显示的日历
        preDivCalendar: {
   }, // 第一个div显示的日历
        middleDivCalendar: {
   }, // 中间div显示的日历
        nextMiddleDivCalendar: {
   }, // 最后一个div显示的日历
        preCalendarList:[],
        currentCalendarList:[],
        nextCalendarList:[],
        selectDay:{
   },
        clickDay:{
   },
        dailyCalendarStatusList:[],
        dailyReportStatusList:[],
        preLunarList:[],//上月农历日期
        currentLunarList:[],//中间农历日期
        nextLunarList:[],//下月农历日期
      }
    },
    created(){
   
      this.preDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month-1}
      this.middleDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month};
      // this.middleDivCalendar = this.middleDate;
      this.nextMiddleDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month+1}
      this.handleClickDay1(this.middleDate.date,this.middleDate.month,this.middleDate.year)
      
      this.preCalendarList = this.getMonthDayByMonthYear(this.preDivCalendar.month, this.preDivCalendar.year)
      this.currentCalendarList = this.getMonthDayByMonthYear (this.middleDivCalendar.month, this.middleDivCalendar.year)
      this.nextCalendarList = this.getMonthDayByMonthYear (this.nextMiddleDivCalendar.month, this.nextMiddleDivCalendar.year)

    
    },
    mounted () {
   
      // this.middleDivCalendar = {year: new Date().getFullYear(), month: new Date().getMonth()+1}
      // this.middleDivCalendar = {year: this.middleDate.year, month: this.mi
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值