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

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

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.父组件引用

效果：

样式之后再调~~
参考文章开头的链接，实现按年度进行12个月的日历平铺，并且按数组给值标记工作日和休息日。