تعريف الحاسبة: هذه حاسبة تحويل وعرض التقويم العربي (هجري ⇄ ميلادي) تعرض تحويلات دقيقة تقريبًا وخريطة شهرية تفاعلية باستخدام Plotly.js لعرض أيام الشهر بالتوازي بين التاريخ الهجري والتاريخ الميلادي.

دليل استخدام حاسبة التقويم الهجري — تحويلات وعرض شهر تفاعلي

لماذا تحتاج هذه الحاسبة؟

تتكرر الحاجة للتحويل بين التاريخين الهجري والميلادي في الحياة اليومية: لحجز مواعيد رسمية، متابعة المناسبات الدينية، أو تنظيم محتوى نشاطاتك. يوفر هذا الأداة واجهة بسيطة لتحويل التاريخ بدقة حسابية، بالإضافة إلى عرض شهري تفاعلي يسهّل رؤية تطابق الأيام بين النظامين.

الميزات الأساسية

• تحويل فوري من التاريخ الميلادي إلى الهجري وبالعكس.
• عرض بصري تفاعلي لشهر هجري أو ميلادي باستخدام Plotly.js (جدول شهري).
• واجهة متجاوبة مصممة لتناسب عمود محتوى موقع ووردبريس (عرض أقصى 720px، ارتفاع المخطط ~520px).
• خلفية بيضاء وتصميم RTL لعرض عربي مناسب.
• أرقام هجريّة معروضة باستخدام الأرقام العربية-الهندية (٠١٢٣…).
• تنبيه واضح في الواجهة: الحاسبة تقديرية للاطلاع العام فقط.

كيفية استخدام الحاسبة — خطوات سريعة

تحويل من ميلادي إلى هجري

1. استخدم حقل التاريخ (Date picker) في المربع الأيسر العلوي.
2. اضغط “حوّل إلى هجري”.
3. ستظهر النتيجة في صندوق النتائج مع التاريخ الهجري بالأرقام العربية-الهندية.

تحويل من هجري إلى ميلادي

1. أدخل السنة والشهر واليوم في الحقول المخصّصة (يمين).
2. اضغط “حوّل إلى ميلادي”.
3. النتيجة تظهر فورًا في صندوق النتائج مع تاريخ ميلادي بصيغة YYYY-MM-DD.

عرض شهر كامل

• لعرض شهر هجري: أدخل السنة والشهر الهجري ثم اضغط “عرض شهر هجري”. ستُبنى خريطة شهرية تعرض كل يوم هجري مع التاريخ الميلادي الموافق في خلية الجدول.
• لعرض شهر ميلادي: اختر تاريخ ميلادي ثم اضغط “عرض شهر ميلادي” لعرض الجدول الشامل لأيام ذلك الشهر.

لماذا استخدمنا Plotly.js؟

Plotly.js يسمح بإنشاء جدول/مخطط تفاعلي مستجيب دون مكتبات إضافية كبيرة. استخدمنا Plotly Table لعرض خلايا جدولية واضحة، قابلة للتكبير والتمرير إن لزم. ميزة أخرى: المرونة في تخصيص الخطوط وحجم الخلايا لتبدو جيدة داخل عمود محتوى في ووردبريس.

ملاحظات تقنية عن الدقة والقيود

• الحاسبة تستخدم خوارزميات تقويمية (تحويل عبر رقم يوم جولياني، وخوارزمية تقويم هجري “جبرية/جدولية”) وهي دقيقة للاستخدام العام، لكنها ليست بديلًا عن التقاويم الرسمية المحلية (مثل تقويم أم القرى الذي يعتمد مراصد فلكية أو مراسيم رسمية في بعض الدول).
• اختلاف يوم واحد ممكن في بعض الحالات الفلكية بسبب بدء شهر القمر فعليًا (الرؤية المحلية للهلال). لذلك أضفنا تحذيرًا واضحًا بالموقع.

أفضل ممارسات النشر في ووردبريس

• ضع الكود داخل بلوك “HTML مخصص” أو في إعدادات القوالب التي تسمح بإدراج HTML/JS.
• الحجم الافتراضي معد ليكون مناسبًا عادةً بين جانبي شريط جانبي (max-width:720px). إن كنت تستخدم سمة بعرض محتوى أضيق، يمكن تقليل max-width إلى 640 أو 600 بكسل.
• لا تنسَ اختبار العرض على الجوال — الواجهة متجاوبة لكن قد تحتاج لرفع ارتفاع calendarPlot أو استخدام CSS مخصّص لتناسب نمط قالبك.

تحسين تجربة المستخدم

• أضف وصفًا مختصرًا أعلى البلوك يشرح أنه “حاسبة تقريبية للاطلاع فقط”.
• إن أردت دقة فلكية أعلى، يمكنك ربط واجهات برمجة التطبيقات الفلكية أو أم القرى للحصول على نتائج رسمية حسب منطقتك. هذا يتطلب تكامل خادم-عميل (server-side) أو استدعاء API خارجي.

مثال عملي

1. افتح صفحة تحتوي الأداة، سترى أن الحاسبة مبنية مسبقًا على تاريخ اليوم.
2. جرّب تحويل 2025-11-02 (ميلادي) إلى هجري — ستظهر النتيجة بالأرقام العربية.
3. اضغط “عرض شهر هجري” بعد ضبط السنة والشهر لرؤية تقويم ذلك الشهر مع الأيام المطابقة ميلاديًا.

التنصيب والدعم

• انسخ الكود أعلاه بالكامل والصقه داخل “HTML مخصص” أو محرر الكود في ووردبريس.
• تأكد من وجود اتصال لمكتبة Plotly (مضمنة عبر CDN في الكود).
• إن رغبت بترجمة عناصر الواجهة أو تخصيص الخطوط (مثال: خط دبي أو عربية أخرى)، عدّل CSS داخل #arabic-calendar-widget.

---

Disclaimer

هذه الحاسبة تقديرية وتعمل بخوارزميات تحويل تقويمية. لا تعتمد عليها فقط للتواريخ الرسمية أو القانونية أو الدينية التي تتطلب توافقًا دقيقًا لرؤية الهلال أو مراسيم رسمية. للاستخدام الرسمي، راجع التقويم الوطني أو جهة الفتوى المختصة أو تقاويم المراصد المعتمدة.

---

FAQ (الأسئلة الشائعة)

س: هل النتائج دقيقة 100%؟
ج: ليست دائمًا. الخوارزميات دقيقة للاستخدام العام، لكن قد يحدث اختلاف يوم واحد في بدء الأشهر الهجرية عندما تعتمد الرؤية الفلكية أو المحلية. للتحقق الرسمي، راجع تقويم أم القرى أو مرجعًا محليًا.

س: هل يعمل الكود على جميع قوالب ووردبريس؟
ج: نعم على القوالب التي تسمح بإدخال HTML/JS في محتوى أو بلوك مخصص. لو منعت سياسات القالب تحميل سكربت خارجي، ضع Plotly محليًا أو استخدم طرق القالب المناسبة.

س: هل يمكن تعديل اللغة أو اتجاه النص؟
ج: نعم، الواجهة معدّة لـ RTL. لتغيير اللغة عدّل النصوص داخل HTML و CSS، ويمكن استخدام خطوط عربية مخصصة عبر إضافة رابط الخط.

س: كيف أحسن دقة الحاسبة لتناسب منطقتي؟
ج: لنعتمد نتائج مراصد/مصادر رسمية، ادمج API تقويم أم القرى أو API فلكي يعيد بداية الأشهر بناءً على الرؤية أو الحساب الفلكي لموقعك الجغرافي.

س: هل يمكن عرض عطلات أو مناسبات دينية؟
ج: نعم — يمكن توسيع الكود لإضافة علامات على خلايا معينة (مثل رمضان/عيد) من مصدر بيانات أو قاعدة بيانات بسيطة، ثم تلوين الخلايا عبر Plotly أو HTML مخصص.