react-jalali-events-calendar 1.0.1

package/README.md

@@ -0,0 +1,159 @@
+### 📅 Persian Calendar for React & Next.js
+A fully customizable Persian calendar component for React and Next.js with support for events, holidays, tooltips, RTL layout, and modern UI.
+
+## ✨ Features:
+
+- ✅ Accurate Gregorian ↔ Jalali date conversion
+- ✅ Event & holiday support
+- ✅ Holiday detection
+- ✅ Tooltip with Persian & Gregorian dates
+- ✅ Highlights today’s date
+- ✅ Shows previous & next month days
+- ✅ Fully responsive
+- ✅ RTL-first design
+- ✅ External month navigation control
+- ✅ No external calendar dependencies
+
+
+## 📦 Installation:
+
+```bash
+npm install react-persian-calendar
+```
+or
+```bash
+yarn add react-persian-calendar
+```
+
+## ⚠️ Tailwind CSS Requirement
+
+This calendar **requires Tailwind CSS** to be installed in your project.
+
+All styles, layout, responsiveness, and tooltips are built using Tailwind utility classes.
+Without Tailwind CSS, the calendar **will not render correctly**.
+
+### Install Tailwind CSS
+
+If you are using Next.js or React, follow the official guide:
+
+👉 https://tailwindcss.com/docs/installation
+
+After installation, make sure Tailwind is properly configured in your project.
+
+## 🚀 Basic Usage:
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "react-persian-calendar";
+
+function App() {
+  const [currentDate, setCurrentDate] = useState("");
+  const [goNext, setGoNext] = useState(false);
+  const [goPrev, setGoPrev] = useState(false);
+
+  return (
+    <Calendar
+      goNext={goNext}
+      goPrev={goPrev}
+      setCurrentDate={setCurrentDate}
+      setNext={() => setGoNext(false)}
+      setPrev={() => setGoPrev(false)}
+    />
+  );
+}
+```
+## 🧠 Props:
+
+| Prop                        | Type                       | Description                           |
+| --------------------------- | -------------------------- | ------------------------------------- |
+| `setCurrentDate`            | `(value: string) => void`  | Returns formatted current date string |
+| `goNext`                    | `boolean`                  | Navigate to next month                |
+| `goPrev`                    | `boolean`                  | Navigate to previous month            |
+| `setNext`                   | `(value: boolean) => void` | Reset next navigation trigger         |
+| `setPrev`                   | `(value: boolean) => void` | Reset previous navigation trigger     |
+| `showEvents`                | `boolean`                  | Enable event tooltips                 |
+| `headerColor`               | `string`                   | Header background color               |
+| `headerTextColor`           | `string`                   | Header text color                     |
+| `daysBgColor`               | `string`                   | Current month days background         |
+| `daysTextColor`             | `string`                   | Current month days text color         |
+| `holidaysBgColor`           | `string`                   | Holiday background color              |
+| `holidayTextColor`          | `string`                   | Holiday text color                    |
+| `currentDayBgColor`         | `string`                   | Today background color                |
+| `currentDaytextColor`       | `string`                   | Today text color                      |
+| `outsideMonthDaysBg`        | `string`                   | Outside month days background         |
+| `outsideMonthDaysTextColor` | `string`                   | Outside month days text color         |
+| `borderColor`               | `string`                   | Calendar border color                 |
+
+## 🎨 Full Customization Example:
+
+```tsx
+<Calendar
+  setCurrentDate={setCurrentDate}
+  goNext={goNext}
+  goPrev={goPrev}
+  setNext={setGoNext}
+  setPrev={setGoPrev}
+  showEvents={true}
+  headerColor="#F1F4F9"
+  headerTextColor="#111827"
+  daysBgColor="#ffffff"
+  daysTextColor="#111827"
+  holidaysBgColor="#FEE2E2"
+  holidayTextColor="#DC2626"
+  currentDayBgColor="#2563EB"
+  currentDaytextColor="#ffffff"
+  outsideMonthDaysBg="#F9FAFB"
+  outsideMonthDaysTextColor="#9CA3AF"
+  borderColor="#D1D5DB"
+/>
+```
+## 📡 Events Data Source:
+By default, the calendar fetches events from:
+```http
+GET https://badesaba.ir/api/site/getDataCalendar/{month}/{year}
+```
+
+## Expected Response Shape:
+```ts
+type Event = {
+  event: string;
+  holiday: boolean;
+};
+
+type CalendarData = {
+  date: string; // YYYY-MM-DD (Gregorian)
+  events: Event[];
+};
+```
+## 🧭 Event Tooltip
+
+- Appears on hover
+- Displays:
+  - Jalali date
+  - Gregorian date
+  - Event list
+- Holidays are visually highlighted
+
+
+
+## 🛠 Built With:
+- React
+- Next.js (App Router compatible)
+- TypeScript
+- Tailwind CSS
+- RTL layout support
+
+## ⚠️ Important Notes:
+This component must be used inside a Client Component
+Required at the top of the file:
+```tsx
+"use client";
+```
+
+## 📄 License:
+MIT License
+Free for personal and commercial use.
+
+## ❤️ Contributing:
+Issues and Pull Requests are welcome!
+Feel free to improve or extend this calendar 🌱

package/dist/index.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    setCurrentDate: (value: string) => void;
+    goNext: boolean;
+    goPrev: boolean;
+    headerColor?: string;
+    headerTextColor?: string;
+    showEvents?: boolean;
+    holidaysBgColor?: string;
+    daysTextColor?: string;
+    currentDayBgColor?: string;
+    currentDaytextColor?: string;
+    holidayTextColor?: string;
+    daysBgColor?: string;
+    outsideMonthDaysBg?: string;
+    outsideMonthDaysTextColor?: string;
+    borderColor?: string;
+    setNext: (value: boolean) => void;
+    setPrev: (value: boolean) => void;
+};
+declare function Calendar({ setCurrentDate, headerColor, showEvents, goNext, goPrev, headerTextColor, setNext, daysBgColor, setPrev, holidaysBgColor, daysTextColor, holidayTextColor, currentDayBgColor, currentDaytextColor, borderColor, outsideMonthDaysBg, outsideMonthDaysTextColor, }: Props): react_jsx_runtime.JSX.Element;
+
+export { Calendar };

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    setCurrentDate: (value: string) => void;
+    goNext: boolean;
+    goPrev: boolean;
+    headerColor?: string;
+    headerTextColor?: string;
+    showEvents?: boolean;
+    holidaysBgColor?: string;
+    daysTextColor?: string;
+    currentDayBgColor?: string;
+    currentDaytextColor?: string;
+    holidayTextColor?: string;
+    daysBgColor?: string;
+    outsideMonthDaysBg?: string;
+    outsideMonthDaysTextColor?: string;
+    borderColor?: string;
+    setNext: (value: boolean) => void;
+    setPrev: (value: boolean) => void;
+};
+declare function Calendar({ setCurrentDate, headerColor, showEvents, goNext, goPrev, headerTextColor, setNext, daysBgColor, setPrev, holidaysBgColor, daysTextColor, holidayTextColor, currentDayBgColor, currentDaytextColor, borderColor, outsideMonthDaysBg, outsideMonthDaysTextColor, }: Props): react_jsx_runtime.JSX.Element;
+
+export { Calendar };

package/dist/index.js

@@ -0,0 +1,434 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Calendar: () => Calendar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Calendar.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function gregorianToJalali(gy, gm, gd) {
+  const g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
+  const gy2 = gm > 2 ? gy + 1 : gy;
+  let days = 355666 + 365 * gy + Math.floor((gy2 + 3) / 4) - Math.floor((gy2 + 99) / 100) + Math.floor((gy2 + 399) / 400) + gd + g_d_m[gm - 1];
+  let jy = -1595 + 33 * Math.floor(days / 12053);
+  days %= 12053;
+  jy += 4 * Math.floor(days / 1461);
+  days %= 1461;
+  if (days > 365) {
+    jy += Math.floor((days - 1) / 365);
+    days = (days - 1) % 365;
+  }
+  let jm, jd;
+  if (days < 186) {
+    jm = 1 + Math.floor(days / 31);
+    jd = 1 + days % 31;
+  } else {
+    jm = 7 + Math.floor((days - 186) / 30);
+    jd = 1 + (days - 186) % 30;
+  }
+  return [jy, jm, jd];
+}
+function jalaliToGregorian(jy, jm, jd) {
+  jy += 1595;
+  let days = -355668 + 365 * jy + Math.floor(jy / 33) * 8 + Math.floor((jy % 33 + 3) / 4) + jd + (jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186);
+  let gy = 400 * Math.floor(days / 146097);
+  days %= 146097;
+  if (days > 36524) {
+    gy += 100 * Math.floor(--days / 36524);
+    days %= 36524;
+    if (days >= 365) days++;
+  }
+  gy += 4 * Math.floor(days / 1461);
+  days %= 1461;
+  if (days > 365) {
+    gy += Math.floor((days - 1) / 365);
+    days = (days - 1) % 365;
+  }
+  let gd = days + 1;
+  const sal_a = [
+    0,
+    31,
+    gy % 4 === 0 && gy % 100 !== 0 || gy % 400 === 0 ? 29 : 28,
+    31,
+    30,
+    31,
+    30,
+    31,
+    31,
+    30,
+    31,
+    30,
+    31
+  ];
+  let gm;
+  for (gm = 0; gm < 13 && gd > sal_a[gm]; gm++) gd -= sal_a[gm];
+  return [gy, gm, gd];
+}
+function isLeapJalaliYear(jy) {
+  const fm = jy % 33;
+  return fm === 1 || fm === 5 || fm === 9 || fm === 13 || fm === 17 || fm === 22 || fm === 26 || fm === 30;
+}
+function jalaliMonthLength(jy, jm) {
+  if (jm <= 6) return 31;
+  if (jm <= 11) return 30;
+  return isLeapJalaliYear(jy) ? 30 : 29;
+}
+function Calendar({
+  setCurrentDate,
+  headerColor,
+  showEvents,
+  goNext,
+  goPrev,
+  headerTextColor,
+  setNext,
+  daysBgColor,
+  setPrev,
+  holidaysBgColor,
+  daysTextColor,
+  holidayTextColor,
+  currentDayBgColor,
+  currentDaytextColor,
+  borderColor,
+  outsideMonthDaysBg,
+  outsideMonthDaysTextColor
+}) {
+  const gregorianMonthsFa = [
+    "",
+    "\u0698\u0627\u0646\u0648\u06CC\u0647",
+    "\u0641\u0648\u0631\u06CC\u0647",
+    "\u0645\u0627\u0631\u0633",
+    "\u0622\u0648\u0631\u06CC\u0644",
+    "\u0645\u0647",
+    "\u0698\u0648\u0626\u0646",
+    "\u0698\u0648\u0626\u06CC\u0647",
+    "\u0627\u0648\u062A",
+    "\u0633\u067E\u062A\u0627\u0645\u0628\u0631",
+    "\u0627\u06A9\u062A\u0628\u0631",
+    "\u0646\u0648\u0627\u0645\u0628\u0631",
+    "\u062F\u0633\u0627\u0645\u0628\u0631"
+  ];
+  const now = /* @__PURE__ */ new Date();
+  const tehranOffset = 3.5;
+  const utc = now.getTime() + now.getTimezoneOffset() * 6e4;
+  const tehranDate = new Date(utc + 36e5 * tehranOffset);
+  const [gy, gm, gd] = [
+    tehranDate.getFullYear(),
+    tehranDate.getMonth() + 1,
+    tehranDate.getDate()
+  ];
+  const [todayYear, todayMonth, todayDate] = gregorianToJalali(gy, gm, gd);
+  const [currentYear, setCurrentYear] = (0, import_react.useState)(todayYear);
+  const [currentMonth, setCurrentMonth] = (0, import_react.useState)(todayMonth);
+  const [calendarData, setCalendarData] = (0, import_react.useState)([]);
+  const weekDays = [
+    "\u0634\u0646\u0628\u0647",
+    "\u06CC\u06A9\u0634\u0646\u0628\u0647",
+    "\u062F\u0648\u0634\u0646\u0628\u0647",
+    "\u0633\u0647\u200C\u0634\u0646\u0628\u0647",
+    "\u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647",
+    "\u067E\u0646\u062C\u200C\u0634\u0646\u0628\u0647",
+    "\u062C\u0645\u0639\u0647"
+  ];
+  (0, import_react.useEffect)(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `https://badesaba.ir/api/site/getDataCalendar/${currentMonth}/${currentYear}`
+        );
+        const data = await response.json();
+        setCalendarData(data);
+      } catch {
+        console.log("Error fetching calendar data:");
+      }
+    };
+    fetchData();
+  }, [currentMonth, currentYear]);
+  (0, import_react.useEffect)(() => {
+    const weekDays2 = [
+      "\u0634\u0646\u0628\u0647",
+      "\u06CC\u06A9\u0634\u0646\u0628\u0647",
+      "\u062F\u0648\u0634\u0646\u0628\u0647",
+      "\u0633\u0647\u200C\u0634\u0646\u0628\u0647",
+      "\u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647",
+      "\u067E\u0646\u062C\u0634\u0646\u0628\u0647",
+      "\u062C\u0645\u0639\u0647"
+    ];
+    const months = [
+      "\u0641\u0631\u0648\u0631\u062F\u06CC\u0646",
+      "\u0627\u0631\u062F\u06CC\u0628\u0647\u0634\u062A",
+      "\u062E\u0631\u062F\u0627\u062F",
+      "\u062A\u06CC\u0631",
+      "\u0645\u0631\u062F\u0627\u062F",
+      "\u0634\u0647\u0631\u06CC\u0648\u0631",
+      "\u0645\u0647\u0631",
+      "\u0622\u0628\u0627\u0646",
+      "\u0622\u0630\u0631",
+      "\u062F\u06CC",
+      "\u0628\u0647\u0645\u0646",
+      "\u0627\u0633\u0641\u0646\u062F"
+    ];
+    const now2 = /* @__PURE__ */ new Date();
+    const tehranOffset2 = 3.5;
+    const utc2 = now2.getTime() + now2.getTimezoneOffset() * 6e4;
+    const tehranDate2 = new Date(utc2 + 36e5 * tehranOffset2);
+    const [gy2, gm2, gd2] = [
+      tehranDate2.getFullYear(),
+      tehranDate2.getMonth() + 1,
+      tehranDate2.getDate()
+    ];
+    const [jy, jm, jd] = gregorianToJalali(gy2, gm2, gd2);
+    const weekdayIndex = tehranDate2.getDay();
+    const weekdayName = weekDays2[(weekdayIndex + 1) % 7];
+    const monthName = months[jm - 1];
+    setCurrentDate(`${weekdayName}\u060C ${jd} ${monthName} ${jy}`);
+  }, [currentMonth, currentYear]);
+  const days = (0, import_react.useMemo)(() => {
+    const result = [];
+    const daysInMonth = jalaliMonthLength(currentYear, currentMonth);
+    const [startGy, startGm, startGd] = jalaliToGregorian(
+      currentYear,
+      currentMonth,
+      1
+    );
+    const startDate = new Date(startGy, startGm - 1, startGd);
+    const firstDayOfWeek = (startDate.getDay() + 1) % 7;
+    let prevMonth = currentMonth - 1;
+    let prevYear = currentYear;
+    if (prevMonth < 1) {
+      prevMonth = 12;
+      prevYear--;
+    }
+    const prevDaysInMonth = jalaliMonthLength(prevYear, prevMonth);
+    for (let i = 0; i < firstDayOfWeek; i++) {
+      const date = prevDaysInMonth - firstDayOfWeek + 1 + i;
+      result.push({
+        year: prevYear,
+        month: prevMonth,
+        date,
+        currentMonth: false
+      });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      result.push({
+        year: currentYear,
+        month: currentMonth,
+        date: i,
+        currentMonth: true
+      });
+    }
+    let nextMonth = currentMonth + 1;
+    let nextYear = currentYear;
+    if (nextMonth > 12) {
+      nextMonth = 1;
+      nextYear++;
+    }
+    let nextDate = 1;
+    while (result.length < 42) {
+      result.push({
+        year: nextYear,
+        month: nextMonth,
+        date: nextDate++,
+        currentMonth: false
+      });
+    }
+    return result;
+  }, [currentYear, currentMonth]);
+  const handlePrevMonth = (0, import_react.useCallback)(() => {
+    let newMonth = currentMonth - 1;
+    let newYear = currentYear;
+    if (newMonth < 1) {
+      newMonth = 12;
+      newYear--;
+    }
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+    setPrev(false);
+  }, [currentMonth, currentYear]);
+  const handleNextMonth = (0, import_react.useCallback)(() => {
+    let newMonth = currentMonth + 1;
+    let newYear = currentYear;
+    if (newMonth > 12) {
+      newMonth = 1;
+      newYear++;
+    }
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+    setNext(false);
+  }, [currentMonth, currentYear]);
+  (0, import_react.useEffect)(() => {
+    if (goNext) {
+      handleNextMonth();
+    }
+    if (goPrev) {
+      handlePrevMonth();
+    }
+  }, [goNext, goPrev, handleNextMonth, handlePrevMonth]);
+  const calendarMap = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    calendarData.forEach((item) => {
+      map.set(item.date, item.events);
+    });
+    return map;
+  }, [calendarData]);
+  const getEventsForDate = (year, month, date) => {
+    var _a;
+    const [gy2, gm2, gd2] = jalaliToGregorian(year, month, date);
+    const key = `${gy2}-${String(gm2).padStart(2, "0")}-${String(gd2).padStart(
+      2,
+      "0"
+    )}`;
+    return (_a = calendarMap.get(key)) != null ? _a : [];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto h-full flex flex-col", dir: "rtl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          ...headerTextColor ? { color: headerTextColor } : {},
+          ...headerColor ? { backgroundColor: headerColor } : { backgroundColor: "#F1F4F9" },
+          ...borderColor ? { borderColor } : { borderColor: "#d9d7e0" }
+        },
+        className: `grid-cols-7  hidden 350:grid text-center bg-[#F1F4F9] border border-b-0  font-semibold rounded-t-[10px] py-2.5`,
+        children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "350:text-[13px]", children: day }, index))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          backgroundColor: headerColor ? headerColor : "#F1F4F9"
+        },
+        className: `grid-cols-7 grid 350:hidden text-center bg-[#F1F4F9] font-semibold rounded-t-[10px] py-2.5`,
+        children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-12 350:hidden", children: day[0] }, index))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: borderColor ? { borderColor } : { borderColor: "#d9d7e0" },
+        className: "grid grid-cols-7 flex-1  border-l-0 border-b-0 border",
+        children: days.map((d, i) => {
+          const events = getEventsForDate(d.year, d.month, d.date);
+          const isHolidayDay = events.some((event) => event.holiday);
+          const columnIndex = i % 7;
+          let tooltipPosition = "";
+          if (columnIndex <= 1) {
+            tooltipPosition = "right-0";
+          } else if (columnIndex >= 5) {
+            tooltipPosition = "left-0";
+          } else {
+            tooltipPosition = "left-1/2 -translate-x-1/2";
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                ...!d.currentMonth && outsideMonthDaysBg ? { backgroundColor: outsideMonthDaysBg } : {},
+                ...!d.currentMonth && outsideMonthDaysTextColor ? { color: outsideMonthDaysTextColor } : !d.currentMonth ? { color: "#99a1af " } : {},
+                ...daysBgColor && d.currentMonth ? { backgroundColor: daysBgColor } : {},
+                ...daysTextColor && d.currentMonth ? { color: daysTextColor } : {},
+                ...holidayTextColor && isHolidayDay && d.currentMonth ? { color: holidayTextColor } : {},
+                ...isHolidayDay && holidaysBgColor && d.currentMonth ? { backgroundColor: holidaysBgColor } : {},
+                ...d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth && currentDayBgColor ? { backgroundColor: currentDayBgColor } : {},
+                ...d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth && currentDaytextColor ? { backgroundColor: currentDaytextColor } : {},
+                ...borderColor ? { borderColor } : { borderColor: "#d9d7e0" }
+              },
+              className: `
+       border-r-0 border-t-0 border p-[5px] 
+      flex justify-center items-center 390:text-14 390:p-[10px] 700:p-[15px] 
+      relative text-12 group
+      ${d.currentMonth ? "" : ""}
+      ${d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth ? "bg-blue-500 text-white" : ""}
+      ${isHolidayDay && d.currentMonth ? "text-red-500" : ""}
+    `,
+              children: [
+                d.date,
+                showEvents && d.currentMonth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: `
+          absolute hidden group-hover:block
+          bg-white border z-50 border-gray-300 overflow-hidden rounded shadow-lg
+          top-full mt-2 w-[220px] text-sm text-right ${tooltipPosition}
+        `,
+                    children: (() => {
+                      const [gy2, gm2, gd2] = jalaliToGregorian(
+                        d.year,
+                        d.month,
+                        d.date
+                      );
+                      const gregorianMonthName = gregorianMonthsFa[gm2];
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            className: `
+                  flex p-2 justify-between mb-2 pb-2 
+                  bg-linear-to-r from-[#00A1EE] to-[#1349E6] font-semibold text-white
+                  ${isHolidayDay ? "from-red-500 via-red-600 to-rose-700" : ""}
+                `,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: weekDays[i % 7] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                                d.year,
+                                "/",
+                                d.month,
+                                "/",
+                                d.date
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-[11px] px-2 text-gray-700 mb-2 pb-2 border-b border-gray-200", children: [
+                          gd2,
+                          " ",
+                          gregorianMonthName,
+                          " ",
+                          gy2
+                        ] }),
+                        events.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2 pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "list-disc pr-4 flex flex-col", children: events.map((event, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "li",
+                          {
+                            className: `text-10 ${isHolidayDay ? "text-red-600" : "text-[#23242e]"}`,
+                            children: event.event
+                          },
+                          index
+                        )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-10 p-2 pt-0 text-[#23242e]", children: "\u0631\u0648\u06CC\u062F\u0627\u062F\u06CC \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F" })
+                      ] });
+                    })()
+                  }
+                )
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calendar
+});

package/dist/index.mjs

@@ -0,0 +1,407 @@
+// src/Calendar.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function gregorianToJalali(gy, gm, gd) {
+  const g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
+  const gy2 = gm > 2 ? gy + 1 : gy;
+  let days = 355666 + 365 * gy + Math.floor((gy2 + 3) / 4) - Math.floor((gy2 + 99) / 100) + Math.floor((gy2 + 399) / 400) + gd + g_d_m[gm - 1];
+  let jy = -1595 + 33 * Math.floor(days / 12053);
+  days %= 12053;
+  jy += 4 * Math.floor(days / 1461);
+  days %= 1461;
+  if (days > 365) {
+    jy += Math.floor((days - 1) / 365);
+    days = (days - 1) % 365;
+  }
+  let jm, jd;
+  if (days < 186) {
+    jm = 1 + Math.floor(days / 31);
+    jd = 1 + days % 31;
+  } else {
+    jm = 7 + Math.floor((days - 186) / 30);
+    jd = 1 + (days - 186) % 30;
+  }
+  return [jy, jm, jd];
+}
+function jalaliToGregorian(jy, jm, jd) {
+  jy += 1595;
+  let days = -355668 + 365 * jy + Math.floor(jy / 33) * 8 + Math.floor((jy % 33 + 3) / 4) + jd + (jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186);
+  let gy = 400 * Math.floor(days / 146097);
+  days %= 146097;
+  if (days > 36524) {
+    gy += 100 * Math.floor(--days / 36524);
+    days %= 36524;
+    if (days >= 365) days++;
+  }
+  gy += 4 * Math.floor(days / 1461);
+  days %= 1461;
+  if (days > 365) {
+    gy += Math.floor((days - 1) / 365);
+    days = (days - 1) % 365;
+  }
+  let gd = days + 1;
+  const sal_a = [
+    0,
+    31,
+    gy % 4 === 0 && gy % 100 !== 0 || gy % 400 === 0 ? 29 : 28,
+    31,
+    30,
+    31,
+    30,
+    31,
+    31,
+    30,
+    31,
+    30,
+    31
+  ];
+  let gm;
+  for (gm = 0; gm < 13 && gd > sal_a[gm]; gm++) gd -= sal_a[gm];
+  return [gy, gm, gd];
+}
+function isLeapJalaliYear(jy) {
+  const fm = jy % 33;
+  return fm === 1 || fm === 5 || fm === 9 || fm === 13 || fm === 17 || fm === 22 || fm === 26 || fm === 30;
+}
+function jalaliMonthLength(jy, jm) {
+  if (jm <= 6) return 31;
+  if (jm <= 11) return 30;
+  return isLeapJalaliYear(jy) ? 30 : 29;
+}
+function Calendar({
+  setCurrentDate,
+  headerColor,
+  showEvents,
+  goNext,
+  goPrev,
+  headerTextColor,
+  setNext,
+  daysBgColor,
+  setPrev,
+  holidaysBgColor,
+  daysTextColor,
+  holidayTextColor,
+  currentDayBgColor,
+  currentDaytextColor,
+  borderColor,
+  outsideMonthDaysBg,
+  outsideMonthDaysTextColor
+}) {
+  const gregorianMonthsFa = [
+    "",
+    "\u0698\u0627\u0646\u0648\u06CC\u0647",
+    "\u0641\u0648\u0631\u06CC\u0647",
+    "\u0645\u0627\u0631\u0633",
+    "\u0622\u0648\u0631\u06CC\u0644",
+    "\u0645\u0647",
+    "\u0698\u0648\u0626\u0646",
+    "\u0698\u0648\u0626\u06CC\u0647",
+    "\u0627\u0648\u062A",
+    "\u0633\u067E\u062A\u0627\u0645\u0628\u0631",
+    "\u0627\u06A9\u062A\u0628\u0631",
+    "\u0646\u0648\u0627\u0645\u0628\u0631",
+    "\u062F\u0633\u0627\u0645\u0628\u0631"
+  ];
+  const now = /* @__PURE__ */ new Date();
+  const tehranOffset = 3.5;
+  const utc = now.getTime() + now.getTimezoneOffset() * 6e4;
+  const tehranDate = new Date(utc + 36e5 * tehranOffset);
+  const [gy, gm, gd] = [
+    tehranDate.getFullYear(),
+    tehranDate.getMonth() + 1,
+    tehranDate.getDate()
+  ];
+  const [todayYear, todayMonth, todayDate] = gregorianToJalali(gy, gm, gd);
+  const [currentYear, setCurrentYear] = useState(todayYear);
+  const [currentMonth, setCurrentMonth] = useState(todayMonth);
+  const [calendarData, setCalendarData] = useState([]);
+  const weekDays = [
+    "\u0634\u0646\u0628\u0647",
+    "\u06CC\u06A9\u0634\u0646\u0628\u0647",
+    "\u062F\u0648\u0634\u0646\u0628\u0647",
+    "\u0633\u0647\u200C\u0634\u0646\u0628\u0647",
+    "\u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647",
+    "\u067E\u0646\u062C\u200C\u0634\u0646\u0628\u0647",
+    "\u062C\u0645\u0639\u0647"
+  ];
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `https://badesaba.ir/api/site/getDataCalendar/${currentMonth}/${currentYear}`
+        );
+        const data = await response.json();
+        setCalendarData(data);
+      } catch {
+        console.log("Error fetching calendar data:");
+      }
+    };
+    fetchData();
+  }, [currentMonth, currentYear]);
+  useEffect(() => {
+    const weekDays2 = [
+      "\u0634\u0646\u0628\u0647",
+      "\u06CC\u06A9\u0634\u0646\u0628\u0647",
+      "\u062F\u0648\u0634\u0646\u0628\u0647",
+      "\u0633\u0647\u200C\u0634\u0646\u0628\u0647",
+      "\u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647",
+      "\u067E\u0646\u062C\u0634\u0646\u0628\u0647",
+      "\u062C\u0645\u0639\u0647"
+    ];
+    const months = [
+      "\u0641\u0631\u0648\u0631\u062F\u06CC\u0646",
+      "\u0627\u0631\u062F\u06CC\u0628\u0647\u0634\u062A",
+      "\u062E\u0631\u062F\u0627\u062F",
+      "\u062A\u06CC\u0631",
+      "\u0645\u0631\u062F\u0627\u062F",
+      "\u0634\u0647\u0631\u06CC\u0648\u0631",
+      "\u0645\u0647\u0631",
+      "\u0622\u0628\u0627\u0646",
+      "\u0622\u0630\u0631",
+      "\u062F\u06CC",
+      "\u0628\u0647\u0645\u0646",
+      "\u0627\u0633\u0641\u0646\u062F"
+    ];
+    const now2 = /* @__PURE__ */ new Date();
+    const tehranOffset2 = 3.5;
+    const utc2 = now2.getTime() + now2.getTimezoneOffset() * 6e4;
+    const tehranDate2 = new Date(utc2 + 36e5 * tehranOffset2);
+    const [gy2, gm2, gd2] = [
+      tehranDate2.getFullYear(),
+      tehranDate2.getMonth() + 1,
+      tehranDate2.getDate()
+    ];
+    const [jy, jm, jd] = gregorianToJalali(gy2, gm2, gd2);
+    const weekdayIndex = tehranDate2.getDay();
+    const weekdayName = weekDays2[(weekdayIndex + 1) % 7];
+    const monthName = months[jm - 1];
+    setCurrentDate(`${weekdayName}\u060C ${jd} ${monthName} ${jy}`);
+  }, [currentMonth, currentYear]);
+  const days = useMemo(() => {
+    const result = [];
+    const daysInMonth = jalaliMonthLength(currentYear, currentMonth);
+    const [startGy, startGm, startGd] = jalaliToGregorian(
+      currentYear,
+      currentMonth,
+      1
+    );
+    const startDate = new Date(startGy, startGm - 1, startGd);
+    const firstDayOfWeek = (startDate.getDay() + 1) % 7;
+    let prevMonth = currentMonth - 1;
+    let prevYear = currentYear;
+    if (prevMonth < 1) {
+      prevMonth = 12;
+      prevYear--;
+    }
+    const prevDaysInMonth = jalaliMonthLength(prevYear, prevMonth);
+    for (let i = 0; i < firstDayOfWeek; i++) {
+      const date = prevDaysInMonth - firstDayOfWeek + 1 + i;
+      result.push({
+        year: prevYear,
+        month: prevMonth,
+        date,
+        currentMonth: false
+      });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      result.push({
+        year: currentYear,
+        month: currentMonth,
+        date: i,
+        currentMonth: true
+      });
+    }
+    let nextMonth = currentMonth + 1;
+    let nextYear = currentYear;
+    if (nextMonth > 12) {
+      nextMonth = 1;
+      nextYear++;
+    }
+    let nextDate = 1;
+    while (result.length < 42) {
+      result.push({
+        year: nextYear,
+        month: nextMonth,
+        date: nextDate++,
+        currentMonth: false
+      });
+    }
+    return result;
+  }, [currentYear, currentMonth]);
+  const handlePrevMonth = useCallback(() => {
+    let newMonth = currentMonth - 1;
+    let newYear = currentYear;
+    if (newMonth < 1) {
+      newMonth = 12;
+      newYear--;
+    }
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+    setPrev(false);
+  }, [currentMonth, currentYear]);
+  const handleNextMonth = useCallback(() => {
+    let newMonth = currentMonth + 1;
+    let newYear = currentYear;
+    if (newMonth > 12) {
+      newMonth = 1;
+      newYear++;
+    }
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+    setNext(false);
+  }, [currentMonth, currentYear]);
+  useEffect(() => {
+    if (goNext) {
+      handleNextMonth();
+    }
+    if (goPrev) {
+      handlePrevMonth();
+    }
+  }, [goNext, goPrev, handleNextMonth, handlePrevMonth]);
+  const calendarMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    calendarData.forEach((item) => {
+      map.set(item.date, item.events);
+    });
+    return map;
+  }, [calendarData]);
+  const getEventsForDate = (year, month, date) => {
+    var _a;
+    const [gy2, gm2, gd2] = jalaliToGregorian(year, month, date);
+    const key = `${gy2}-${String(gm2).padStart(2, "0")}-${String(gd2).padStart(
+      2,
+      "0"
+    )}`;
+    return (_a = calendarMap.get(key)) != null ? _a : [];
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto h-full flex flex-col", dir: "rtl", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...headerTextColor ? { color: headerTextColor } : {},
+          ...headerColor ? { backgroundColor: headerColor } : { backgroundColor: "#F1F4F9" },
+          ...borderColor ? { borderColor } : { borderColor: "#d9d7e0" }
+        },
+        className: `grid-cols-7  hidden 350:grid text-center bg-[#F1F4F9] border border-b-0  font-semibold rounded-t-[10px] py-2.5`,
+        children: weekDays.map((day, index) => /* @__PURE__ */ jsx("p", { className: "350:text-[13px]", children: day }, index))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: headerColor ? headerColor : "#F1F4F9"
+        },
+        className: `grid-cols-7 grid 350:hidden text-center bg-[#F1F4F9] font-semibold rounded-t-[10px] py-2.5`,
+        children: weekDays.map((day, index) => /* @__PURE__ */ jsx("p", { className: "text-12 350:hidden", children: day[0] }, index))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: borderColor ? { borderColor } : { borderColor: "#d9d7e0" },
+        className: "grid grid-cols-7 flex-1  border-l-0 border-b-0 border",
+        children: days.map((d, i) => {
+          const events = getEventsForDate(d.year, d.month, d.date);
+          const isHolidayDay = events.some((event) => event.holiday);
+          const columnIndex = i % 7;
+          let tooltipPosition = "";
+          if (columnIndex <= 1) {
+            tooltipPosition = "right-0";
+          } else if (columnIndex >= 5) {
+            tooltipPosition = "left-0";
+          } else {
+            tooltipPosition = "left-1/2 -translate-x-1/2";
+          }
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                ...!d.currentMonth && outsideMonthDaysBg ? { backgroundColor: outsideMonthDaysBg } : {},
+                ...!d.currentMonth && outsideMonthDaysTextColor ? { color: outsideMonthDaysTextColor } : !d.currentMonth ? { color: "#99a1af " } : {},
+                ...daysBgColor && d.currentMonth ? { backgroundColor: daysBgColor } : {},
+                ...daysTextColor && d.currentMonth ? { color: daysTextColor } : {},
+                ...holidayTextColor && isHolidayDay && d.currentMonth ? { color: holidayTextColor } : {},
+                ...isHolidayDay && holidaysBgColor && d.currentMonth ? { backgroundColor: holidaysBgColor } : {},
+                ...d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth && currentDayBgColor ? { backgroundColor: currentDayBgColor } : {},
+                ...d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth && currentDaytextColor ? { backgroundColor: currentDaytextColor } : {},
+                ...borderColor ? { borderColor } : { borderColor: "#d9d7e0" }
+              },
+              className: `
+       border-r-0 border-t-0 border p-[5px] 
+      flex justify-center items-center 390:text-14 390:p-[10px] 700:p-[15px] 
+      relative text-12 group
+      ${d.currentMonth ? "" : ""}
+      ${d.year === todayYear && d.month === todayMonth && d.date === todayDate && d.currentMonth ? "bg-blue-500 text-white" : ""}
+      ${isHolidayDay && d.currentMonth ? "text-red-500" : ""}
+    `,
+              children: [
+                d.date,
+                showEvents && d.currentMonth && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `
+          absolute hidden group-hover:block
+          bg-white border z-50 border-gray-300 overflow-hidden rounded shadow-lg
+          top-full mt-2 w-[220px] text-sm text-right ${tooltipPosition}
+        `,
+                    children: (() => {
+                      const [gy2, gm2, gd2] = jalaliToGregorian(
+                        d.year,
+                        d.month,
+                        d.date
+                      );
+                      const gregorianMonthName = gregorianMonthsFa[gm2];
+                      return /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: `
+                  flex p-2 justify-between mb-2 pb-2 
+                  bg-linear-to-r from-[#00A1EE] to-[#1349E6] font-semibold text-white
+                  ${isHolidayDay ? "from-red-500 via-red-600 to-rose-700" : ""}
+                `,
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: weekDays[i % 7] }),
+                              /* @__PURE__ */ jsxs("span", { children: [
+                                d.year,
+                                "/",
+                                d.month,
+                                "/",
+                                d.date
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "text-[11px] px-2 text-gray-700 mb-2 pb-2 border-b border-gray-200", children: [
+                          gd2,
+                          " ",
+                          gregorianMonthName,
+                          " ",
+                          gy2
+                        ] }),
+                        events.length > 0 ? /* @__PURE__ */ jsx("div", { className: "p-2 pt-0", children: /* @__PURE__ */ jsx("ul", { className: "list-disc pr-4 flex flex-col", children: events.map((event, index) => /* @__PURE__ */ jsx(
+                          "li",
+                          {
+                            className: `text-10 ${isHolidayDay ? "text-red-600" : "text-[#23242e]"}`,
+                            children: event.event
+                          },
+                          index
+                        )) }) }) : /* @__PURE__ */ jsx("p", { className: "text-10 p-2 pt-0 text-[#23242e]", children: "\u0631\u0648\u06CC\u062F\u0627\u062F\u06CC \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F" })
+                      ] });
+                    })()
+                  }
+                )
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+}
+export {
+  Calendar
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-jalali-events-calendar",
+  "version": "1.0.1",
+  "description": "Persian (Jalali) calendar for React",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "tailwindcss": ">=3.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}