React项目中获取免费波斯历（Shamsi）节假日的方案求助

方案1：本地嵌入开源节假日数据 #

波斯历节假日的日期相对固定，社区有不少维护好的免费开源数据集，你可以直接下载JSON文件放到React项目中，本地读取使用，完全不用依赖外部API。

示例数据格式（匹配需求） #

{
  "1402": [
    {
      "date": "1402/1/1",
      "description": "عیدنوروز"
    },
    {
      "date": "1402/1/2",
      "description": "عیدنوروز"
    },
    {
      "date": "1402/13/12",
      "description": "عید قربان"
    }
  ],
  "1403": [
    {
      "date": "1403/1/1",
      "description": "عیدنوروز"
    }
  ]
}

React中使用示例 #

1. 将上述JSON文件保存为src/data/persian-holidays.json
2. 在组件中导入并使用：

import React from 'react';
import persianHolidays from './data/persian-holidays.json';

const HolidayList = () => {
  const targetYear = "1402";
  const yearHolidays = persianHolidays[targetYear] || [];

  return (
    <div>
      <h2>{targetYear}年波斯历节假日</h2>
      <ul>
        {yearHolidays.map((item, idx) => (
          <li key={idx}>
            {item.date} - {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HolidayList;

方案2：使用开源npm包 #

有免费的npm包专门提供波斯历节假日数据，无需调用外部接口，直接在项目内获取：

示例步骤 #

1. 安装对应包（以persian-holidays为例）：

npm install persian-holidays --save

2. 在React组件中调用：

import React, { useState, useEffect } from 'react';
import { getHolidays } from 'persian-holidays';

const HolidayList = () => {
  const [holidays, setHolidays] = useState([]);

  useEffect(() => {
    // 获取1402年的节假日，并转换为需求格式
    const formattedHolidays = getHolidays(1402).map(item => ({
      date: item.date,
      description: item.title
    }));
    setHolidays(formattedHolidays);
  }, []);

  return (
    <div>
      <h2>1402年波斯历节假日</h2>
      <ul>
        {holidays.map((item, idx) => (
          <li key={idx}>
            {item.date} - {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HolidayList;

方案3：自行计算固定节假日 #

如果需要完全自定义控制，可以基于波斯历日期库，自行定义固定节假日规则：

1. 安装波斯历处理库jalaali-js：

npm install jalaali-js --save

2. 在组件中生成节假日数据：

import React, { useState, useEffect } from 'react';

const generateHolidays = (year) => {
  return [
    // 诺鲁孜节
    { date: `${year}/1/1`, description: "عیدنوروز" },
    { date: `${year}/1/2`, description: "عیدنوروز" },
    { date: `${year}/1/3`, description: "عیدنوروز" },
    // 伊斯兰革命胜利日
    { date: `${year}/11/22`, description: "روز پیروزی انقلاب اسلامی" },
    // 可按需添加更多固定节日
  ];
};

const HolidayList = () => {
  const [holidays, setHolidays] = useState([]);

  useEffect(() => {
    setHolidays(generateHolidays(1402));
  }, []);

  return (
    <div>
      <h2>1402年波斯历节假日</h2>
      <ul>
        {holidays.map((item, idx) => (
          <li key={idx}>
            {item.date} - {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HolidayList;

内容的提问来源于stack exchange，提问作者amirmoghi3