vue 手撕日历控件

已于 2022-07-29 14:04:09 修改
阅读量649 收藏 4
点赞数 2
分类专栏： Vue 文章标签： javascript vue css 前端
于 2022-07-29 11:16:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43730595/article/details/126051322
版权

vue制作日历控件

效果如下：

在这里插入图片描述

js日期数据原理：
上月的几天 + 本月 +下月的几天

html渲染原理：
日历头：[“周一”, “周二”, “周三”, “周四”, “周五”, “周六”, “周日”]
内容：根据日历的大众格式 来设置表格格式 ：7列六行 | 7*6

代码如下：（已做好最基础组件形式;）

html代码：如下

<template>
  <div
    style="
      box-sizing: border-box;
      width: 1200px;
      background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
      padding: 20px;
      border-radius: 20px;
    "
  >
    <div class="cal_con">
      <div class="cal_header">
        <!-- 顶部左侧 -->
        <div class="cal_header_left">
          <div class="cal_header_left_top">
            <span class="cal_h_time">{{ year }}</span>
          </div>
          <div class="cal_header_left_bottom">
            <div class="cal_h_left">
              <div class="cal_h_btn" @click="preYear">
                <svg class="cal_h_l_icon">
                  <!-- 画线条 -->
                  <polyline
                    points="6,0 2,4 6,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                  <!-- 画线条 -->
                  <polyline
                    points="10,0 6,4 10,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                </svg>
              </div>
              <div class="cal_h_btn" @click="preMonth">
                <svg class="cal_h_l_icon">
                  <polyline
                    points="6,0 2,4 6,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                </svg>
              </div>
            </div>
            <div class="cal_h_center">
              <span class="cal_h_time">{{ month }}</span>
            </div>
            <div class="cal_h_right">
              <div class="cal_h_btn" @click="nextMonth">
                <svg class="cal_h_l_icon">
                  <polyline
                    points="2,0 8,4 2,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                </svg>
              </div>
              <div class="cal_h_btn" @click="nextYear">
                <svg class="cal_h_l_icon">
                  <polyline
                    points="2,0 8,4 2,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                  <polyline
                    points="6,0 12,4 6,8"
                    style="fill: none; stroke: #ffffff; stroke-width: 2"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <!-- 顶部右侧 -->
        <div class="cal_header_right">
          <div class="nameText">姓名:张三</div>
          <div class="QingjiaText">请假:2h</div>
          <div class="JiaBanText">加班:11h</div>
          <div class="ChuCaiText">出差:32h</div>
          <div class="YiChangText">异常考勤:7次</div>
        </div>
      </div>

      <div class="cal_month">
        <!--日历表头  周一 周二 周三 周四 周五 周六 周日-->
        <div class="cal_m_weeks">
          <div v-for="w in weeks" :key="w" class="cal_m_weeks_cell">
            {{ w }}
          </div>
        </div>
        <!--日历表内容 -->
        <div class="cal_m_days">
          <!-- 第几行 -->
          <div
            v-for="(ds, index) in monthData"
            :key="index"
            class="cal_m_day_line"
          >
            <!-- 每行内容 -->
            <div
              v-for="(d, index) in ds"
              :key="d.day"
              class="cal_m_day_cell"
              :style="{ color: getCellColor(d) }"
              @mouseenter="mouseenter(d, $event)"
              @mouseleave="mouseleave(d, $event)"
            >
              <div class="itemDay">{{ d.day }}</div>
              <!-- {{ ds[index].date.Format("yyyy-MM-dd") }} -->
              <slot :name="d.fullYear + '-' + d.month + '-' + d.day"></slot>
              <!-- 正常卡 -->
              <!-- <div class="ZhengChang">
                <div class="ZhengChangTitle">正常卡:4次</div>
                <div class="ZhengChangDian">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div> -->
              <!-- 请假 -->
              <!-- <div class="Qingjia">
                <div class="QingjiaTitle">请假:事假</div>
                <div class="QingjiaDian">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div> -->

              <!-- 异常卡 -->
              <div class="YiChang" @click="ss(index)">
                <div class="YiChangTitle">异常卡</div>
                <div class="YiChangDian">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>

              <!-- 假期 -->
              <!-- <div class="JiaQi">
                <div class="JiaQiTitle">假期</div>
                <div class="JiaQiDian">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div> -->
              <!-- 加班 -->
              <div class="JiaBan">
                <div class="JiaBanTitle">加班:4h</div>
                <div class="JiaBanDian">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

js代码：如下

<script>
export default {
  name: "cu-calendar",
  props: {
    date: {
      type: Date,
      default: () => new Date(),
    },
  },
  data() {
    return {
      now: this.date, //当前时间：Fri Jul 29 2022 09:57:33 GMT+0800 (中国标准时间)
      year: 0,
      month: 0,
      weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      monthData: [], //月数据容器
      currentYear: new Date().getFullYear(), //当前年：2022
      currentMonth: new Date().getMonth() + 1, //当前月：7
      currentDay: new Date().getDate(), //当前天：29
    };
  },
  computed: {},
  mounted() {
    this.setYearMonth(this.now);
    this.generateMonth(this.now);
  },
  methods: {
    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 = 1; 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 + 1; 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;
    },
    mouseenter(d, event) {
      this.$emit("enter", event, d);
      // document.getElementsByClassName('cal_m_day_cell').style('background-color','#000000')
    },
    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>

css代码：如下

<style scoped lang="scss">
.cal_con {
  box-sizing: border-box;
  width: 1160px; //下方单元格*7+左右内边距 160*7+20
  padding: 20px;
  -webkit-user-select: none; //取消鼠标点快了文字会被选中。
  -moz-user-select: none; //取消鼠标点快了文字会被选中。
  -ms-user-select: none; //取消鼠标点快了文字会被选中。
  user-select: none; //取消鼠标点快了文字会被选中。
  color: #000000;
  box-shadow: 0 2px 12px 0 #0000006e;
  background: #ffffff;
  border-radius: 20px;

  .cal_header {
    width: 1120px; //下方单元格*7 160*7
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .cal_header_left {
      display: flex;
      flex-direction: column;
      align-items: center;
      .cal_header_left_top {
        width: 122px;
        height: 30px;
        background: #109af9;
        display: flex;
        align-items: center;
        justify-content: center;
        .cal_h_time {
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
      }
      .cal_header_left_bottom {
        width: 122px;
        height: 30px;
        background: rgba(16, 154, 249, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cal_h_left {
          height: 100%;
          display: flex;

          .cal_h_btn {
            height: 100%;
            width: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .cal_h_btn:hover {
            background-color: #109af9;
          }

          .cal_h_l_icon {
            height: 8px;
            width: 12px;
            margin: auto;
          }
        }
        .cal_h_center {
          .cal_h_time {
            font-family: "Microsoft YaHei";
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
        .cal_h_right {
          height: 100%;
          display: flex;

          .cal_h_btn {
            height: 100%;
            width: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .cal_h_btn:hover {
            background-color: #109af9;
          }

          .cal_h_l_icon {
            height: 8px;
            width: 12px;
            margin: auto;
          }
        }
      }
    }
    .cal_header_right {
      //   width: 1125px;
      height: 43px;
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      .QingjiaText {
        color: rgba(255, 199, 0, 1);
        margin-left: 80px;
      }
      .JiaBanText {
        color: rgba(36, 0, 255, 1);
        margin-left: 80px;
      }
      .ChuCaiText {
        color: rgba(255, 167, 40, 1);
        margin-left: 80px;
      }
      .YiChangText {
        color: rgba(240, 92, 39, 1);
        margin-left: 80px;
      }
    }
  }

  .cal_month {
    // 日历表头 周日 周一 周二 周三 周四 周五 周六
    .cal_m_weeks {
      display: flex;
      .cal_m_weeks_cell {
        box-sizing: border-box;
        width: 160px;
        height: 40px;
        font-weight: 400;
        font-size: 16px;
        border: 1px solid #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    // 日历表内容
    .cal_m_days {
      // 第几行
      .cal_m_day_line {
        display: flex;
        // 每行内容
        .cal_m_day_cell {
          box-sizing: border-box;
          width: 160px;
          height: 158px;
          border: 1px solid #e4e7ed;
          .itemDay {
            width: 138px;
            height: 42px;
            font-style: normal;
            font-weight: 400;
            font-size: 32px;
            line-height: 42px;
            text-align: right;
          }
        }
        // 每行内容-浮动效果
        .cal_m_day_cell:hover {
          color: #409eff;
        }
      }
    }
  }
}
// 正常卡
.ZhengChang {
  margin: 10px 10px 10px 10px;
  width: 118px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(16, 154, 249, 0.2);
  color: rgba(16, 154, 249, 1);
  .ZhengChangTitle {
  }
  .ZhengChangDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(16, 154, 249, 1);
    }
  }
}
.ZhengChang:hover {
  transform: scale(1.1);
}
// 请假
.Qingjia {
  margin: 10px 10px 10px 10px;
  width: 118px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(255, 199, 0, 0.2);
  color: rgba(255, 199, 0, 1);
  .QingjiaTitle {
  }
  .QingjiaDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(255, 199, 0, 1);
    }
  }
}
.Qingjia:hover {
  transform: scale(1.1);
}
// 异常卡
.YiChang {
  margin: 10px 10px 10px 10px;
  width: 118px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(240, 92, 39, 0.2);
  color: rgba(240, 92, 39, 1);
  .YiChangTitle {
  }
  .YiChangDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(240, 92, 39, 1);
    }
  }
}
.YiChang:hover {
  transform: scale(1.1);
}
// 假期
.JiaQi {
  margin: 10px 10px 10px 10px;
  width: 118px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(29, 209, 155, 0.2);
  color: rgba(29, 209, 155, 1);
  .JiaQiTitle {
  }
  .JiaQiDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(29, 209, 155, 1);
    }
  }
}
.JiaQi:hover {
  transform: scale(1.1);
}
// 加班
.JiaBan {
  margin: 10px 10px 10px 10px;
  width: 118px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(36, 0, 255, 0.2);
  color: rgba(36, 0, 255, 1);
  .JiaBanTitle {
  }
  .JiaBanDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(36, 0, 255, 1);
    }
  }
}
.JiaBan:hover {
  transform: scale(1.1);
}
</style>

所有代码：.vue 文件直接放置即可，

<template>
  <div class="cal_con">
    <div class="cal_header">
      <!-- 顶部左侧 -->
      <div class="cal_header_left">
        <div class="cal_header_left_top">
          <span class="cal_h_time">{{ year }}</span>
        </div>
        <div class="cal_header_left_bottom">
          <div class="cal_h_left">
            <div class="cal_h_btn" @click="preYear">
              <svg class="cal_h_l_icon">
                <!-- 画线条 -->
                <polyline
                  points="6,0 2,4 6,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
                <!-- 画线条 -->
                <polyline
                  points="10,0 6,4 10,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
              </svg>
            </div>
            <div class="cal_h_btn" @click="preMonth">
              <svg class="cal_h_l_icon">
                <polyline
                  points="6,0 2,4 6,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
              </svg>
            </div>
          </div>
          <div class="cal_h_center">
            <span class="cal_h_time">{{ month }}</span>
          </div>
          <div class="cal_h_right">
            <div class="cal_h_btn" @click="nextMonth">
              <svg class="cal_h_l_icon">
                <polyline
                  points="2,0 8,4 2,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
              </svg>
            </div>
            <div class="cal_h_btn" @click="nextYear">
              <svg class="cal_h_l_icon">
                <polyline
                  points="2,0 8,4 2,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
                <polyline
                  points="6,0 12,4 6,8"
                  style="fill: none; stroke: #ffffff; stroke-width: 2"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <!-- 顶部右侧 -->
      <div class="cal_header_right">
        <div class="nameText">姓名:张三</div>
        <div class="QingjiaText">请假:2h</div>
        <div class="JiaBanText">加班:11h</div>
        <div class="ChuCaiText">出差:32h</div>
        <div class="YiChangText">异常考勤:7次</div>
      </div>
    </div>

    <div class="cal_month">
      <!--日历表头  周一 周二 周三 周四 周五 周六 周日-->
      <div class="cal_m_weeks">
        <div v-for="w in weeks" :key="w" class="cal_m_weeks_cell">
          {{ w }}
        </div>
      </div>
      <!--日历表内容 -->
      <div class="cal_m_days">
        <!-- 第几行 -->
        <div
          v-for="(ds, index) in monthData"
          :key="index"
          class="cal_m_day_line"
        >
          <!-- 每行内容 -->
          <div
            v-for="d in ds"
            :key="d.day"
            class="cal_m_day_cell"
            :style="{ color: getCellColor(d) }"
            @mouseenter="mouseenter(d, $event)"
            @mouseleave="mouseleave(d, $event)"
          >
            <div class="itemDay">{{ d.day }}</div>
            <!-- {{ ds[index].date.Format("yyyy-MM-dd") }} -->
            <!-- {{ d.date.Format("yyyy-MM-dd") }} -->
            <slot :name="d.fullYear + '-' + d.month + '-' + d.day"></slot>
            <!-- 正常卡 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '正常卡'
              "
              class="ZhengChang"
            >
              <div class="ZhengChangTitle">正常卡:4次</div>
              <div class="ZhengChangDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
            <!-- 请假 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '请假'
              "
              class="Qingjia"
            >
              <div class="QingjiaTitle">请假:事假</div>
              <div class="QingjiaDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
            <!-- 加班 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '加班'
              "
              class="JiaBan"
            >
              <div class="JiaBanTitle">加班:4h</div>
              <div class="JiaBanDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
            <!-- 出差 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '出差'
              "
              class="ChuChai"
              @click="ss(index)"
            >
              <div class="ChuChaiTitle">出差</div>
              <div class="ChuChaiDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
            <!-- 异常卡 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '异常卡'
              "
              class="YiChang"
              @click="ss(index)"
            >
              <div class="YiChangTitle">异常卡</div>
              <div class="YiChangDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>

            <!-- 假期 -->
            <div
              v-if="
                d.type == 0 &&
                setDataList(d.date.Format('yyyy-MM-dd')).typeName == '假期'
              "
              class="JiaQi"
            >
              <div class="JiaQiTitle">假期</div>
              <div class="JiaQiDian">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cu-calendar",
  props: {
    date: {
      type: Date,
      default: () => new Date(),
    },
    dataList: {
      type: [],
      default: () => [
        {
          time: "2022-07-29",
          typeName: "正常卡",
        },
        {
          time: "2022-07-20",
          typeName: "请假",
        },
        {
          time: "2022-07-22",
          typeName: "加班",
        },
        {
          time: "2022-07-11",
          typeName: "出差",
        },
        {
          time: "2022-07-14",
          typeName: "异常卡",
        },
        {
          time: "2022-07-02",
          typeName: "假期",
        },
      ],
    },
  },
  data() {
    return {
      now: this.date, //当前时间：Fri Jul 29 2022 09:57:33 GMT+0800 (中国标准时间)
      year: 0,
      month: 0,
      weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      monthData: [], //月数据容器
      currentYear: new Date().getFullYear(), //当前年：2022
      currentMonth: new Date().getMonth() + 1, //当前月：7
      currentDay: new Date().getDate(), //当前天：29
    };
  },
  computed: {},
  mounted() {
    this.setYearMonth(this.now);
    this.generateMonth(this.now);
  },
  methods: {
    // 通过输入日期，匹配当天的所有数据
    // 入参格式 value：'2022-07-09'
    setDataList(value) {
      let object = {};
      this.dataList.forEach((element) => {
        if (element.time == value) {
          object = element;
        }
      });
      return object;
    },
    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 = 1; 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 + 1; 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;
    },
    mouseenter(d, event) {
      this.$emit("enter", event, d);
      // document.getElementsByClassName('cal_m_day_cell').style('background-color','#000000')
    },
    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 {
  box-sizing: border-box;
  width: 1020px; //下方单元格*7+左右内边距 140*7+20+20
  padding: 10px 20px 20px 20px;
  -webkit-user-select: none; //取消鼠标点快了文字会被选中。
  -moz-user-select: none; //取消鼠标点快了文字会被选中。
  -ms-user-select: none; //取消鼠标点快了文字会被选中。
  user-select: none; //取消鼠标点快了文字会被选中。
  color: #000000;
  box-shadow: 0 2px 12px 0 #0000006e;
  background: #ffffff;
  border-radius: 20px;

  .cal_header {
    width: 980px; //下方单元格*7 140*7
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .cal_header_left {
      display: flex;
      flex-direction: column;
      align-items: center;
      .cal_header_left_top {
        width: 122px;
        height: 30px;
        background: #109af9;
        display: flex;
        align-items: center;
        justify-content: center;
        .cal_h_time {
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
      }
      .cal_header_left_bottom {
        width: 122px;
        height: 30px;
        background: rgba(16, 154, 249, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cal_h_left {
          height: 100%;
          display: flex;

          .cal_h_btn {
            height: 100%;
            width: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .cal_h_btn:hover {
            background-color: #109af9;
          }

          .cal_h_l_icon {
            height: 8px;
            width: 12px;
            margin: auto;
          }
        }
        .cal_h_center {
          .cal_h_time {
            font-family: "Microsoft YaHei";
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
        .cal_h_right {
          height: 100%;
          display: flex;

          .cal_h_btn {
            height: 100%;
            width: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .cal_h_btn:hover {
            background-color: #109af9;
          }

          .cal_h_l_icon {
            height: 8px;
            width: 12px;
            margin: auto;
          }
        }
      }
    }
    .cal_header_right {
      //   width: 1125px;
      height: 43px;
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      .QingjiaText {
        color: rgba(255, 199, 0, 1);
        margin-left: 80px;
      }
      .JiaBanText {
        color: rgba(36, 0, 255, 1);
        margin-left: 80px;
      }
      .ChuCaiText {
        color: rgba(255, 167, 40, 1);
        margin-left: 80px;
      }
      .YiChangText {
        color: rgba(240, 92, 39, 1);
        margin-left: 80px;
      }
    }
  }

  .cal_month {
    // 日历表头 周日 周一 周二 周三 周四 周五 周六
    .cal_m_weeks {
      display: flex;
      .cal_m_weeks_cell {
        box-sizing: border-box;
        width: 140px;
        height: 30px;
        font-weight: 400;
        font-size: 16px;
        border: 1px solid #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    // 日历表内容
    .cal_m_days {
      // 第几行
      .cal_m_day_line {
        display: flex;
        // 每行内容
        .cal_m_day_cell {
          box-sizing: border-box;
          width: 140px;
          height: 120px;
          border: 1px solid #e4e7ed;
          .itemDay {
            width: 100%;
            height: 30px;
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            text-align: right;
            box-sizing: border-box;
            padding-right: 10px;
          }
        }
        // 每行内容-浮动效果
        .cal_m_day_cell:hover {
          color: #409eff;
        }
      }
    }
  }
}
// 正常卡
.ZhengChang {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(16, 154, 249, 0.2);
  color: rgba(16, 154, 249, 1);
  .ZhengChangTitle {
  }
  .ZhengChangDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(16, 154, 249, 1);
    }
  }
}
.ZhengChang:hover {
  transform: scale(1.1);
}
// 请假
.Qingjia {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(255, 199, 0, 0.2);
  color: rgba(255, 199, 0, 1);
  .QingjiaTitle {
  }
  .QingjiaDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(255, 199, 0, 1);
    }
  }
}
.Qingjia:hover {
  transform: scale(1.1);
}
// 加班
.JiaBan {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(36, 0, 255, 0.2);
  color: rgba(36, 0, 255, 1);
  .JiaBanTitle {
  }
  .JiaBanDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(36, 0, 255, 1);
    }
  }
}
.JiaBan:hover {
  transform: scale(1.1);
}
// 出差
.ChuChai {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(255, 167, 40, 0.2);
  color: #ffa728;
  .ChuChaiTitle {
  }
  .ChuChaiDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: #ffa728;
    }
  }
}
.ChuChai:hover {
  transform: scale(1.1);
}
// 异常卡
.YiChang {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(240, 92, 39, 0.2);
  color: rgba(240, 92, 39, 1);
  .YiChangTitle {
  }
  .YiChangDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(240, 92, 39, 1);
    }
  }
}
.YiChang:hover {
  transform: scale(1.1);
}
// 假期
.JiaQi {
  margin: 10px 10px 10px 10px;
  width: 100px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  background: rgba(29, 209, 155, 0.2);
  color: rgba(29, 209, 155, 1);
  .JiaQiTitle {
  }
  .JiaQiDian {
    div {
      width: 4px;
      height: 4px;
      margin-bottom: 2px;
      border-radius: 4px;
      background: rgba(29, 209, 155, 1);
    }
  }
}
.JiaQi:hover {
  transform: scale(1.1);
}
</style>
y∩__∩y 归来
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现简单的日历效果
10-16
主要为大家详细介绍了vue实现简单的日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
亲自动手实现vue日历控件
10-16
主要记录了亲自动手实现vue日历控件的详细过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue原生方式实现日历组件
hyduan_h5的博客
06-02 6283
vue原生实现日历组件
VUE篇之日历组件
最新发布
ae_pppppp的博客
12-13 4935
手写日历组件
使用vue+ElementUI+dayjs实现简单的日历控件
pimyker的博客
06-27 1090
【代码】使用vue+ElementUI+dayjs实现简单的日历控件。
前端Vue制作日历插件FullCalendar
HD The Sky的博客
06-12 7149
Vue使用fullCalendar制作日历
基于vue的日历控件
11-05
日历组件，相关的代码，可以自定义，可以添加事件，vue+javascript
vue实现日历表格（element-ui）
10-14
主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
10-16
主要为大家详细介绍了Vue编写可显示周和月模式的日历，Vue自定义日历内容的显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 自己捣鼓周日程日历组件
weixin_42023748的博客
11-01 837
通过需求，超级课程表app这款软件其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多。原本想找一些第三方插件使用，由于时间充足，而且自己也想封装成一个组件方便以后或许会碰到类似的需求，于是自己手动写了一个日程日历。需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示。：数据量大时，格子显示太长问题，这里进行了优化，如果超过2个就进行展开与收缩操作。js代码 weekTools.js。
《Vue3+Typescript》一个简单的日历组件实现
热门推荐
Oliver尹的博客
07-29 1万+
近来项目中需要用到一个日历组件，由于找了找没有找到合适的，因此决定自己简单动手做一个，项目中肯定比这个复杂的多，这里只是给各个小伙伴一个思路或者说是开发的方向～
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
yehaocheng520的博客
03-17 4636
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
VUE：自定义实现日历表
干饭搬砖两不误。
05-27 7370
关于自定义一个日历表（类似windows的日历）
js实现日期农历与公历的互转
xi_nuo的博客
12-06 1756
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
m0_49017085的博客
04-07 8984
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
v-calendar 日历组件使用&自定义提示内容
jinse29的博客
11-09 3959
最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量大概最后的效果如下图所示，右上角把代办任务数量展示出来vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。
vue实现自定义日历
qq_29677283的博客
05-10 4105
vue日历面板、vue日历、自定义日历。
vue日历插件vue-full-calendar
killerdoubie的博客
10-09 799
解说：简单聊一聊vue日历插件vue-full-calendar - 掘金vue中如何使用vue-full-calendar（完整版）-CSDN博客vue-full-calendar 用法详解 （vue 2.5.2的日历插件）-CSDN博客管网：Demos | FullCalendar
vue实现日历样式
uniquemei的博客
04-20 2115
最近，项目组要求仿照企业微信的打卡功能，实现报工的日历展示功能，看了很多资料，现在此自己总结一下思路，以做记录。 首先看界面效果： 我先描述一下思路：首先判断当前月份一共有几天total，然后找到当月的1号是周几，找到在日历中显示的位置，然后依次往数组里添加对象，有几天就添加几条数据。 一、页面样式布局 <template> <div class="date-page"&...
vue3 手撕日历控件
05-01
vue3 手撕日历控件是一种基于 Vue 3.x 版本实现的可定制化的日历控件，它可以方便地作为独立组件在 Vue 3.x 项目中使用。在实现这个控件时，需要遵循 Vue 3.x 的组件通信及生命周期相关规则，并基于 JavaScript 和 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值