手写月课表

已于 2024-06-20 09:49:51 修改
阅读量413 收藏 2
点赞数 8
文章标签： 月课表 农历 日历 法定节假日
于 2024-06-19 17:49:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46490956/article/details/139685685
版权

农历插件：chinese-lunar-calendar - npm，这个插件可以计算农历日期和节气等

安装：

npm install --save chinese-lunar-calendar

使用： 

  import { getLunar } from 'chinese-lunar-calendar';

  let res = getLunar(years, months, day)

/*输出
{ 
  lunarMonth: 12,   //农历月份
  lunarDate: 17,    //农历日期
  isLeap: false,    //是否闰月
  solarTerm: null,  //节气，null代表没有
  lunarYear: '庚午年', //农历年份，年以正月初一开始
  zodiac: '马',     //生肖，生肖以正月初一开始
  dateStr: '腊月十七' //农历中文
}
*/

月历代码，此处只添加了放假的节假日所以没有引入插件，如果你想显示左右假日建议引入插件，像我这样手写有些费力，还有就是关于国家法定假日的显示，目前使用了一个github的博主的json文件，直接放进来的，需要每年在国家国务院更新今年法定假日后手动更新一下json文件,

github地址：GitHub - NateScarlet/holiday-cn: 📅🇨🇳中国法定节假日数据 自动每日抓取国务院公告

<template>
  <div class="timetable h100">
    <div class="timetable-b w100">
      <table class="timetable-content w100">
        <thead>
          <tr>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in showDateArr" :key="index">
            <td v-for="(att, j) in item.record.date" :key="j">
              <!-- 日期 -->
              <div class="daycss">
                <div>{{ att.day }}</div>
                <div>{{ att.lunarCalendar?.dateStr }}</div>
                <div>{{ att.lunarCalendar?.solarTerm }}</div>
                <div v-if="att.isOffDay">
                  <div
                    class="label"
                    style="background-color: #4e5877"
                    v-if="att.isOffDay === 'false'"
                    >班</div
                  >
                  <div class="label" v-if="att.isOffDay === 'true'">休</div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { getLunar } from 'chinese-lunar-calendar';
  import HolidaysJson from './date.json';
  //  当前年
  let years = ref(0);
  //  当前月
  let months = ref(0);
  //  当前天
  let days = ref(0);
  //  本月第一天周几
  let monthDatOne = ref(0);
  // 这个月的总天数
  let alldays = ref(0);
  // 显示格式月份日期
  let showDateArr = ref([]);
  // 添加法定节假日+放假与上班休&班
  const legalHolidaysFn = (data) => {
    // 添加法定节假日
    data.forEach((item) => {
      item.record.date.forEach((att) => {
        if (typeof att == 'object') {
          // 添加休&班
          HolidaysJson.days.forEach((ak) => {
            if (
              ak.date.split('-')[0] == years.value &&
              ak.date.split('-')[1] == months.value &&
              att.day == ak.date.split('-')[2]
            ) {
              att.isOffDay = ak.isOffDay.toString();
            }
          });
          // ----添加节日
          // 1月1日元旦
          if (months.value == 1) {
            if (att.day == 1) {
              att.lunarCalendar.solarTerm = '元旦';
            }
          }
          // 4月5日清明节
          if (months.value == 4) {
            if (att.day == 5) {
              att.lunarCalendar.solarTerm = '清明节';
            }
          }
          // 五月一日劳动节
          if (months.value == 5) {
            if (att.day == 1) {
              att.lunarCalendar.solarTerm = '劳动节';
            }
          }
          // 十月一日国庆节
          if (months.value == 10) {
            if (att.day == 1) {
              att.lunarCalendar.solarTerm = '国庆节';
            }
          }
          // 农历正月初一春节
          if (att.lunarCalendar.dateStr == '正月初一') {
            att.lunarCalendar.solarTerm = '春节';
          }
          //农历正月初五-端午节
          if (att.lunarCalendar.dateStr == '五月初五') {
            att.lunarCalendar.solarTerm = '端午节';
          }
          // 农历八月十五-中秋节
          if (att.lunarCalendar.dateStr == '八月十五') {
            att.lunarCalendar.solarTerm = '中秋节';
          }
        }
      });
    });
    return data;
  };
  //  初始化函数
  const initFn = async () => {
    // 建一个空壳装数据
    let data = [];
    // 拿到当前年月日
    let date = new Date();
    years.value = date.getFullYear();
    months.value = date.getMonth() + 1;
    days.value = date.getDate();
    // 本月总天数
    alldays.value = new Date(years.value, months.value, 0).getDate();
    // 拼接这年这月的第一天字符串--为了获得第一天是周几
    let str = years.value  + '-' + months.value + '-01';
    let monthOnce = new Date(str);
    // 第一天周几
    monthDatOne.value = monthOnce.getDay();
    // 给空壳创建初始数据结构
    for (let i = 0; i < 6; i++) {
      data.push({
        record: {
          date: [],
        },
      });
    }
    // 用来确认只循环一变
    let num = 0;
    // 向初始结构里加数据
    for (let i = 0; i < data.length; i++) {
      for (let k = 1; k <= alldays.value; k++) {
        num += 1;
        // 把上一个月填上
        if (i == 0 && data[0].record.date.length == 0) {
          for (let t = 0; t < monthDatOne.value; t++) {
            if (t + 1 < monthDatOne.value && data[i]?.record.date.length <= 7) {
              data[i]?.record.date.push(' ');
            }
          }
        }
        // 确保只循环一变总天数
        if (num <= alldays.value) {
          if (data[i]?.record.date.length < 7) {
            // 填充数据
            data[i]?.record.date.push({
              day: k, //日期
              lunarCalendar: getLunar(years.value, months.value, k), //利用差价拿到农历和节气等
            });
          } else {
            data[i + 1]?.record.date.push({
              day: k,
              lunarCalendar: getLunar(years.value, months.value, k),
            });
            i++;
          }
        }
      }
    }
    // 处理好的数据结构赋值
    showDateArr.value = legalHolidaysFn(data);
  };
  initFn();
</script>

<style scoped lang="scss">
  .h100 {
    height: 75vh;
  }
  .timetable {
    background-color: #f1f7ff;
    .w100 {
      width: 100% !important;
    }

    .timetable-b {
      height: 100vh;
      height: 100%;
      background-color: #fff;
      overflow: auto;
      .timetable-content {
        height: 100%;
        table-layout: fixed;
        border-collapse: collapse; //设置表格的边框是否被合并为一个单一的边框
        text-align: center;
        color: #333333;
        font-weight: 400;
        font-size: 17px;

        thead {
          height: 100px;

          th {
            border: 2px solid rgba(27, 100, 240, 0.1);
          }
        }
        tbody {
          height: calc(100% - 2px) / 7;

          td {
            padding: 10px;
            border: 2px solid rgba(27, 100, 240, 0.1);
            .dmsjandjs-b {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }
      }
    }
  }
  .daycss {
    display: flex;
    font-size: 14px;
    justify-content: flex-start;
    div {
      margin-right: 10px;
    }
    .label {
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #eb3333;
      color: #fff;
      border-radius: 50%;
    }
  }
  .classCss {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
  }
  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 10px; /* 滚动条的宽度 */
    height: 10px; /* 滚动条的高度，对水平滚动条有效 */
    background-color: #fff; /* 滚动条的背景颜色 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #fff; /* 轨道的背景颜色 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1; /* 滑块的背景颜色 */
    border: 3px solid #fff; /* 滑块的边框和轨道相同的颜色，可以制造“边距”的效果 */
  }

  /* 滚动条滑块：悬停效果 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8; /* 滑块的悬停颜色 */
  }

  /* 滚动条滑块：激活时的效果 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #888888; /* 滑块的激活颜色 */
  }

  /* 滚动条按钮（上下箭头） */
  ::-webkit-scrollbar-button {
    display: none; /* 通常情况下不显示滚动条按钮 */
  }
  .classcountcss {
    color: #000;
    margin: 3px 10px;
  }
</style>

{
  "days": [
        {
            "name": "元旦",
            "date": "2024-01-01",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-04",
            "isOffDay": false
        },
        {
            "name": "春节",
            "date": "2024-02-10",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-11",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-12",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-13",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-14",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-15",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-16",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-17",
            "isOffDay": true
        },
        {
            "name": "春节",
            "date": "2024-02-18",
            "isOffDay": false
        },
        {
            "name": "清明节",
            "date": "2024-04-04",
            "isOffDay": true
        },
        {
            "name": "清明节",
            "date": "2024-04-05",
            "isOffDay": true
        },
        {
            "name": "清明节",
            "date": "2024-04-06",
            "isOffDay": true
        },
        {
            "name": "清明节",
            "date": "2024-04-07",
            "isOffDay": false
        },
        {
            "name": "劳动节",
            "date": "2024-04-28",
            "isOffDay": false
        },
        {
            "name": "劳动节",
            "date": "2024-05-01",
            "isOffDay": true
        },
        {
            "name": "劳动节",
            "date": "2024-05-02",
            "isOffDay": true
        },
        {
            "name": "劳动节",
            "date": "2024-05-03",
            "isOffDay": true
        },
        {
            "name": "劳动节",
            "date": "2024-05-04",
            "isOffDay": true
        },
        {
            "name": "劳动节",
            "date": "2024-05-05",
            "isOffDay": true
        },
        {
            "name": "劳动节",
            "date": "2024-05-11",
            "isOffDay": false
        },
        {
            "name": "端午节",
            "date": "2024-06-10",
            "isOffDay": true
        },
        {
            "name": "中秋节",
            "date": "2024-09-14",
            "isOffDay": false
        },
        {
            "name": "中秋节",
            "date": "2024-09-15",
            "isOffDay": true
        },
        {
            "name": "中秋节",
            "date": "2024-09-16",
            "isOffDay": true
        },
        {
            "name": "中秋节",
            "date": "2024-09-17",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-09-29",
            "isOffDay": false
        },
        {
            "name": "国庆节",
            "date": "2024-10-01",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-02",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-03",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-04",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-05",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-06",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-07",
            "isOffDay": true
        },
        {
            "name": "国庆节",
            "date": "2024-10-12",
            "isOffDay": false
        }
    ]}

最终效果展示：

anuily.
关注
插件_日期_lunar-calendar公历农历转换
qq_43260366的博客
11-02 2456
现在存在某需求，需要将公历、农历日期进行相互转换，在此借助插件完成。
昨天、今天、明天的写法
alwyn0721的博客
07-26 522
最近再试着玩的时候发现了网上一个组件（获取农历）具体如下： 下载组件 chinese-lunar-calendar 1.npm install --save chinese-lunar-calendar 这样就可以再需要的页面引用了，具体如下： <script> import { getLunar } from 'chinese-lunar-calendar' export default { data() { return { getLunarDay: '', .
vue3 获取当前日期的农历（阴历）
weixin_62733705的博客
12-26 1640
第一步，安装 chinese-lunar-calendar 插件。vue3 获取当前日期的农历（阴历）第二步，在所需页面 引入。上面代码即可实现所需功能。下面的图片是ui图的样式。
vue2 获取当前日期的中国农历
ZHJ0305的博客
02-26 263
vue2获取今天中国农历日期
引入农历以及“无法找到模块”报错处理
yxtblog的博客
11-18 623
【代码】引入农历以及“无法找到模块”报错处理。
Chinese Lunar Calendar
05-09
Android calendar application source code,可以使用农历日历记录事件.
基于CNN神经网络的手写数字识别代码和实验报告
01-12
《基于CNN神经网络的手写数字识别实践》 在信息技术领域，深度学习已成为图像识别和模式分析的核心技术之一。本文将围绕“基于CNN（卷积神经网络）神经网络的手写数字识别”这一主题展开，深入探讨如何利用CNN进行...
手写数字识别应用课程设计+python、神经网络+快递填单、号码识别
最新发布
02-27
#### 神经网络在手写数字识别中的应用背景 随着人工智能与机器学习技术的飞速发展，将这些前沿技术应用于更多的实际场景中已成为研究热点。手写数字识别作为计算机视觉领域的一个重要分支，其应用场景广泛，涉及到...
Python课程设计基于卷积神经网络的手写数字识别系统源码.zip
10-15
在本项目中，我们将深入探讨一个基于Python的课程设计，其目标是构建一个手写数字识别系统，利用卷积神经网络（Convolutional Neural Networks, CNNs）进行图像分类。这个系统可以应用于自动读取银行支票上的数字、...
离散数学手写笔记，建议收藏
11-02
- 命题逻辑：真值表、联接词（与、或、非）、蕴含、等价。 - 复合命题的化简与等价关系。 - 量词：全称量词和存在量词，蕴含和等价的量词形式。 3. **函数与关系**： - 函数的定义、性质和图像，一对一、一对多...
基于卷积神经网络的手写数字识别课程设计报告
12-21
《基于卷积神经网络的手写数字识别课程设计报告》 一、引言 手写数字识别是计算机视觉领域的一个基础任务，广泛应用于自动支票识别、邮件分拣系统以及智能家居等领域。随着深度学习技术的发展，尤其是卷积神经网络...
vuefullcalendar一个基于VUE的日历组件
08-11
vue构建的完整日历。不需要jquery。调度事件管理
chinese-lunar-calendar-for-mac, 用于苹果机的农历日历.zip
10-10
chinese-lunar-calendar-for-mac, 用于苹果机的农历日历 calendar.zfdang.com 2. Code 解释这是一个menubar应用，它显示了一个简单的中国农历农历日历。这里应用程序有两种不同的实现： 2.1.WanNianLi这个项目正在使用官方NSStatusIte
自定义日历
weixin_66961876的博客
02-19 552
自定义日历，农历转换
vue2 自定义移动端日历日程组件 可切换年月日周
followly的博客
01-05 3477
一个可以切换年月日周的日历日程组件，用于展示在移动端提供日程服务，点击对应日期展示对应日程
在Vue项目中获取当前日期的农历（阴历）
weixin_44483624的博客
04-06 4112
chinese-lunar-calendar npm安装 npm install --save chinese-lunar-calendar 在vue中的使用 <script> import { getLunar } from 'chinese-lunar-calendar' export default { data() { return { getLunarDay: '', year: new Date().getFullYear(), month: ne
vue 使用组件显示农历日期
宁夏前端工程师，马卫斌，wx：1457508895
11-18 1144
vue 使用组件显示农历日期
vue 获取当前日期的农历（阴历）
laoyaoshilaoyao的博客
04-28 1405
安装chinese-lunar-calendar npm install --save chinese-lunar-calendar <script> import { getLunar } from 'chinese-lunar-calendar' export default { data() { return { getLunarDay: '', year: new Date().getFullYear(), month: new Date().getM
使用vue-lunar-full-calendar插件展示带有农历和节假日的日历
小破孩的博客
11-19 8276
效果图： 使用npm命令安装插件，如下： npm install --save vue-lunar-full-calendar 在需要的页面引入插件，如下： import { LunarFullCalendar } from 'vue-lunar-full-calendar'; import tippy from "tippy.js"; //引入 tippy.js import 'tippy.js/dist/tippy.css';//引入 tippy.js import 'tippy.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值