long-calendar

❗ 目前仅支持 React

🌈 开箱即用

import { LongCalendar, getLongDate, getFestival } from "long-calendar";

function App() {
  return (
    <div className="App">
      <LongCalendar />
    </div>
  );
}

🌻 LongCalendar 支持配置项

interface PropsType {
  value?: "2024-01-01"; // 日历初始值，要求yyyy-mm-dd格式,不传则显示当天日期对应的月份的日历
  cellLength?: Number; // 日历单元格长度
  fontSize?: String; // 格式：12px， 日历字体大小
  infoFontSize?: String; // 格式：12px， 日历详情框字体大小
  infoHeight?: String; // 格式：12px， 日历详情框高度
  infoWidth?: String; // 格式：12px， 日历详情框宽度
  theme?: '金秋'|'冬日'|'盛夏'|'暖春'; // 格式：12px， 日历内置主题。如想自定义样式，建议直接通过类名覆盖样式
}

🔧 提供的 API

getLongDate

根据公历日期返回农历日期以及相关数据

/**
 * 根据公历日期返回农历日期以及相关数据
 * @param  Number 年
 * @param  Number 月
 * @param  Number 日
 * @return Object
 */
import { getLongDate } from "long-calendar";
const date = new Date();
const y = date.getFullYear();
const m = date.getMonth();
const d = date.getDate();
console.log(getLongDate(y, m + 1, 1));

返回值示例

{
  Animal: "龙🐲"; // 生肖
  IDayCn: "廿三"; // 农历日期
  IMonthCn: "三月"; // 农历月份
  Term: null; // 传入日期节气
  astro: "金牛座"; // 传入日期所属星座
  astroFu: "♉"; // 传入日期所属星座符号
  cDay: 1; // 公历日期
  cMonth: 5; // 公历月份
  cYear: 2024; // 公历年
  gzDay: "乙丑"; // 天干地支日
  gzMonth: "戊辰"; // 天干地支月
  gzYear: "甲辰"; // 天干地支年
  isLeap: false; // 传入日期月份是否是闰月
  isTerm: false; // 传入日期当天是否是节气日
  isToday: false; // 传入日期是否是今天
  lDay: 23; //  农历日期-日-数值型
  lMonth: 3; //  农历日期-月-数值型
  lYear: 2024; // 农历日期-年-数值型
  nWeek: 3; // 传入日期星期-数值型
  ncWeek: "星期三"; // 传入日期星期
}

getFestival

根据公历日期和农历日期返回当天对应的节日

/**
 * 根据公历日期和农历日期返回当天对应的节日
 * @param  String 0501 公历对应月日
 * @param  String 三月廿三 农历对应月日
 * @return [节日]
 */
import { getFestival } from "long-calendar";

console.log(getFestival("0501", "三月廿三"));

返回值示例

["劳动节"];