Markdown# Mehdi Akbari Calendar

یک تقویم شمسی (جلالی) حرفه‌ای، زیبا و کاملاً قابل سفارشی‌سازی برای React — ساخته‌شده با توسط مهدی اکبری.

ویژگی‌های کلیدی:

• پشتیبانی کامل از تقویم شمسی و میلادی با سوئیچ آسان
• انتخاب تک تاریخ و بازه (Range Selection)
• DatePicker کامل با popover و بسته شدن هوشمند
• استایل مدرن و مینیمال با CSS Variables
• RTL/LTR هوشمند
• بدون وابستگی سنگین (فقط date-fns و date-fns-jalali)
• تایپ‌اسکریپت کامل
• بیلد ESM + CJS

این پروژه همواره در حال توسعه است — ویژگی‌های جدید، بهبود عملکرد و رفع باگ‌ها به طور مداوم اضافه می‌شوند. پیشنهادات و مشارکت شما بسیار استقبال می‌شود! 🚀

نصب

npm install mehdi-akbari-calendar

# یا با yarn
yarn add mehdi-akbari-calendar

# یا با pnpm
pnpm add mehdi-akbari-calendar
استفاده سریع
1. تقویم مستقل (PersianCalendar)
tsximport { PersianCalendar } from 'mehdi-akbari-calendar/react';
// یا
import { PersianCalendar } from 'mehdi-akbari-calendar/react';

function App() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <div style={{ padding: '50px', direction: 'rtl' }}>
      <PersianCalendar
        initialDate={date ?? new Date()}
        onDateSelect={(selected) => {
          setDate(selected);
          console.log('تاریخ انتخاب شده:', selected);
        }}
      />
    </div>
  );
}
2. DatePicker کامل (PersianDatePicker)
tsximport { PersianDatePicker } from 'mehdi-akbari-calendar/react';
// یا
import { PersianDatePicker } from 'mehdi-akbari-calendar';

function App() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <div style={{ padding: '50px', direction: 'rtl' }}>
      <PersianDatePicker
        initialDate={date}
        onDateSelect={setDate}
        placeholder="انتخاب تاریخ"
      />

      {date && (
        <p style={{ marginTop: '20px' }}>
          تاریخ انتخاب‌شده: {date.toLocaleDateString('fa-IR')}
        </p>
      )}
    </div>
  );
}
ویژگی‌ها

سوئیچ بین تقویم جلالی و میلادی با آیکون زیبا
پشتیبانی از انتخاب بازه (range) با استایل حرفه‌ای
popover هوشمند در DatePicker (بسته شدن با کلیک بیرون)
استایل کاملاً قابل سفارشی‌سازی با CSS Variables
فوتر زیبا با نسخه پکیج و لینک‌های ارتباطی

سفارشی‌سازی استایل
می‌تونی با override کردن CSS Variables استایل رو تغییر بدی:
CSS.prc-container {
  --prc-brand-primary: #10b981;     /* رنگ اصلی سبز */
  --prc-bg-surface: #1f2937;        /* پس‌زمینه تیره */
  --prc-text-primary: #f3f4f6;
  --prc-width: 350px;
}
پروژه در حال توسعه
این پکیج به طور فعال در حال توسعه است. ویژگی‌های آینده:

پشتیبانی از چند انتخاب (multiple dates)
تم‌های آماده (dark, light, custom)
ادغام با فرم‌ها (React Hook Form, Zod)
قابلیت disable تاریخ‌های خاص
localization بیشتر

پیشنهادات، گزارش باگ و pull request بسیار خوشحال‌کننده است! ❤️
ارتباط با من

Gmail: [email protected]
Telegram: @MehdiAkbariDev

لایسنس
MIT © Mehdi Akbari