vue日历组件

最新推荐文章于 2025-11-14 17:39:31 发布

原创最新推荐文章于 2025-11-14 17:39:31 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #es6 #html5 #css

本文介绍了一个Vue.js日历组件的开发过程，包括自定义开始和结束时间、设定可选星期、限制月份切换范围以及显示默认选择日期等功能。此外，还涉及到UI设计和交互反馈，如点击不在范围内的日期会弹出提示。

日历组件在开发中经常被使用到，这次产品又对之前的日历做了需求升级，开发可真难，满足他的一切吧--------下面开始：
需求大概是这样子：

自定义开始时间和结束时间
自定义频次，即可控制星期几可选
月份切换只能在设置的开始月份和结束月份之间
可传入默认选择的日期，每个日期展示对应状态
不在开始结束范围内、不在设置频次内的点击弹出相应信息
ui是这样的：

首先是画布局，跟前段时间一样的操作方式，页面布局就是这样：画出头部，主体这些

以下是日历主体部分的代码

 <div class="dateContent-body-day" v-for="item in 42" :key="item">
          <div
            :data-dates="
              year +
                '/' +
                month +
                '/' +
                (item - beginDay < 10
                  ? '0' + (item - beginDay)
                  : item - beginDay)
            "
            :data-day="
              new Date(year + '/' + month + '/' + (item - beginDay)).getDay()
            "
            @click="dateHandler"
            v-if="item - beginDay > 0 && item - beginDay <= fulldays"
            :class="{
              'can-day':
                (ignoreArray.indexOf(
                  new Date(
                    year + '/' + month + '/' + (item - beginDay)
                  ).getDay()
                ) < 0 &&
                new Date(
                  year + '/' + month + '/' + (item - beginDay)
                ).getTime() <= new Date().getTime()),
              'active-day':
                `${year}/${month}/${
                  item - beginDay < 10
                    ? '0' + (item - beginDay)
                    : item - beginDay
                }` === activeDate,
              'cannot-day':
                `${year}/${month}/${
                  item - beginDay < 10
                    ? '0' + (item - beginDay)
                    : item - beginDay
                }` > endMonth ||
                `${year}/${month}/${
                  item - beginDay < 10
                    ? '0' + (item - beginDay)
                    : item - beginDay
                }` < strMonth ||
                ignoreArray.indexOf(
                  new Date(
                    year + '/' + month + '/' + (item - beginDay)
                  ).getDay()
                ) > -1,
            }"
          >
            {{
              (item - beginDay)
                | filterDay(
                  year +
                    "/" +
                    month +
                    "/" +
                    (item - beginDay < 10
                      ? "0" + (item - beginDay)
                      : item - beginDay)
                )
            }}
            <i
              v-if="
                `${year}/${month}/${
                  item - beginDay < 10
                    ? '0' + (item - beginDay)
                    : item - beginDay
                }` >= strMonth &&
                  `${year}/${month}/${
                    item - beginDay < 10
                      ? '0' + (item - beginDay)
                      : item - beginDay
                  }` <= curDate &&
                  ignoreArray.indexOf(
                    new Date(
                      year + '/' + month + '/' + (item - beginDay)
                    ).getDay()
                  ) < 0
              "
              :class="
                clockedList
                  ? clockedList.findIndex(
                      (v) =>
                        v ==
                        year +
                          '/' +
                          month +
                          '/' +
                          (item - beginDay < 10
                            ? '0' + (item - beginDay)
                            : item - beginDay)
                    ) > -1
                    ? 'clocked'
                    : 'noClock'
                  : ''
              "
            ></i>
          </div>
          <div class="other-day" v-else-if="item - beginDay <= 0">
            {{ item - beginDay + prevfulldays }}
          </div>
          <div class="other-day" v-else>{{ item - beginDay - fulldays }}</div>
        </div>

接受父组件传入的一些值如下

 props: {
    curDate: String, //传入的默认选择时间
    strMonth: String, //设置的打卡开始时间
    endMonth: String, //设置的打卡结束时间
    ignoreArray: Array, //忽略的周次
    clockedList: Array, //打过卡的日期
    title: Array, //标题栏打卡人数占比
  },
总体而言也不难，上一个git地址，需要的自行下载吧
git@gitee.com:jhjhjh1993/calendar_component_.git