feat: 日历支持节假日调休阴历显示

index.html

@@ -6,7 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>react-tempate</title>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script> -->
   <script src="/lunar.min.js"></script>
 </head>
 

src/pages/calendar/components/monthItem.jsx

@@ -1,22 +1,44 @@
 import React from "react";
 import { Fragment } from "react";
+import clsx from "clsx"
 
 export function MonthItem({ months }) {
-  // const mData = months.getMonth()
-  console.log(months, '8888')
+  function calcLunar(date) {
+    const luna = Lunar.fromDate(new Date(date))
+    return luna.getDayInChinese()
+  }
+  function calcFestival(w) {
+    const festivals = Solar.fromYmd(w.getYear(), w.getMonth(), w.getDay())
+    const result = festivals.getFestivals()
+    return result
+  }
+  function isWork(w) {
+    const holi = HolidayUtil.getHoliday(w.getYear(), w.getMonth(), w.getDay())
+    return holi?.isWork()
+  }
   return <>
     {
-      months.map((item, index) => <ul className="bg-gray-100 relative grid grid-cols-7 text-center z-20" key={index}>
-        <li>日</li>
-        <li>一</li>
-        <li>二</li>
-        <li>三</li>
-        <li>四</li>
-        <li>五</li>
-        <li>六</li>
+      months.map((mon, index) => <ul className="bg-gray-50 relative grid grid-cols-7 auto-rows-max auto-cols-max text-center z-20 py-1" key={index}>
+        <li className="text-slate-900">日</li>
+        <li className="text-slate-900">一</li>
+        <li className="text-slate-900">二</li>
+        <li className="text-slate-900">三</li>
+        <li className="text-slate-900">四</li>
+        <li className="text-slate-900">五</li>
+        <li className="text-slate-900">六</li>
         <h2 className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] text-7xl text-gray-300 text-opacity-80 font-bold z-[-1]">{index + 1}月</h2>
-        {item.map((it, idx) => <Fragment key={idx}>
-          {it.map((is, isx) => <li key={isx}>{is.getDay()}</li>)}
+        {mon.map((week, idx) => <Fragment key={idx}>
+          {week.map((w, isx) => <li key={isx}
+            className='relative h-10 my-2 box-content'>
+            <span className={clsx({ 'text-slate-900': w.getMonth() === index + 1, 'text-slate-400': w.getMonth() !== index + 1 })}>{w.getDay()}</span>
+            <i className={clsx({ 'w-[100%] text-clip overflow-hidden whitespace-nowrap absolute bottom-0.5 left-[50%] translate-x-[-50%] text-xs not-italic': true }
+              , { 'text-slate-400': w.getMonth() !== index + 1 }, { 'text-gray-500': w.getMonth() === index + 1 }, { 'text-rose-500': calcFestival(w).length > 0 })}>
+              {calcFestival(w).length > 0 ? calcFestival(w) : calcLunar(w.toString())}
+            </i>
+            <i className={clsx({ 'absolute top-0.5 right-2 fsizes-10': true }, { 'text-lime-500': isWork(w) === false })}>
+              {isWork(w) === false ? '休' : isWork(w) === true ? '班' : ''}
+            </i>
+          </li>)}
         </Fragment>)}
       </ul>)
     }

src/pages/calendar/index.jsx

@@ -5,21 +5,19 @@ import { useState } from "react";
 export default function Calendar() {
   const [months, setMonths] = useState([])
   useMount(() => {
-    var d = SolarYear.fromDate(new Date());
-    var months = d.getMonths();
+    const d = SolarYear.fromDate(new Date());
+    const months = d.getMonths();
     let monthList = []
-    for (let i = 0, j = months.length; i < j; i++) {
+    for (let i = 0; i < months.length; i++) {
       const weeks = months[i].getWeeks()
       monthList[i] = []
-      console.log(i, months.length, weeks.length)
-      for(let j = 0; j < weeks.length; j++) {
+      for (let j = 0; j < weeks.length; j++) {
         monthList[i].push(weeks[j].getDays())
       }
     }
-    console.log(monthList, '8888999', months)
     setMonths(monthList)
   })
   return <div className="grid grid-cols-3 w-[90%] mx-auto mt-5 mb-5 gap-4">
-    <MonthItem months={months}/>
+    <MonthItem months={months} />
   </div>
 }

tailwind.config.js

@@ -15,7 +15,7 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    fsizes: createFontSize(12, 50),
+    fsizes: createFontSize(10, 50),
     extend: {},
   },
   plugins: [