vue 封装日历组件

最新推荐文章于 2024-04-27 22:53:55 发布
最新推荐文章于 2024-04-27 22:53:55 发布
阅读量698 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45284875/article/details/127391983
版权

父组件：

		<div class="calendar">
			<Calendar
				ref="calendar"
				:date="new Date()"
				@enter="mouseenter"
				@leave="mouseleave"
				@changeMonth="changeMonth"
				@startTime="queryStartTime"
				@endTime="queryEndTime"
				style="width:100%;height:350px"
			>
				<!-- 可使用动态插槽名设置，v-slot:[slotName] -->
				<!-- <template v-slot:2021-5-21>
					<div style="position:absolute;bottom:-20px">今天</div>
				</template> -->
			</Calendar>
  	</div>

日历组件：

<template>
  <div class="cal_con">
    <div class="cal_header">
      <div class="cal_h_left">
        <span class="cal_h_time">{{ year }} 年 {{ month }} 月</span>
      </div>
      <div class="cal_h_right">
        <div class="cal_h_btn" @click="preMonth">
          <img src="submodule/ccp/assets/images/up_icon_1.png" />
        </div>
        <div class="cal_h_btn" @click="nextMonth">
          <img src="submodule/ccp/assets/images/down_icon_1.png" />
        </div>
      </div>
    </div>
    <div class="cal_month">
      <div class="cal_m_weeks">
        <span v-for="item in weeks" :key="item" class="cal_m_day_cell">{{ item }}</span>
      </div>
      <div class="cal_m_days">
        <div
          v-for="(ds, index) in monthData"
          :key="index"
          class="cal_m_day_line"
        >
          <div
            v-for="item in ds"
            :key="item.day"
            :style="{
              color: getCellColor(item),
              background: getCellBackgroundColor(item),
              'border-radius': getBorderRadius(item),
            }"
            @mouseenter="mouseenter(item, $event)"
            @mouseleave="mouseleave(item, $event)"
            @click="selectDateTime(item)"
            :class="[
              'cal_m_day_cell',
              {
                // today: todayTime === day.time,
                // 'before-day': day.time < todayTime,
                'select-start':
                  item.date && item.date.getTime() == selectTime.start,
                'select-end':
                  item.date && item.date.getTime() == selectTime.end,
                select:
                  item.date &&
                  item.date.getTime() > selectTime.start &&
                  item.date.getTime() < selectTime.end,
              },
            ]"
          >
            <div class="date">{{ item.day }}</div>
            <slot
              :name="item.fullYear + '-' + item.month + '-' + item.day"
            ></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  props: {
    date: {
      type: Date,
      default: () => new Date(),
    },
  },
  data() {
    return {
      now: this.date,
      year: 0,
      month: 0,
      weeks: ["日", "一", "二", "三", "四", "五", "六"],
      monthData: [],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      currentDay: new Date().getDate(),
      /**新加*/
      todayTime: "",
      selectTime: {
        start: "",
        end: "",
      },
      /***/
    };
  },
  computed: {},
  async mounted() {
    this.setYearMonth(this.now);
    await this.generateMonth(this.now);
    console.log("===monthData====", this.monthData);
  },
  methods: {
    selectDateTime(time) {
      // console.log("===time===", time);
      // console.log("===monthData====", this.monthData);
      // if (time < this.todayTime) {
      //   return false;
      // }
      if (!this.selectTime.start && !this.selectTime.end) {
        this.selectTime.start = time.date.getTime();
      } else if (this.selectTime.start && this.selectTime.end) {
        this.selectTime.start = time.date.getTime();
        this.selectTime.end = "";
      } else if (
        this.selectTime.start &&
        this.selectTime.start < time.date.getTime()
      ) {
        this.selectTime.end = time.date.getTime();
      } else if (
        this.selectTime.start &&
        this.selectTime.start > time.date.getTime()
      ) {
        this.selectTime.start = time.date.getTime();
        this.selectTime.end = "";
      }
      if (this.selectTime.start) {
        this.$emit("startTime", this.selectTime.start);
      }
      if (this.selectTime.end) {
        this.$emit("endTime", this.selectTime.end);
      }
    },

    setYearMonth(now) {
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
    },
    preYear() {
      let n = this.now;
      let date = new Date(
        n.getFullYear() - 1,
        n.getMonth(),
        n.getDate(),
        n.getHours(),
        n.getMinutes(),
        n.getSeconds(),
        n.getMilliseconds()
      );
      this.setYearMonthInfos(date);
    },
    preMonth() {
      let n = this.now;
      let date = new Date(
        n.getFullYear(),
        n.getMonth() - 1,
        n.getDate(),
        n.getHours(),
        n.getMinutes(),
        n.getSeconds(),
        n.getMilliseconds()
      );
      this.setYearMonthInfos(date);
    },
    nextYear() {
      let n = this.now;
      let date = new Date(
        n.getFullYear() + 1,
        n.getMonth(),
        n.getDate(),
        n.getHours(),
        n.getMinutes(),
        n.getSeconds(),
        n.getMilliseconds()
      );

      this.setYearMonthInfos(date);
    },
    nextMonth() {
      let n = this.now;
      let date = new Date(
        n.getFullYear(),
        n.getMonth() + 1,
        n.getDate(),
        n.getHours(),
        n.getMinutes(),
        n.getSeconds(),
        n.getMilliseconds()
      );

      this.setYearMonthInfos(date);
    },
    setYearMonthInfos(date) {
      this.setYearMonth(date);
      this.generateMonth(date);
      this.now = date;
      this.dateChange();
    },
    generateMonth(date) {
      date.setDate(1);
      // 星期 0 - 6， 星期天 - 星期6
      let weekStart = date.getDay();

      let endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      let dayEnd = endDate.getDate();
      // 星期 0 - 6， 星期天 - 星期6
      let weeEnd = endDate.getDay();

      let milsStart = date.getTime();
      let dayMils = 24 * 60 * 60 * 1000;
      let milsEnd = endDate.getTime() + dayMils;

      let monthDatas = [];
      let current;
      // 上个月的几天
      for (let i = 0; i < weekStart; i++) {
        current = new Date(milsStart - (weekStart - i) * dayMils);
        monthDatas.push({
          type: -1,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate(),
        });
      }
      // 当前月
      for (let i = 0; i < dayEnd; i++) {
        current = new Date(milsStart + i * dayMils);
        monthDatas.push({
          type: 0,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate(),
        });
      }
      // 下个月的几天
      for (let i = 0; i < 6 - weeEnd; i++) {
        current = new Date(milsEnd + i * dayMils);
        monthDatas.push({
          type: 1,
          date: current,
          fullYear: current.getFullYear(),
          month: current.getMonth() + 1,
          day: current.getDate(),
        });
      }

      this.monthData = [];
      for (let i = 0; i < monthDatas.length; i++) {
        let mi = i % 7;
        if (mi == 0) {
          this.monthData.push([]);
        }
        this.monthData[Math.floor(i / 7)].push(monthDatas[i]);
      }

      // 少于6行，补足6行
      if (this.monthData.length <= 5) {
        milsStart = current.getTime();
        let lastLine = [];
        for (let i = 1; i <= 7; i++) {
          current = new Date(milsStart + i * dayMils);
          lastLine.push({
            type: 1,
            date: current,
            fullYear: current.getFullYear(),
            month: current.getMonth() + 1,
            day: current.getDate(),
          });
        }
        this.monthData.push(lastLine);
      }
    },

    getCellColor(d) {
      if (
        d.fullYear == this.currentYear &&
        d.month == this.currentMonth &&
        d.day == this.currentDay
      ) {
        return "#409eff";
      }
      // let color = d.type == -1 ? "#c0c4cc" : d.type == 1 ? "#c0c4cc  " : "";
      // return color;
    },
    getCellBackgroundColor(d) {
      if (
        d.fullYear == this.currentYear &&
        d.month == this.currentMonth &&
        d.day == this.currentDay
      ) {
        return "rgba(220,235,253,0.80)";
      }
    },
    getBorderRadius(d) {
      if (
        d.fullYear == this.currentYear &&
        d.month == this.currentMonth &&
        d.day == this.currentDay
      ) {
        return "2px";
      }
    },
    mouseenter(d, event) {
      this.$emit("enter", event, d);
    },
    mouseleave(d, event) {
      this.$emit("leave", event, d);
    },
    dateChange() {
      let fullYear = this.now.getFullYear();
      let month = this.now.getMonth();

      let startDay = new Date(fullYear, month, 1);
      let endDay = new Date(fullYear, month + 1, 0, 23, 59, 59);
      this.$emit("changeMonth", startDay, endDay);
    },
  },
};
</script>

<style scoped lang="scss">
.cal_con {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #606266;

  background: #fff;
  border-radius: 4px;
  margin: auto;

  .cal_header {
    height: 24px;
    padding: 5px;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    justify-items: center;

    .cal_h_time {
      display: inline-block;
      font-family: MicrosoftYaHei-Bold;
      font-size: 18px;
      color: #363232;
      letter-spacing: 0;
      font-weight: 700;
    }
    .cal_h_time:hover {
      color: #409eff;
    }

    .cal_h_right {
      height: 100%;
      display: flex;
      .cal_h_btn {
        height: 100%;
        width: 24px;
        cursor: pointer;
        margin-left: 0.5rem;
        img {
          width: 1rem;
          height: 0.6rem;
        }
      }
      // .cal_h_btn:hover {
      // background-color: #ebeef5;
      // }
      .cal_h_l_icon {
        height: 16px;
        width: 16px;
        margin: auto;
        text-align: center;
      }
    }
  }

  .cal_month {
    font-size: 12px;
    text-align: center;
    height: calc(100% - 34px);

    .cal_m_day_cell {
      width: 60%;
      height: 60%;
      line-height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cal_m_day_cell:hover {
      color: #409eff;
      font-weight: 600;
      // background: rgba(220,235,253,0.80);
    }

    /**新加*/
    .select-start,
    .select-end {
      // background: rgba(255, 92, 52, 1);
      background: #427bf1;
      border-radius: 4.93px;
      .date {
        color: #fff;
        &::before {
          position: absolute;
          top: -30px;
          left: 8px;
          content: "开始";
        }
      }
    }
    .select-end {
      .date {
        &::before {
          content: "结束";
        }
      }
    }
    .select-start {
      .right-side {
        background: #fff3f1;
      }
    }
    .select-end {
      .left-side {
        background: #fff3f1;
      }
    }
    .select {
      // background: #fff3f1;
      background: rgba(220, 235, 253, 0.8);
      border-radius: 2px;
    }
    /**完*/

    .cal_m_weeks {
      height: 16px;
      padding: 8px;
      display: flex;
      justify-content: space-around;
      justify-items: center;
      border-bottom: 1px solid #e4e7ed;
    }

    .cal_m_days {
      height: calc(100% - 49px);
      padding: 8px;
      display: flex;
      justify-content: space-around;
      justify-items: center;
      flex-wrap: wrap;
      .cal_m_day_line {
        width: 100%;
        display: flex;
        justify-content: space-around;
        justify-items: center;
        align-items: center;
      }
    }
  }
}
</style>
Mouse@Rice
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 日历组件
Lemontree_fu的博客
07-16 417
安装 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 使用 //vue文件中引入 import Calendar from 'vue-calendar-component'; components: { Calendar } <Calendar v-on:choseDay="clickDay" v-on:changeMonth="
vue自定义日历组件
南思琼海
03-01 827
代码地址 https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar 享一下组件目录 tip: 组件功能： 展示当前年份当前月， 支持左右 icon自定义 支持自定义当前日提示边框颜色 支持自定义某一日选择背景颜色， 边框染色如已经自定义边框颜色则为自定义颜色 某一日选中采用圆点模式 使用 引入 mai...
在 Vue 2 中使用 lunar-calendar 库,显示日历以及每日打卡信息
hql1024的博客
02-19 1112
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min...
vue自定义日历小组件
weixin_41357410的博客
05-11 8092
vue自定义小日历组件 一、前言 自己开发的项目需要用到类似博客侧边栏小日历组件，觉得自己造一个比较随心所欲，更能满足自己的需求，所以决定自己开发一个。 二、日历样式 我的这个日历组件主要分为导航栏区和主要内容区，导航栏按钮样式什么的都是自定义的，很简单，源码有就不罗嗦。主要讲一下日历内容的样式设计。 日历内容都是用<ul>和<li>标签实现的，星期栏和日期栏分别为独立的<ul>,内容为<li>，两个<ul>均采用网格布局，星期栏1行7列，日期内
vue工作日历的组件
最新发布
高艳艳的博客！
04-27 242
【代码】vue工作日历的组件。
VUE篇之日历组件
ae_pppppp的博客
12-13 6274
手写日历组件
vue原生方式实现日历组件
hyduan_h5的博客
06-02 6545
vue原生实现日历组件
vue——实现日历组件的封装——基础积累
yehaocheng520的博客
02-14 2207
vue——实现日历组件的封装——基础积累
vue-calendar:手摸手教你用VUE封装日历组件
03-12
欢迎来到小五的随笔系列之手摸手教你用VUE封装日历组件。 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 写在前面 双脚奉上最终效果图： 需求...
vue之封装自己的日历组件-高级篇视频
09-30
vue之封装自己的日历组件-高级篇视频 封装自己的组件
vue实现日历备忘录功能
10-16
- `#box` 用来设置整个日历组件的宽度。 - `.pickDay` 包含当前日期的显示，包括大号的日期数字和小号的月份与年份。 - `.month` 是月份选择部分，包含了年份和月份的选择按钮。 - `.year-month` 容纳了年份和...
vuefullcalendar一个基于vuejs的全日历组件
08-10
Vue FullCalendar是一个专门为Vue.js框架设计的全功能日历组件，它允许开发者在Vue应用程序中轻松集成日历功能。这个组件并不依赖jQuery，也不需要直接使用fullCalendar.js库，因此对于那些希望保持代码轻量级和 Vue...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 日历组件在很多应用中都是不可或缺的部分，例如在线预订、行程规划等。在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能...
vue封装日历组件(vue2/vue3)
qq_38661597的博客
04-21 3634
组件里注释的部分代码是实现的下拉，下拉选择项的月份根据当前的月份，把当前月以及之前的月push进去，但是只实现了当前年的，前一年的就无法选择；并且点击日历中某一天的时候，若不是当前月，不做任何处理。实现一个日历组件，可以在对应的日期下显示其他数据；点击日期为其他月份的时候自动切换到该月。
用vue 编写一个日历组件（非常详细-让日历简单起来）
weixin_34123613的博客
05-19 4896
相信有不少小伙伴和我一样一提到日历就脑壳疼，然后去网上搜索好用的日历组件，如element-ui什么的，但是日历毕竟是别人开发出来的， 和自己家ui设计出来的功能样式毕竟不能100%相似，所以这个时候要么就去git上找一个相似的然后去修改代码，要么就只能自己开发一个了，所以我也是把我自己学到的日历组件封装思路分享给大家； 虽然我知道日历组件肯定已经有很多人发过文章，写过思路了，但是我还是想写一下。...
vue手搓自定义日历, 同步节假日
A_lrb0803的博客
09-27 2064
满足节假日配置, 手搓日历
饿了么 (Element)的 日历(Calendar)组件 自定义
热门推荐
qq_41239398的博客
05-31 3万+
笔记 由于本人用vue+elementui 写了一个关于日历的项目 需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价 后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库里面没有这些方法 所以很奇怪) 具体实现的方法 一, 在网上找了很多方法 最后借鉴的是这位小姐姐的方法。 准备工作 首先需要 npm install ele-calendar <el...
日历组件封装 —— (Vue 和 JS两种方式实现)
dabaooooq的博客
02-14 1428
分三个模块，日期面板、年份面板、月份面板。所有事件，利用事件代理方式，只绑定根元素点击事件，最后触发子节点通过冒泡触发事件。公共store，用于响应数据的变化，及时去创建或更新面板。
vue 封装日历有时分秒
07-22
对于Vue中封装带有时分秒的日历，您可以使用一些现有的日历组件，并通过自定义配置来实现。以下是一个简单的示例： 1. 首先，您可以使用Vue日历组件，例如`vue-datepicker`或`vue-datepicker-local`。可以通过npm...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值