vue2实现日历12个月平铺,显示工作日休息日

这篇具有很好参考价值的文章主要介绍了vue2实现日历12个月平铺,显示工作日休息日。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考:https://blog.csdn.net/weixin_40292154/article/details/125312368
1.组件DateCalendar.vue,sass改为less

<template>
  <div class="cc-calendar">
    <div class="calendar-title">
      <span>{{ year }}年{{ month + 1 }}月</span>
    </div>
    <ul class="calendar-week">
      <li
        v-for="(item, index) in calendarTitleArr"
        :key="index"
        class="week-item"
      >
        {{ item }}
      </li>
    </ul>
    <ul class="calendar-view">
      <!-- 动态设置背景颜色 -->
      <li
        v-for="(item, index) in visibleCalendar"
        :key="index"
        class="date-view"
        :style="{
          background:
            handleData(item.date) && isCurrentMonth(item.date)
              ? handleData(item.date).color
              : !isCurrentMonth(item.date)
              ? '#EAF2F2'
              : '#BFBFBF',
        }"
      >
        <span
          class="date-day"
          :class="[{ 'opacity-class': !isCurrentMonth(item.date) }]"
        >
          {{ item.day }}
        </span>
        <span class="calendar-num">
          {{
            handleData(item.date) && isCurrentMonth(item.date)
              ? handleData(item.date).pollution
              : ""
          }}
        </span>
      </li>
    </ul>
    <!-- <div class="color-box">
      <div v-for="item in colorList" :key="item.value">
        <span :style="{ background: item.value }"></span>
        <span>{{ item.name }}</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  getNewDate,
  getDate,
  formatDate,
  colorList,
  handleAQIColor,
} from "@/util.js";
export default {
  name: "date-calendar",
  props: {
    year: {
      type: [String, Number],
      default: 2022,
    },
    month: {
      type: [String, Number],
      default: 0,
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },

    handleClick: Function,
  },
  data() {
    return {
      calendarTitleArr: ["一", "二", "三", "四", "五", "六", "日"],
      colorList,
    };
  },
  computed: {
    visibleCalendar() {
      let calendatArr = [];
      let { year, month } = getNewDate(getDate(this.year, this.month, 1));

      let currentFirstDay = getDate(year, month, 1);

      // 获取当前月第一天星期几
      let weekDay = currentFirstDay.getDay();
      let startTime = null;
      if (weekDay == 0) {
        // 当月第一天是星期天
        startTime = currentFirstDay - 6 * 24 * 60 * 60 * 1000;
      } else {
        startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000;
      }
      // let monthDayNum;
      // 当第一天是周五 周六 周日 这个月绘制42天数据 否则为35天
      // if (weekDay == 5 || weekDay == 6 || weekDay == 0) {
      //   monthDayNum = 42;
      // } else {
      //   monthDayNum = 35;
      // }
      // for (let i = 0; i < monthDayNum; i++) {
      // 为了页面整齐排列 一并绘制42天
      for (let i = 0; i < 42; i++) {
        calendatArr.push({
          date: new Date(startTime + i * 24 * 60 * 60 * 1000),
          // year: year,
          // month: month + 1,
          year: new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear(),
          month: new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth() + 1,
          day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
        });
      }
      return calendatArr;
    },
  },
  methods: {
    handleData(date) {
      // const data = [
      //   {
      //     time: "2023-08-01",
      //     pollution: "工作日",
      //     value: "1",
      //   },
      //   {
      //     time: "2023-05-02",
      //     pollution: "休息日",
      //     value: "0",
      //   },
      //   // {
      //   //   time: "2022-03-03",
      //   //   pollution: "PM10",
      //   //   value: "123",
      //   // },
      //   // {
      //   //   time: "2022-05-05",
      //   //   pollution: "SO2",
      //   //   value: "186",
      //   // },
      //   // {
      //   //   time: "2022-09-05",
      //   //   pollution: "NO",
      //   //   value: "256",
      //   // },
      //   // {
      //   //   time: "2022-12-12",
      //   //   pollution: "CO",
      //   //   value: "400",
      //   // },
      // ]
      const data = this.list;
      data.forEach((item) => {
        if (item.pollution === "无") item.pollution = "";
        if (!item.value && item.value !== 0) {
          item.color = "#bfbfbf";
          return;
        }
        let list = colorList.filter(
          (itm) => itm.name == handleAQIColor(item.value)
        );
        item.color = list[0].value;
      });
      let { year, month, day } = getNewDate(date);
      let dateTime = year + "-" + formatDate(month + 1) + "-" + formatDate(day);
      let list = null;
      data.forEach((item) => {
        if (item.time == dateTime) {
          list = item;
        }
      });
      return list;
    },
    // 是否是当前月
    isCurrentMonth(date) {
      let { year: currentYear, month: currentMonth } = getNewDate(
        getDate(this.year, this.month, 1)
      );
      let { year, month } = getNewDate(date);
      return currentYear == year && currentMonth == month;
    },
  },
  created() {},
};
</script>

<style lang="less" scope>
body,
ul,
ol,
li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

.cc-calendar {
  width: 441px;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 29px;

  .calendar-title {
    width: 100%;
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    color: #061a19;
    text-align: center;
    margin-bottom: 19px;
  }

  .calendar-week {
    display: flex;
    height: 28px;
    line-height: 28px;
    border: 1px solid #14c3ba;
    border-right: none;
    border-left: none;
    margin-bottom: 2px;

    .week-item {
      width: 67px;
      text-align: center;
      font-size: 14px;
      font-family: "Source Han Sans CN";
      color: #061a19;
      font-weight: 400;
    }
  }

  .calendar-view {
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #e4e7ea;

    .date-view {
      width: 63px;
      height: 38px;
      border-right: 2px solid #e4e7ea;
      border-bottom: 2px solid #e4e7ea;
      box-sizing: border-box;
      position: relative;

      .date-day {
        padding: 8px;
        font-size: 12px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #062927;
      }

      .calendar-num {
        position: absolute;
        left: 14px;
        bottom: 0;
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #062927;
      }
    }

    .opacity-class {
      opacity: 0.5;
    }
  }

  .color-box {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    > div {
      display: flex;
      align-items: center;
      justify-content: center;

      > span:first-child {
        width: 30px;
        height: 14px;
      }

      > span:last-child {
        font-size: 14px;
        font-weight: 500;
        color: #1d2f2e;
      }
    }

    span {
      display: inline-block;
      width: 30px;
      margin-right: 1px;
      text-align: center;
    }
  }
}
</style>



2.util.js

export const getNewDate = (date) => {
    let year = date.getFullYear();
    let month = date.getMonth();
    let day = date.getDate();
    return {
      year,
      month,
      day,
    };
  };
  
  export const getDate = (year, month, day) => {
    return new Date(year, month, day);
  };
  
  export const formatDate = (date) => {
    date = Number(date);
    return date < 10 ? `0${date}` : date;
  };
  
  export const colorList = [
    {
      name: "工作日",
      value: "#74B925",
    },
    {
      name: "休息日",
      value: "#F5E31C",
    }
  ];
  
  export const handleAQIColor = (value) => {
    // value = +value;
    let grade = "工作日";
    switch (true) {
      case value == "1":
        grade = "工作日";
        break;
      case value == "0":
        grade = "休息日";
        break;
      default:
        grade = "无";
        break;
    }
    return grade;
  };
  

3.父组件引用

<template>
  <div>
    <!-- Your template code goes here -->
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
    <!-- 渲染12个月 -->
    <el-dialog :visible.sync="dialogVisble" width="80%" height="400px">
      <div class="dialog-content">
        <!-- 对话框中的内容 -->
        <!-- 如果内容较多,超出对话框高度,将会出现滚动条 -->
        <date-calendar
          year="2023"
          :month="index"
          v-for="(item, index) in 12"
          :key="index"
          :list="pollutionData"
          style="float: left; margin-right: 10px"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DateCalendar from "@/components/DateCalendar.vue";
export default {
  components: {
    "date-calendar": DateCalendar,
  },
  data() {
    return {
      dialogVisble: false,
      message: [],
      pollutionData: [
        {
          time: "2023-01-02",
          pollution: "休息日",
          value: "0",
        },
        {
          time: "2023-01-01",
          pollution: "工作日",
          value: "1",
        },
      ],
    };
  },
  methods: {
    changeMessage() {
      this.dialogVisble = true;
    },
  },
};
</script>

<style scoped>
/* Your component-specific styles go here */
h1 {
  color: blue;
}
.dialog-content {
  max-height: 300px; /* 设置最大高度,超过该高度将出现滚动条 */
  overflow-y: auto; /* 添加垂直滚动条 */
  padding: 10px; /* 可选:为内容添加一些内边距,使样式更美观 */
}
</style>

效果:
vue 日历月平铺开展示,vue,开发语言,前端,less
样式之后再调~~
参考文章开头的链接,实现按年度进行12个月的日历平铺,并且按数组给值标记工作日和休息日。文章来源地址https://www.toymoban.com/news/detail-807126.html

到了这里,关于vue2实现日历12个月平铺,显示工作日休息日的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element-ui月份范围选择器,禁用未来月份,跨度为12个月

    用得vue2的写法哦, 效果如下图: 直接上代码: 引用ElementUI的月份组件: 参考地址: https://blog.csdn.net/ITERCHARLIE/article/details/127246715

    2024年02月06日
    浏览(45)
  • 基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框

    场景:因为有个需求就是鼠标经过可多选的 el-select 选择器时,需要有个气泡框显示已选的内容,其实 el-tooltip 气泡框可以满足需求,就是用 el-tooltip 气泡框来包裹 el-select 选择器,但是当选择器一个也没选中,即内容为空时不应该也显示气泡框,有点影响美观。应该就是若内

    2024年02月13日
    浏览(48)
  • Vue2显示动态添加表单

    提交方法:  

    2024年02月09日
    浏览(34)
  • Vue2.0针对设备调节显示内容方法

    一晚上完成0.2.2、0.3.0、0.3.1三个版本的更新,很高兴,总结一下 项目地址: 穆音博客 文章首发地址:Vue针对设备调节显示 总体来说有两种方法,其一是css的媒体查询,另一种是vue-mq库进行对设备断点,从而区分不同的设备,我这里用的是mq库进行。以下是使用方法: 使用

    2024年02月11日
    浏览(48)
  • 记录-Vue移动端日历设计与实现

    选择月份和选择年份与日期做了条件渲染,切换方式是点击顶部时间切换选项 日数据的显示一共42条数据,先获取当前月的总天数,将每个月的天数保存在一个数组里,然后根据传入的参数返回相应的天数, 因为有闰年的存在,2月会是29天,所以做了闰年的判断.然后获取每周的第一天

    2023年04月26日
    浏览(35)
  • Mavon-Editor - vue2 前端显示

    在做毕设的时候想到能不能在前端页面支持 markdown 语法,现在来复现一下出现的问题,以及解决方案。 这里推荐 MavonEdit 因为我感觉这个做的相对比较完善一些。 这里就比较简单了,直接向后端发送请求。后端再存储到数据库当中,无需做数据处理,存到数据库就是以文本

    2024年04月16日
    浏览(30)
  • 《Vue3+Typescript》一个简单的日历组件实现

    这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 目录 一、前言 二、效果图 三、核心思路 四、代码实现 4.1 本月日期

    2024年02月14日
    浏览(42)
  • Vue中的日历组件 Calendar 实现 考勤打卡记录

    实现效果图 1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。

    2024年01月22日
    浏览(59)
  • vue2嵌入高德地图选择地址后显示地址和经纬度

    以高德地图为里,申请key,选择js api服务,获取key和密钥. vue2项目代码引入相关依赖: 封装成组件: 页面引用:

    2024年01月20日
    浏览(49)
  • golang生成12个月

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包