vue日历(阳历与阴历)模版

<!--日历-->
<template>
  <div class="calendar">
    <div class="header">
      <svg @click="lastYear" t="1696835230584" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="4146" width="40" height="40">
        <path
            d="M602.496 512l338.752 338.752-90.496 90.496L421.504 512l429.248-429.248 90.496 90.496L602.496 512z m-320 0l338.752 338.752-90.496 90.496L101.504 512l429.248-429.248 90.496 90.496L282.496 512z"
            fill="#666666" p-id="4147"></path>
      </svg>
      <svg @click="lastData" t="1696835422566" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="10525" width="40" height="40">
        <path d="M474.496 512l338.752-338.752-90.496-90.496L293.504 512l429.248 429.248 90.496-90.496z" fill="#666666"
              p-id="10526"></path>
      </svg>
      <span class="fontS">
        <div>{{ year }}年{{ month }}月</div>
        <div>{{ lunar }}</div>
      </span>
      <svg @click="nextData" t="1696835373514" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="9493" width="40" height="40">
        <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="9494" fill="#515151"></path>
      </svg>
      <svg @click="nextYear" t="1696835190544" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="4007" width="40" height="40">
        <path
            d="M741.504 512L402.752 173.248l90.496-90.496L922.496 512l-429.248 429.248-90.496-90.496L741.504 512z m-320 0L82.752 173.248l90.496-90.496L602.496 512l-429.248 429.248-90.496-90.496L421.504 512z"
            fill="#666666" p-id="4008"></path>
      </svg>
    </div>
    <div class="body fontS">
      <div v-for=" item in weekData">{{ item }}</div>
      <div v-for="i in monthData" :class="i.type">
        <div>{{ i.value }}</div>
        <div style="font-size: 0.1rem">{{ i.lday }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data() {
    return {
      weekData: ['一', '二', '三', '四', '五', '六', '日'],
      monthData: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      lunar: ''
    }
  },
  mounted() {
    this.getRandomData(this.year, this.month);

  },
  methods: {
    lastYear() {
      this.year--;
      this.monthData = [];
      this.getRandomData(this.year, this.month);
    },
    nextYear() {
      this.year++;
      this.monthData = [];
      this.getRandomData(this.year, this.month);
    },
    lastData() {
      this.month--;
      if (this.month == 0) {
        this.year = parseInt(this.year) - 1;
        this.month = 12;
      }
      if (Number(this.month) < 10) {
        this.month = '0' + this.month;
      }
      this.monthData = [];
      this.getRandomData(this.year, this.month);
    },
    nextData() {
      this.month++;
      if (this.month == 13) {
        this.year = parseInt(this.year) + 1;
        this.month = 1;
      }
      if (Number(this.month) < 10) {
        this.month = '0' + this.month;
      }
      this.monthData = [];
      this.getRandomData(this.year, this.month);
    },
    //  获取任意月份一号是周几,以及任意月的天数
    getFirstDayWeek(year, nowMonth) {
      //获取当前月的上一月
      var year2 = year;
      var month2 = parseInt(nowMonth) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      const preMonth = year2 + "-" + month2;
      //获取上一月有多少天
      const lastDateNum = new Date(Number(year2), Number(month2), 0);
      const lastTimeNUm = lastDateNum.getDate();

      //获取当前月有多少天
      const dateNum = new Date(year, nowMonth, 0);
      const timeNUm = dateNum.getDate();
      //获取当前月一号星期几
      const weekList = [0, 1, 2, 3, 4, 5, 6]
      const res = new Date(nowMonth + '/' + 1 + '/' + year);
      const reNum = weekList[res.getDay()]//获取当前月1号是星期几

      return {
        lastTimeNUm,
        timeNUm,
        reNum
      }
    },
    //  获取任意月的日期数据
    getRandomData(year, nowMonth) {
      const {
        lastTimeNUm,
        timeNUm,
        reNum
      } = this.getFirstDayWeek(year, nowMonth);

      const langth = reNum == 0 ? 6 : (reNum - 1);
      for (let i = lastTimeNUm - langth + 1; i <= lastTimeNUm; i++) {
        const {lday} = this.getLunar(this.year, this.month, i);
        this.monthData.push({
          id: Date.now(),
          value: i,
          festival: '',
          placeHolder: '',
          type: "last-month-day",
          lday
        })
      }
      const date = new Date();
      const nowYear = date.getFullYear();
      const nowMonths = date.getMonth() + 1;
      const nowData = date.getDate();
      let type = 'current-month-day';
      const s = (nowYear + '-' + nowMonths + '-' + nowData);

      for (let i = 1; i <= timeNUm; i++) {
        const y = (this.year + '-' + this.month + '-' + i)
        const {lunar_month_day, lday} = this.getLunar(this.year, this.month, i);
        if (nowData == i) this.lunar = lunar_month_day;
        // console.log((nowYear + '-' + nowMonths + '-' + nowData), (this.year + '-' + this.month + '-' + i))
        type = s == y ? 'current-month-day current-day' : 'current-month-day';
        this.monthData.push({
          id: Date.now(),
          value: i,
          festival: '',
          placeHolder: '',
          type,
          lday
        })
      }
      const datas = 42 - this.monthData.length;
      if (42 - this.monthData.length > 0) {
        for (let i = 1; i <= datas; i++) {
          const {lday} = this.getLunar(this.year, this.month, i);
          this.monthData.push({
            id: Date.now(),
            value: i,
            festival: '',
            placeHolder: '',
            type: "next-month-day",
            lday
          })
        }
      }
      // console.log(this.monthData)
      // console.log(lastTimeNUm, timeNUm, reNum, langth)
    },


    //  获取阴历
    /**获取阴历 start*/
    getLunar(year, nowMonth, day) {
      var nyear;
      var nmonth;
      var nday = -1;
      var nwday;

      var lmonth, lday, lleap; //农历参数
      function Draw() {
        NewTick(year, nowMonth, day);

        var lunar_month_day = lmonth + "月" + lday;
        //需要展示在页面地方
        // console.log("农历日期---", lunar_month_day);
        return {lunar_month_day, lday}
      }


      function NewTick(year, nowMonth, day) {
        let noww = new Date(year + '-' + nowMonth + '-' + day);
        if (noww.getDate() != nday) {
          nyear = noww.getFullYear();
          nmonth = noww.getMonth() + 1;
          nwday = noww.getDay();
          nday = noww.getDate();
          getlunar(); //获取农历
        }
        // nhrs = noww.getHours();
        // nmin = noww.getMinutes();
        // nsec = noww.getSeconds();
        // console.log(nyear, nmonth, nday)
      }


      //阴历函数开始
      var lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
          0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63);

      function lYearDays(y) {
        var i, sum = 348;
        for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
        return (sum + leapDays(y));
      }

      function leapDays(y) {
        if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
        else return (0);
      }

      function leapMonth(y) {
        return (lunarInfo[y - 1900] & 0xf);
      }

      function monthDays(y, m) {
        return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
      }

      function Lunar(y, m, d) {
        var i, leap = 0,
            temp = 0;
        var offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
        for (i = 1900; i < 2050 && offset > 0; i++) {
          temp = lYearDays(i);
          offset -= temp;
        }
        if (offset < 0) {
          offset += temp;
          i--;
        }
        this.year = i;
        leap = leapMonth(i);
        this.isLeap = false;
        for (i = 1; i < 13 && offset > 0; i++) {
          if (leap > 0 && i == (leap + 1) && this.isLeap == false) {
            --i;
            this.isLeap = true;
            temp = leapDays(this.year);
          } else {
            temp = monthDays(this.year, i);
          }
          if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
          offset -= temp;
        }
        if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
          this.isLeap = false;
        } else {
          this.isLeap = true;
          --i;
        }
        if (offset < 0) {
          offset += temp;
          --i;
        }
        this.month = i;
        this.day = offset + 1;
      }

      var nStr1 = new Array('', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二');
      var nStr2 = new Array('初', '十', '廿', '卅', '□');

      function GetcDay(d) {
        var s;
        switch (d) {
          case 10:
            s = '初十';
            break;
          case 20:
            s = '二十';
            break;
          case 30:
            s = '三十';
            break;
          default:
            s = nStr2[Math.floor(d / 10)];
            s += nStr1[d % 10];
            break;
        }
        return (s);
      }

      function GetcMon(m) {
        if (m == 1) return '正';
        else return nStr1[m];
      }

      function getlunar() {
        var lObj = new Lunar(nyear, nmonth - 1, nday);
        lmonth = GetcMon(lObj.month);
        lday = GetcDay(lObj.day);
        lleap = lObj.isLeap;
        if (lleap == 1) {
          lmonth = "闰" + lmonth;
        }
      }

      //阴历函数结束
      return Draw();
    },
    /**获取阴历 end*/
 //  获取阴历节日
    getLunarFestival(lm, ld) {
      /**
       * 计算农历每个月的天数, 参数为存储农历年的16进制
       * @param {Number} ly
       * @return {Array}
       * @eg {Function} lunarYearMonths(0x0b557)
       */
      const lunarYearMonths = function (ly) {
        //从高位第16位(1月)起向右移至低位第5位(12月)添加数组每项
        let monthArr = [];
        for (let i = 0x8000; i > 0x8; i >>= 1) {
          monthArr.push((ly & i) ? 30 : 29);
        }
        //考虑是否有闰月天数
        if (hasLeapMonth(ly)) {
          monthArr.splice(hasLeapMonth(ly), 0, leapMonthDays(ly));
        }
        return monthArr
      }
      // 初始化农历节日数组
      const lunarFestival = new Array(
          "0101 春节",
          "0107 人胜节",
          "0115 元宵节",
          "0120 天穿节",
          "0125 天仓节",
          "0201 中和节",
          "0202 春龙节(龙抬头)",
          "0212 花朝节",
          "0303 上巳节",
          "0408 浴佛节",
          "0505 端午节",
          "0606 晒衣节",
          "0707 乞巧节(七夕)",
          "0715 中元节",
          "0801 天医节",
          "0815 中秋节",
          "0909 重阳节",
          "1001 寒衣节",
          "1015 下元节",
          "1208 腊八节",
          "1224 祭灶节(小年)"
      );

      //阴历函数开始
      var lunarInfo = new Array(
          0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
          0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
          0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
          0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
          0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
          0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0,
          0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
          0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6,
          0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
          0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
          0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
          0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
          0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
          0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
          0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0,
          0x14b63);
      // 计算农历节日
      // ly lm ld 为农历年月日
      let lunar = null;
      lunarFestival.forEach((item, index) => {
        let str = item.split(" ");
        if (str[0] == `${lm < 10 ? "0" + lm : lm}${ld < 10 ? "0" + ld : ld}`) {
          lunar = str[1];
        }
        //部分节日需要手动计算例如春节前一天除夕,清明前一天寒食节等等
        //考虑到闰正月和闰腊月计算相对复杂这里仅做粗略计算,严谨请参照(平气法已过时)定气法具体百度搜索相关资料做调整
        let lymArr = lunarYearMonths(lunarInfo[ly - 1900]);
        if (`${lm}${ld}` == `12${lymArr[lymArr.length - 1]}`) {
          lunar = "除夕";
        }
        return lunar
      })
    },

    //  获取阳历节日
    getSolarFestival() {
      // 初始化公历节日数组(更多公历节日可自行在数组内添加相应的日期和名称即可)
      const gregorianFestival = new Array(
          "0101 元旦",
          "0214 情人节",
          "0307 女生节",
          "0308 妇女节",
          "0312 植树节",
          "0314 白色情人节",
          "0315 消费者权益日",
          "0401 愚人节",
          "0404 复活节",
          "0501 劳动节",
          "0504 青年节",
          "0510 母亲节",
          "0512 护士节",
          "0601 儿童节",
          "0620 父亲节",
          "0701 建党节",
          "0801 建军节",
          "0910 教师节",
          "0928 孔子诞辰",
          "1001 国庆节",
          "1006 老人节",
          "1024 联合国日",
          "1101 万圣节",
          "1125 感恩节",
          "1224 平安夜",
          "1225 圣诞节"
      );
// 计算公历节日
// sy sm sd 为传入年月日
      let gregorian = null;
      gregorianFestival.forEach((item, index) => {
        let str = item.split(" ");
        if (str[0] == `${sm}${sd}`) {
          gregorian = str[1];
        }
      })
      return gregorian
    }
  }
}
</script>

<style scoped>
.calendar {
  width: 7rem;
  height: 8rem;
  border: 1px solid #00afff;
}

.fontS {
  font-size: 0.3rem;
  font-weight: 600;
}

.header {
  width: 7rem;
  height: 1rem;
  border-bottom: 1px solid #00afff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.body {
  display: grid;
  grid-template-columns:repeat(7, 1rem);
  grid-template-rows:repeat(7, 1rem);
}

.body > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.last-month-day {
  color: gray;
}

.current-month-day {
  color: black;
}

.current-day {
  background: pink;
}

.next-month-day {
  color: gray;
}
</style>

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue可以通过使用第三方组件库或自己编写组件来实现日历签到功能。 1. 使用第三方组件库 例如,使用Element UI中的DatePicker组件,可以实现选择日期的功能。在选中日期后,可以将签到状态保存到后端数据库中,再在日历上展示已签到的日期。 2. 自己编写组件 可以使用Vue自带的组件和插件来编写日历签到组件。具体实现方法如下: - 在Vue项目中创建一个Calendar组件; - 使用Vue自带的v-for指令展示日历; - 在每个日期上绑定点击事件,用来切换签到状态; - 将签到状态保存到Vuex或后端数据库中; - 在日历上展示已签到的日期。 下面是一个简单的日历签到组件代码示例: ```html <template> <div class="calendar"> <div class="header">{{ year }}年{{ month }}月</div> <table> <thead> <tr> <th v-for="day in days">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="week in weeks"> <td v-for="date in week" :class="{ active: isSigned(date) }" @click="toggleSign(date)">{{ date }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { year: new Date().getFullYear(), month: new Date().getMonth() + 1, days: ["日", "一", "二", "三", "四", "五", "六"], weeks: [], signedDates: [] }; }, computed: { daysInMonth() { const date = new Date(this.year, this.month, 0); return date.getDate(); } }, mounted() { this.generateCalendar(); }, methods: { generateCalendar() { const firstDay = new Date(this.year, this.month - 1, 1).getDay(); const lastDate = this.daysInMonth; const weeks = []; let week = []; for (let i = 0; i < firstDay; i++) { week.push(""); } for (let i = 1; i <= lastDate; i++) { week.push(i); if (week.length === 7) { weeks.push(week); week = []; } } if (week.length > 0) { for (let i = week.length; i < 7; i++) { week.push(""); } weeks.push(week); } this.weeks = weeks; }, toggleSign(date) { if (this.isSigned(date)) { // 取消签到 const index = this.signedDates.indexOf(date); this.signedDates.splice(index, 1); } else { // 签到 this.signedDates.push(date); } // 将签到状态保存到Vuex或后端数据库中 }, isSigned(date) { return this.signedDates.includes(date); } } }; </script> <style> .calendar { width: 300px; margin: 0 auto; text-align: center; } .header { font-size: 16px; font-weight: bold; margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; } th { height: 30px; line-height: 30px; } td { height: 50px; line-height: 50px; cursor: pointer; } td.active { background-color: #66ccff; color: #fff; } </style> ``` 这个示例中的Calendar组件展示了一个月的日历,并提供了签到功能。你可以根据自己的需求进行修改和扩展。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值