{"id":151,"date":"2026-06-15T10:38:34","date_gmt":"2026-06-15T10:38:34","guid":{"rendered":"https:\/\/oks.digital\/?page_id=151"},"modified":"2026-08-19T16:22:33","modified_gmt":"2026-08-19T16:22:33","slug":"hijri-date-converter","status":"publish","type":"page","link":"https:\/\/oks.digital\/ar\/hijri-date-converter\/","title":{"rendered":"\u0645\u062d\u0648\u0644 \u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0647\u062c\u0631\u064a"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ==========================================\n   HIJRI DATE CONVERTER - COMPLETE STYLING\n========================================== *\/\n\n\n\/* ------------------------------------------\n   MAIN CONVERTER CARD\n------------------------------------------ *\/\n\n.it-hijri-converter-card {\n  background: #ffffff;\n  border: 1px solid #e5ebe7;\n  border-radius: 22px;\n  padding: 28px;\n  box-shadow: 0 12px 35px rgba(15, 81, 50, 0.07);\n}\n\n.it-tool-intro {\n  color: #66756b;\n  margin: 0 0 22px;\n}\n\n\n\/* ------------------------------------------\n   CONVERSION TABS\n------------------------------------------ *\/\n\n.it-converter-tabs {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px;\n  background: #f3f7f4;\n  padding: 5px;\n  border-radius: 14px;\n  margin: 22px 0;\n}\n\n.it-converter-tab {\n  border: 0;\n  background: transparent;\n  color: #55625a;\n  padding: 13px 14px;\n  border-radius: 10px;\n  font-size: 15px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.it-converter-tab:hover {\n  background: #ffffff;\n  color: #0f5132;\n}\n\n.it-converter-tab.is-active {\n  background: #0f5132;\n  color: #ffffff;\n  box-shadow: 0 5px 14px rgba(15, 81, 50, 0.18);\n}\n\n\n\/* ------------------------------------------\n   CONVERTER PANEL\n------------------------------------------ *\/\n\n.it-converter-panel {\n  margin-top: 20px;\n}\n\n.it-converter-panel[hidden] {\n  display: none !important;\n}\n\n.it-converter-panel label {\n  display: block;\n  margin: 0 0 7px;\n  color: #162018;\n  font-weight: 700;\n}\n\n\n\/* ------------------------------------------\n   INPUTS\n------------------------------------------ *\/\n\n.it-tool-page .it-input {\n  width: 100%;\n  min-height: 48px;\n  padding: 11px 13px;\n  border: 1px solid #d9e1dc;\n  border-radius: 10px;\n  background: #ffffff;\n  color: #162018;\n  font-size: 16px;\n  box-sizing: border-box;\n}\n\n.it-tool-page .it-input:focus {\n  outline: none;\n  border-color: #0f5132;\n  box-shadow: 0 0 0 3px rgba(15, 81, 50, 0.10);\n}\n\n\n\/* Hijri Day \/ Month \/ Year *\/\n\n.it-hijri-input-grid {\n  display: grid;\n  grid-template-columns: 0.7fr 1.5fr 0.9fr;\n  gap: 12px;\n  margin-bottom: 20px;\n}\n\n\n\/* ------------------------------------------\n   CONVERTER BUTTONS\n------------------------------------------ *\/\n\n.it-converter-actions {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-top: 18px;\n}\n\n.it-hijri-converter-card .it-btn {\n  cursor: pointer;\n}\n\n.it-tool-page .it-btn.it-primary {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n  border: 1px solid #0f5132;\n}\n\n.it-tool-page .it-btn.it-primary:hover,\n.it-tool-page .it-btn.it-primary:focus {\n  background: #0b3f27 !important;\n  color: #ffffff !important;\n  border-color: #0b3f27;\n}\n\n\n\/* ------------------------------------------\n   RESULT CONTAINER\n------------------------------------------ *\/\n\n#hijriResult {\n  background: linear-gradient(180deg, #ffffff, #f8fcf9);\n  border: 1px solid #dfe8e2;\n  border-radius: 22px;\n  padding: 28px;\n  box-shadow: 0 12px 35px rgba(15, 81, 50, 0.06);\n}\n\n\n\/* Initial result *\/\n\n.it-result-placeholder {\n  text-align: center;\n  padding: 45px 20px;\n  color: #66756b;\n}\n\n.it-result-placeholder strong {\n  display: block;\n  color: #162018;\n  font-size: 18px;\n  margin-bottom: 8px;\n}\n\n.it-result-placeholder p {\n  margin: 0;\n}\n\n\n\/* ------------------------------------------\n   CONVERTED RESULT\n------------------------------------------ *\/\n\n.it-hijri-result-box {\n  text-align: center;\n}\n\n.it-result-label {\n  display: inline-block;\n  background: #eaf6ef;\n  color: #0f5132;\n  padding: 6px 13px;\n  border-radius: 999px;\n  font-size: 14px;\n  font-weight: 800;\n  margin-bottom: 16px;\n}\n\n\n\/* Big day number *\/\n\n.it-hijri-main-date,\n.it-gregorian-main-date {\n  font-size: clamp(52px, 7vw, 78px);\n  font-weight: 900;\n  line-height: 1;\n  color: #0f5132;\n  margin-top: 5px;\n}\n\n\n\/* Month *\/\n\n.it-hijri-month-name,\n.it-gregorian-month-name {\n  font-size: 28px;\n  font-weight: 800;\n  line-height: 1.25;\n  color: #162018;\n  margin-top: 9px;\n}\n\n\n\/* Year *\/\n\n.it-hijri-year,\n.it-gregorian-year {\n  font-size: 20px;\n  color: #66756b;\n  margin-top: 5px;\n}\n\n\n\/* ------------------------------------------\n   ARABIC HIJRI RESULT\n------------------------------------------ *\/\n\n.it-hijri-arabic-result,\n.it-hijri-arabic {\n  max-width: 440px;\n  margin: 20px auto 5px;\n  padding: 14px 18px;\n  background: #f4faf6;\n  border: 1px solid #e3eee7;\n  border-radius: 12px;\n\n  color: #0f5132;\n  font-size: clamp(22px, 4vw, 28px);\n  font-weight: 700;\n  line-height: 1.7;\n\n  direction: rtl;\n  text-align: center;\n}\n\n\n\/* ------------------------------------------\n   RESULT DETAILS\n------------------------------------------ *\/\n\n.it-result-divider {\n  height: 1px;\n  background: #e5ebe7;\n  margin: 22px 0;\n}\n\n.it-result-weekday {\n  color: #162018;\n  font-size: 18px;\n  font-weight: 800;\n  margin-bottom: 6px;\n}\n\n.it-gregorian-result {\n  color: #162018;\n  font-size: 21px;\n  font-weight: 700;\n}\n\n.it-converted-from {\n  color: #66756b;\n  font-size: 14px;\n  margin-bottom: 7px;\n}\n\n.it-hijri-secondary-date {\n  color: #162018;\n  font-size: 20px;\n  font-weight: 800;\n}\n\n\n\/* ------------------------------------------\n   UMM AL-QURA METHOD BADGE\n------------------------------------------ *\/\n\n.it-calendar-method {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n\n  margin-top: 20px;\n  padding: 8px 13px;\n\n  background: #eef7f1;\n  border: 1px solid #dbe9df;\n  border-radius: 999px;\n\n  color: #58665e;\n  font-size: 14px;\n}\n\n.it-calendar-method strong {\n  color: #0f5132;\n}\n\n.it-result-disclaimer {\n  max-width: 520px;\n  margin: 12px auto 0;\n  color: #66756b;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n\n\/* ------------------------------------------\n   COPY \/ SHARE BUTTONS\n------------------------------------------ *\/\n\n.it-result-actions {\n  display: flex;\n  justify-content: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-top: 22px;\n}\n\n.it-result-actions .it-btn {\n  cursor: pointer;\n}\n\n\n\/* ------------------------------------------\n   LOADING\n------------------------------------------ *\/\n\n.it-converter-loading {\n  padding: 45px 20px;\n  text-align: center;\n  color: #0f5132;\n  font-weight: 700;\n}\n\n\n\/* ------------------------------------------\n   ERROR \/ INFO MESSAGE\n------------------------------------------ *\/\n\n.it-converter-message {\n  text-align: center;\n  padding: 35px 20px;\n}\n\n.it-converter-message span {\n  display: block;\n  font-size: 30px;\n  margin-bottom: 8px;\n}\n\n.it-converter-message p {\n  margin: 0;\n}\n\n.it-converter-message.error {\n  color: #8a3324;\n}\n\n\n\/* ==========================================\n   12 HIJRI MONTHS\n========================================== *\/\n\n.it-hijri-month-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  margin-top: 22px;\n}\n\n.it-hijri-month-item {\n  background: #ffffff;\n  border: 1px solid #e5ebe7;\n  border-radius: 14px;\n  padding: 16px;\n  transition: all 0.2s ease;\n}\n\n.it-hijri-month-item:hover {\n  border-color: #c7dbce;\n  box-shadow: 0 8px 22px rgba(15, 81, 50, 0.07);\n  transform: translateY(-2px);\n}\n\n.it-hijri-month-item strong {\n  display: block;\n  margin-bottom: 7px;\n  color: #162018;\n}\n\n.it-hijri-month-item span {\n  display: block;\n  color: #0f5132;\n  font-size: 19px;\n  line-height: 1.5;\n  direction: rtl;\n}\n\n\n\/* ==========================================\n   RELATED ISLAMIC TOOLS\n========================================== *\/\n\n.it-related-tools {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n  margin-top: 22px;\n}\n\n.it-related-tools .it-card {\n  display: block;\n  width: auto;\n  min-width: 0;\n  height: auto;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.it-related-tools .it-card h3 {\n  margin: 0 0 8px;\n}\n\n.it-related-tools .it-card p {\n  margin: 0;\n}\n\n\n\/* ==========================================\n   MOBILE\n========================================== *\/\n\n@media (max-width: 767px) {\n\n  .it-hijri-converter-card,\n  #hijriResult {\n    padding: 20px;\n    border-radius: 18px;\n  }\n\n\n  \/* Tabs *\/\n\n  .it-converter-tabs {\n    grid-template-columns: 1fr;\n  }\n\n  .it-converter-tab {\n    width: 100%;\n    font-size: 15px;\n  }\n\n\n  \/* Hijri fields *\/\n\n  .it-hijri-input-grid {\n    grid-template-columns: 1fr;\n    gap: 14px;\n  }\n\n\n  \/* Converter buttons *\/\n\n  .it-converter-actions {\n    flex-direction: column;\n  }\n\n  .it-converter-actions .it-btn {\n    width: 100%;\n    text-align: center;\n  }\n\n\n  \/* Result *\/\n\n  .it-hijri-main-date,\n  .it-gregorian-main-date {\n    font-size: 58px;\n  }\n\n  .it-hijri-month-name,\n  .it-gregorian-month-name {\n    font-size: 24px;\n  }\n\n  .it-hijri-arabic-result,\n  .it-hijri-arabic {\n    font-size: 22px;\n    padding: 12px;\n  }\n\n\n  \/* Copy \/ Share *\/\n\n  .it-result-actions {\n    flex-direction: column;\n  }\n\n  .it-result-actions .it-btn {\n    width: 100%;\n    text-align: center;\n  }\n\n\n  \/* Hijri month cards *\/\n\n  .it-hijri-month-grid {\n    grid-template-columns: 1fr;\n  }\n\n\n  \/* Related tools *\/\n\n  .it-related-tools {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\/* ==========================================\n   TABLET\n========================================== *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  .it-hijri-month-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .it-related-tools {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n\/* Stronger Hijri converter controls *\/\n\n.it-converter-tabs {\n  grid-template-columns: 1fr 1fr !important;\n}\n\n.it-converter-tab {\n  color: #405249 !important;\n}\n\n.it-converter-tab.is-active {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n}\n\n.it-hijri-converter-card .it-btn.it-primary,\n.it-hijri-converter-card button.it-primary {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n  border-color: #0f5132 !important;\n}\n\n.it-hijri-converter-card .it-btn.it-primary:hover {\n  background: #0b3f27 !important;\n  color: #ffffff !important;\n}\n\n@media (max-width: 767px) {\n  .it-converter-tabs {\n    grid-template-columns: 1fr 1fr !important;\n  }\n\n  .it-converter-tab {\n    padding: 11px 7px;\n    font-size: 14px;\n  }\n}\n\/* ==========================================\n   HIJRI CALENDAR METHOD COMPARISON\n========================================== *\/\n\n.it-calendar-comparison {\n  margin-top: 26px;\n  padding: 20px;\n  background: #fbfdfb;\n  border: 1px solid #dfe8e2;\n  border-radius: 16px;\n  text-align: left;\n}\n\n.it-comparison-heading {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n  margin-bottom: 18px;\n}\n\n.it-comparison-icon {\n  font-size: 25px;\n}\n\n.it-comparison-heading h3 {\n  margin: 0 0 4px;\n  color: #162018;\n  font-size: 20px;\n}\n\n.it-comparison-heading p {\n  margin: 0;\n  color: #66756b;\n  font-size: 14px;\n}\n\n.it-calendar-compare-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n\n.it-calendar-compare-item {\n  padding: 16px;\n  background: #ffffff;\n  border: 1px solid #e3ebe6;\n  border-radius: 13px;\n}\n\n.it-calendar-compare-item span {\n  display: block;\n  color: #0f5132;\n  font-size: 14px;\n  font-weight: 800;\n  margin-bottom: 7px;\n}\n\n.it-calendar-compare-item strong {\n  display: block;\n  color: #162018;\n  font-size: 17px;\n  line-height: 1.4;\n}\n\n.it-calendar-compare-item small {\n  display: block;\n  margin-top: 6px;\n  color: #78847c;\n}\n\n.it-calendar-compare-status {\n  margin-top: 14px;\n  padding: 11px 13px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.it-calendar-compare-status.is-same {\n  background: #edf8f1;\n  color: #0f6a40;\n}\n\n.it-calendar-compare-status.is-different {\n  background: #fff8e7;\n  color: #765914;\n}\n\n.it-calendar-explanation {\n  margin-top: 14px;\n  border-top: 1px solid #e4ebe6;\n  padding-top: 13px;\n}\n\n.it-calendar-explanation summary {\n  cursor: pointer;\n  color: #0f5132;\n  font-weight: 800;\n}\n\n.it-calendar-explanation p {\n  margin: 10px 0 0;\n  color: #66756b;\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n\n\/* Mobile *\/\n@media (max-width: 767px) {\n\n  .it-calendar-compare-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .it-calendar-comparison {\n    padding: 16px;\n  }\n}\n\n\/* Strong primary buttons in Hijri converter *\/\n.it-hijri-converter-card .it-load-btn {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n  border: 1px solid #0f5132 !important;\n  font-weight: 800;\n}\n\n.it-hijri-converter-card .it-load-btn:hover,\n.it-hijri-converter-card .it-load-btn:focus {\n  background: #0b3f27 !important;\n  color: #ffffff !important;\n  border-color: #0b3f27 !important;\n}\n\n\/* ==========================================\n   SMART HIJRI DATE EXPLANATION\n========================================== *\/\n\n.it-smart-hijri-explanation {\n  margin-top: 16px;\n  padding: 18px;\n  border-radius: 14px;\n  text-align: left;\n}\n\n\/* When both methods match *\/\n.it-smart-hijri-explanation.is-match {\n  background: #f0f8f3;\n  border: 1px solid #d8eadf;\n}\n\n\/* When methods differ *\/\n.it-smart-hijri-explanation.is-different {\n  background: #fff9e9;\n  border: 1px solid #eedda8;\n}\n\n.it-smart-hijri-explanation h4 {\n  margin: 0 0 10px;\n  color: #162018;\n  font-size: 18px;\n  line-height: 1.4;\n}\n\n.it-smart-hijri-explanation p {\n  margin: 8px 0 0;\n  color: #55625a;\n  font-size: 14px;\n  line-height: 1.65;\n}\n\n.it-smart-hijri-explanation strong {\n  color: #0f5132;\n}\n\n\/* ==========================================\n   NEXT ISLAMIC OCCASION\n========================================== *\/\n\n.it-next-islamic-occasion {\n  margin-top: 22px;\n  padding: 20px;\n  background: linear-gradient(135deg, #f4faf6, #ffffff);\n  border: 1px solid #dce9e0;\n  border-radius: 16px;\n  text-align: left;\n}\n\n.it-occasion-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.it-occasion-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 46px;\n  height: 46px;\n  background: #eaf6ef;\n  border-radius: 50%;\n  font-size: 24px;\n  flex-shrink: 0;\n}\n\n.it-occasion-label {\n  display: block;\n  margin-bottom: 3px;\n  color: #0f5132;\n  font-size: 13px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: .4px;\n}\n\n.it-occasion-header h3 {\n  margin: 0;\n  color: #162018;\n  font-size: 21px;\n}\n\n.it-occasion-details {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n  margin-top: 18px;\n}\n\n.it-occasion-date {\n  padding: 14px;\n  background: #ffffff;\n  border: 1px solid #e3ebe6;\n  border-radius: 12px;\n}\n\n.it-occasion-date span {\n  display: block;\n  margin-bottom: 5px;\n  color: #66756b;\n  font-size: 13px;\n}\n\n.it-occasion-date strong {\n  display: block;\n  color: #162018;\n  font-size: 16px;\n}\n\n.it-occasion-countdown {\n  margin-top: 14px;\n  padding: 11px 14px;\n  background: #0f5132;\n  color: #ffffff;\n  border-radius: 10px;\n  font-weight: 800;\n  text-align: center;\n}\n\n.it-occasion-note {\n  margin: 12px 0 0;\n  color: #66756b;\n  font-size: 13px;\n  line-height: 1.55;\n}\n\n.it-occasion-loading,\n.it-occasion-unavailable {\n  text-align: center;\n  color: #66756b;\n  padding: 10px;\n}\n\n@media (max-width: 767px) {\n\n  .it-occasion-details {\n    grid-template-columns: 1fr;\n  }\n\n  .it-next-islamic-occasion {\n    padding: 16px;\n  }\n\n  .it-occasion-header h3 {\n    font-size: 19px;\n  }\n}\n\n\/* ==========================================\n   HIJRI CONVERTER BUTTON + TAB FIX\n========================================== *\/\n\n\/* Primary Convert buttons *\/\n#convertToHijriBtn,\n#convertToGregorianBtn {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n  border: 1px solid #0f5132 !important;\n  opacity: 1 !important;\n  font-weight: 800 !important;\n  box-shadow: none !important;\n}\n\n#convertToHijriBtn:hover,\n#convertToGregorianBtn:hover,\n#convertToHijriBtn:focus,\n#convertToGregorianBtn:focus {\n  background: #0b3f27 !important;\n  color: #ffffff !important;\n  border-color: #0b3f27 !important;\n}\n\n\n\/* Converter tabs *\/\n.it-converter-tab {\n  background: transparent !important;\n  color: #405249 !important;\n  opacity: 1 !important;\n  font-weight: 700 !important;\n}\n\n\n\/* Active tab *\/\n.it-converter-tab.is-active,\n.it-converter-tab[aria-selected=\"true\"] {\n  background: #0f5132 !important;\n  color: #ffffff !important;\n  box-shadow: 0 5px 14px rgba(15, 81, 50, 0.18) !important;\n}\n\n\n\/* Active tab hover *\/\n.it-converter-tab.is-active:hover,\n.it-converter-tab[aria-selected=\"true\"]:hover {\n  background: #0b3f27 !important;\n  color: #ffffff !important;\n}\n\n\n\/* Keep Today's Date as secondary button *\/\n#useTodayBtn {\n  background: #ffffff !important;\n  color: #0f5132 !important;\n  border: 1px solid #dfe6e1 !important;\n}\n\n#useTodayBtn:hover {\n  background: #f4faf6 !important;\n  color: #0b3f27 !important;\n  border-color: #bcd4c5 !important;\n}\n\/* ==========================================\n   PREVIOUS + NEXT ISLAMIC OCCASIONS\n========================================== *\/\n\n.it-occasion-section-heading {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 18px;\n}\n\n.it-occasion-section-heading > span {\n  font-size: 28px;\n}\n\n.it-occasion-section-heading h3 {\n  margin: 2px 0 0;\n  color: #162018;\n  font-size: 21px;\n}\n\n.it-occasion-navigation-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 14px;\n}\n\n.it-occasion-nav-card {\n  padding: 18px;\n  background: #ffffff;\n  border: 1px solid #dfe8e2;\n  border-radius: 14px;\n}\n\n.it-occasion-nav-card.is-next {\n  border-color: #bdd8c7;\n  background: #f7fcf8;\n}\n\n.it-occasion-nav-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.it-occasion-nav-direction {\n  color: #66756b;\n  font-size: 13px;\n  font-weight: 800;\n}\n\n.it-occasion-nav-card.is-next\n.it-occasion-nav-direction {\n  color: #0f5132;\n}\n\n.it-occasion-nav-icon {\n  font-size: 22px;\n}\n\n.it-occasion-nav-card h4 {\n  margin: 12px 0 16px;\n  color: #162018;\n  font-size: 20px;\n}\n\n.it-occasion-nav-date {\n  margin-top: 10px;\n}\n\n.it-occasion-nav-date span {\n  display: block;\n  margin-bottom: 3px;\n  color: #7a867f;\n  font-size: 12px;\n}\n\n.it-occasion-nav-date strong {\n  display: block;\n  color: #162018;\n  font-size: 15px;\n}\n\n.it-occasion-distance {\n  margin-top: 15px;\n  padding: 9px 11px;\n  background: #f2f5f3;\n  border-radius: 9px;\n  color: #66756b;\n  font-size: 13px;\n  font-weight: 700;\n  text-align: center;\n}\n\n.it-occasion-distance.is-next {\n  background: #0f5132;\n  color: #ffffff;\n}\n\n@media (max-width: 767px) {\n\n  .it-occasion-navigation-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .it-occasion-nav-card {\n    padding: 16px;\n  }\n\n  .it-occasion-section-heading h3 {\n    font-size: 19px;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ ========================================\n\/\/ HIJRI DATE CONVERTER\n\/\/ Gregorian \u2194 Hijri\n\/\/ Calendar Method Comparison\n\/\/ Smart Difference Explanation\n\/\/ Next Islamic Occasion\n\/\/ ========================================\n\n\n\/\/ ========================================\n\/\/ STANDARD HIJRI MONTH NAMES\n\/\/ ========================================\n\nfunction normalizeHijriMonthName(monthNumber) {\n  const months = {\n    1: \"Muharram\",\n    2: \"Safar\",\n    3: \"Rabi al-Awwal\",\n    4: \"Rabi al-Thani\",\n    5: \"Jumada al-Awwal\",\n    6: \"Jumada al-Thani\",\n    7: \"Rajab\",\n    8: \"Sha'ban\",\n    9: \"Ramadan\",\n    10: \"Shawwal\",\n    11: \"Dhul Qa'dah\",\n    12: \"Dhul Hijjah\"\n  };\n\n  return months[monthNumber] || \"\";\n}\n\n\n\/\/ ========================================\n\/\/ IMPORTANT ISLAMIC OCCASIONS\n\/\/ ========================================\n\nconst islamicOccasions = [\n\n  {\n    month: 1,\n    day: 1,\n    name: \"Islamic New Year\",\n    icon: \"\ud83c\udf19\"\n  },\n\n  {\n    month: 1,\n    day: 10,\n    name: \"Day of Ashura\",\n    icon: \"\ud83c\udf19\"\n  },\n\n  {\n    month: 9,\n    day: 1,\n    name: \"Beginning of Ramadan\",\n    icon: \"\ud83c\udf19\"\n  },\n\n  {\n    month: 10,\n    day: 1,\n    name: \"Eid al-Fitr\",\n    icon: \"\ud83c\udf89\"\n  },\n\n  {\n    month: 12,\n    day: 9,\n    name: \"Day of Arafah\",\n    icon: \"\ud83d\udd4b\"\n  },\n\n  {\n    month: 12,\n    day: 10,\n    name: \"Eid al-Adha\",\n    icon: \"\ud83d\udd4b\"\n  }\n\n];\n\n\n\/\/ ========================================\n\/\/ GREGORIAN \u2192 HIJRI\n\/\/ ========================================\n\nasync function convertHijri() {\n\n  const box =\n    document.getElementById(\"hijriResult\");\n\n  const dateInput =\n    document.getElementById(\"gregDate\");\n\n  if (!box || !dateInput) return;\n\n\n  const date =\n    dateInput.value;\n\n\n  if (!date) {\n\n    showHijriMessage(\n      \"Please select a Gregorian date first.\",\n      \"error\"\n    );\n\n    return;\n  }\n\n\n  box.innerHTML = `\n    <div class=\"it-converter-loading\">\n      Converting date...\n    <\/div>\n  `;\n\n\n  try {\n\n    const parts =\n      date.split(\"-\");\n\n    const year =\n      parts[0];\n\n    const month =\n      parts[1];\n\n    const day =\n      parts[2];\n\n\n    const url =\n      `https:\/\/api.aladhan.com\/v1\/gToH?date=${day}-${month}-${year}`;\n\n\n    const response =\n      await fetch(url);\n\n\n    if (!response.ok) {\n\n      throw new Error(\n        \"Conversion request failed\"\n      );\n    }\n\n\n    const data =\n      await response.json();\n\n\n    if (\n      !data ||\n      data.code !== 200 ||\n      !data.data ||\n      !data.data.hijri ||\n      !data.data.gregorian\n    ) {\n\n      throw new Error(\n        \"Invalid conversion response\"\n      );\n    }\n\n\n    showGregorianToHijriResult(\n      data.data.hijri,\n      data.data.gregorian\n    );\n\n\n  } catch (error) {\n\n    console.error(\n      \"Gregorian to Hijri conversion error:\",\n      error\n    );\n\n\n    showHijriMessage(\n      \"Unable to convert the date right now. Please check your internet connection and try again.\",\n      \"error\"\n    );\n  }\n}\n\n\n\/\/ ========================================\n\/\/ HIJRI \u2192 GREGORIAN\n\/\/ ========================================\n\nasync function convertToGregorian() {\n\n  const box =\n    document.getElementById(\"hijriResult\");\n\n\n  const day =\n    document.getElementById(\"hijriDay\")?.value;\n\n\n  const month =\n    document.getElementById(\"hijriMonth\")?.value;\n\n\n  const year =\n    document.getElementById(\"hijriYear\")?.value;\n\n\n  if (!box) return;\n\n\n  if (!day || !month || !year) {\n\n    showHijriMessage(\n      \"Please select the Hijri day, month, and year.\",\n      \"error\"\n    );\n\n    return;\n  }\n\n\n  const numericYear =\n    Number(year);\n\n\n  if (\n    !Number.isInteger(numericYear) ||\n    numericYear < 1 ||\n    numericYear > 2000\n  ) {\n\n    showHijriMessage(\n      \"Please enter a valid Hijri year.\",\n      \"error\"\n    );\n\n    return;\n  }\n\n\n  box.innerHTML = `\n    <div class=\"it-converter-loading\">\n      Converting date...\n    <\/div>\n  `;\n\n\n  try {\n\n    const formattedDay =\n      String(day).padStart(2, \"0\");\n\n\n    const formattedMonth =\n      String(month).padStart(2, \"0\");\n\n\n    const url =\n      `https:\/\/api.aladhan.com\/v1\/hToG?date=${formattedDay}-${formattedMonth}-${year}`;\n\n\n    const response =\n      await fetch(url);\n\n\n    if (!response.ok) {\n\n      throw new Error(\n        \"Conversion request failed\"\n      );\n    }\n\n\n    const data =\n      await response.json();\n\n\n    if (\n      !data ||\n      data.code !== 200 ||\n      !data.data ||\n      !data.data.hijri ||\n      !data.data.gregorian\n    ) {\n\n      throw new Error(\n        \"Invalid conversion response\"\n      );\n    }\n\n\n    showHijriToGregorianResult(\n      data.data.hijri,\n      data.data.gregorian\n    );\n\n\n  } catch (error) {\n\n    console.error(\n      \"Hijri to Gregorian conversion error:\",\n      error\n    );\n\n\n    showHijriMessage(\n      \"Unable to convert this Hijri date. Please check the date and try again.\",\n      \"error\"\n    );\n  }\n}\n\n\n\/\/ ========================================\n\/\/ RESULT \u2014 GREGORIAN \u2192 HIJRI\n\/\/ ========================================\n\nfunction showGregorianToHijriResult(\n  hijri,\n  gregorian\n) {\n\n  const box =\n    document.getElementById(\"hijriResult\");\n\n\n  if (!box) return;\n\n\n  const monthName =\n    normalizeHijriMonthName(\n      Number(hijri.month.number)\n    );\n\n\n  const englishHijri =\n    `${hijri.day} ${monthName} ${hijri.year} AH`;\n\n\n  const arabicHijri =\n    `${hijri.day} ${hijri.month.ar} ${hijri.year} \u0647\u0640`;\n\n\n  const gregorianReadable =\n    formatGregorianDate(gregorian);\n\n\n  const weekday =\n    gregorian.weekday?.en || \"\";\n\n\n  const copyText =\n`${englishHijri}\n${arabicHijri}\n${weekday ? weekday + \", \" : \"\"}${gregorianReadable}\nCalculated Hijri date\nHijri dates may vary by calculation method and local moon sighting.`;\n\n\n  box.innerHTML = `\n\n    <div class=\"it-hijri-result-box\">\n\n\n      <div class=\"it-result-label\">\n        Islamic Hijri Date\n      <\/div>\n\n\n      <div class=\"it-hijri-main-date\">\n        ${hijri.day}\n      <\/div>\n\n\n      <div class=\"it-hijri-month-name\">\n        ${monthName}\n      <\/div>\n\n\n      <div class=\"it-hijri-year\">\n        ${hijri.year} AH\n      <\/div>\n\n\n      <div\n        class=\"it-hijri-arabic-result\"\n        dir=\"rtl\"\n        lang=\"ar\"\n      >\n        ${arabicHijri}\n      <\/div>\n\n\n      <div class=\"it-result-divider\"><\/div>\n\n\n      ${\n        weekday\n          ? `\n            <div class=\"it-result-weekday\">\n              ${weekday}\n            <\/div>\n          `\n          : \"\"\n      }\n\n\n      <div class=\"it-gregorian-result\">\n        ${gregorianReadable}\n      <\/div>\n\n\n      <div class=\"it-calendar-method\">\n\n        <span>\n          Primary conversion\n        <\/span>\n\n        <strong>\n          Calculated Hijri date\n        <\/strong>\n\n      <\/div>\n\n\n      <p class=\"it-result-disclaimer\">\n        Local moon-sighting announcements may differ by one day.\n      <\/p>\n\n\n      ${buildHijriComparison(gregorian)}\n\n\n      <div\n        class=\"it-next-islamic-occasion\"\n        id=\"nextIslamicOccasion\"\n      >\n\n        <div class=\"it-occasion-loading\">\n          Finding next Islamic occasion...\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"it-result-actions\">\n\n        <button\n          type=\"button\"\n          class=\"it-btn it-light\"\n          id=\"copyHijriResult\"\n        >\n          \ud83d\udccb Copy Result\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"it-btn it-light\"\n          id=\"shareHijriResult\"\n        >\n          \u2197 Share\n        <\/button>\n\n      <\/div>\n\n\n    <\/div>\n  `;\n\n\n  setupResultActions(\n    copyText,\n    englishHijri\n  );\n\n\n  loadNextIslamicOccasion(\n    hijri,\n    gregorian\n  );\n}\n\n\n\/\/ ========================================\n\/\/ RESULT \u2014 HIJRI \u2192 GREGORIAN\n\/\/ ========================================\n\nfunction showHijriToGregorianResult(\n  hijri,\n  gregorian\n) {\n\n  const box =\n    document.getElementById(\"hijriResult\");\n\n\n  if (!box) return;\n\n\n  const monthName =\n    normalizeHijriMonthName(\n      Number(hijri.month.number)\n    );\n\n\n  const gregorianReadable =\n    formatGregorianDate(gregorian);\n\n\n  const englishHijri =\n    `${hijri.day} ${monthName} ${hijri.year} AH`;\n\n\n  const arabicHijri =\n    `${hijri.day} ${hijri.month.ar} ${hijri.year} \u0647\u0640`;\n\n\n  const weekday =\n    gregorian.weekday?.en || \"\";\n\n\n  const copyText =\n`${gregorianReadable}\n${weekday}\nConverted from: ${englishHijri}\n${arabicHijri}\nCalculated Hijri date\nHijri dates may vary by calculation method and local moon sighting.`;\n\n\n  box.innerHTML = `\n\n    <div class=\"it-hijri-result-box\">\n\n\n      <div class=\"it-result-label\">\n        Gregorian Date\n      <\/div>\n\n\n      <div class=\"it-gregorian-main-date\">\n        ${gregorian.day}\n      <\/div>\n\n\n      <div class=\"it-gregorian-month-name\">\n        ${gregorian.month.en}\n      <\/div>\n\n\n      <div class=\"it-gregorian-year\">\n        ${gregorian.year}\n      <\/div>\n\n\n      ${\n        weekday\n          ? `\n            <div class=\"it-result-weekday\">\n              ${weekday}\n            <\/div>\n          `\n          : \"\"\n      }\n\n\n      <div class=\"it-result-divider\"><\/div>\n\n\n      <div class=\"it-converted-from\">\n        Converted from\n      <\/div>\n\n\n      <div class=\"it-hijri-secondary-date\">\n        ${englishHijri}\n      <\/div>\n\n\n      <div\n        class=\"it-hijri-arabic-result\"\n        dir=\"rtl\"\n        lang=\"ar\"\n      >\n        ${arabicHijri}\n      <\/div>\n\n\n      <div class=\"it-calendar-method\">\n\n        <span>\n          Primary conversion\n        <\/span>\n\n        <strong>\n          Calculated Hijri date\n        <\/strong>\n\n      <\/div>\n\n\n      <p class=\"it-result-disclaimer\">\n        Local moon-sighting announcements may differ by one day.\n      <\/p>\n\n\n      ${buildHijriComparison(gregorian)}\n\n\n      <div\n        class=\"it-next-islamic-occasion\"\n        id=\"nextIslamicOccasion\"\n      >\n\n        <div class=\"it-occasion-loading\">\n          Finding next Islamic occasion...\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"it-result-actions\">\n\n        <button\n          type=\"button\"\n          class=\"it-btn it-light\"\n          id=\"copyHijriResult\"\n        >\n          \ud83d\udccb Copy Result\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"it-btn it-light\"\n          id=\"shareHijriResult\"\n        >\n          \u2197 Share\n        <\/button>\n\n      <\/div>\n\n\n    <\/div>\n  `;\n\n\n  setupResultActions(\n    copyText,\n    gregorianReadable\n  );\n\n\n  loadNextIslamicOccasion(\n    hijri,\n    gregorian\n  );\n}\n\n\n\/\/ ========================================\n\/\/ FORMAT GREGORIAN DATE\n\/\/ ========================================\n\nfunction formatGregorianDate(gregorian) {\n\n  if (\n    gregorian.day &&\n    gregorian.month?.en &&\n    gregorian.year\n  ) {\n\n    return `${gregorian.day} ${gregorian.month.en} ${gregorian.year}`;\n  }\n\n\n  return gregorian.date || \"\";\n}\n\n\n\/\/ ========================================\n\/\/ GET HIJRI DATE USING BROWSER CALENDAR\n\/\/ ========================================\n\nfunction getIntlHijriDate(\n  gregorian,\n  calendarType\n) {\n\n  if (\n    !gregorian ||\n    !gregorian.date\n  ) {\n\n    return null;\n  }\n\n\n  try {\n\n    const parts =\n      gregorian.date.split(\"-\");\n\n\n    const day =\n      Number(parts[0]);\n\n\n    const month =\n      Number(parts[1]);\n\n\n    const year =\n      Number(parts[2]);\n\n\n    if (\n      !day ||\n      !month ||\n      !year\n    ) {\n\n      return null;\n    }\n\n\n    const date =\n      new Date(\n        Date.UTC(\n          year,\n          month - 1,\n          day,\n          12,\n          0,\n          0\n        )\n      );\n\n\n    const formatter =\n      new Intl.DateTimeFormat(\n        \"en-u-nu-latn\",\n        {\n\n          calendar:\n            calendarType,\n\n          day:\n            \"numeric\",\n\n          month:\n            \"numeric\",\n\n          year:\n            \"numeric\",\n\n          timeZone:\n            \"UTC\"\n\n        }\n      );\n\n\n    if (\n      formatter\n        .resolvedOptions()\n        .calendar !== calendarType\n    ) {\n\n      return null;\n    }\n\n\n    const partsResult =\n      formatter.formatToParts(date);\n\n\n    let resultDay = \"\";\n    let resultMonthNumber = \"\";\n    let resultYear = \"\";\n\n\n    partsResult.forEach(part => {\n\n      if (part.type === \"day\") {\n        resultDay = part.value;\n      }\n\n\n      if (part.type === \"month\") {\n        resultMonthNumber = part.value;\n      }\n\n\n      if (part.type === \"year\") {\n        resultYear = part.value;\n      }\n\n    });\n\n\n    if (\n      !resultDay ||\n      !resultMonthNumber ||\n      !resultYear\n    ) {\n\n      return null;\n    }\n\n\n    const monthName =\n      normalizeHijriMonthName(\n        Number(resultMonthNumber)\n      );\n\n\n    return {\n\n      day:\n        Number(resultDay),\n\n      monthNumber:\n        Number(resultMonthNumber),\n\n      month:\n        monthName,\n\n      year:\n        Number(resultYear),\n\n      text:\n        `${resultDay} ${monthName} ${resultYear} AH`\n\n    };\n\n\n  } catch (error) {\n\n    console.warn(\n      `Calendar ${calendarType} is not supported:`,\n      error\n    );\n\n\n    return null;\n  }\n}\n\n\n\/\/ ========================================\n\/\/ CALENDAR COMPARISON\n\/\/ ========================================\n\nfunction buildHijriComparison(gregorian) {\n\n  const ummAlQura =\n    getIntlHijriDate(\n      gregorian,\n      \"islamic-umalqura\"\n    );\n\n\n  const civil =\n    getIntlHijriDate(\n      gregorian,\n      \"islamic-civil\"\n    );\n\n\n  if (!ummAlQura || !civil) {\n\n    return `\n\n      <div class=\"it-calendar-comparison\">\n\n        <div class=\"it-comparison-heading\">\n\n          <span class=\"it-comparison-icon\">\n            \ud83c\udf19\n          <\/span>\n\n          <div>\n\n            <h3>\n              Compare Hijri Calendar Methods\n            <\/h3>\n\n            <p>\n              Calendar comparison is not available\n              in this browser. Your primary converted\n              date above is still available.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n    `;\n  }\n\n\n  const sameDate =\n    ummAlQura.day === civil.day &&\n    ummAlQura.monthNumber === civil.monthNumber &&\n    ummAlQura.year === civil.year;\n\n\n  let explanation = \"\";\n\n\n  if (sameDate) {\n\n    explanation = `\n\n      <div class=\"it-smart-hijri-explanation is-match\">\n\n        <h4>\n          \u2705 Why might another website still show a different date?\n        <\/h4>\n\n        <p>\n          For this Gregorian date, both\n          <strong>Umm al-Qura<\/strong> and\n          <strong>Islamic Civil<\/strong> give\n          <strong>${ummAlQura.text}<\/strong>.\n        <\/p>\n\n        <p>\n          Another website may still show a different\n          Hijri date if it uses another calculation\n          method, different geographical settings,\n          a different time zone, or a local\n          moon-sighting decision.\n        <\/p>\n\n        <p>\n          For important religious dates such as\n          Ramadan, Eid and Hajj, always follow the\n          recognized Islamic authority in your country.\n        <\/p>\n\n      <\/div>\n    `;\n\n  } else {\n\n    explanation = `\n\n      <div class=\"it-smart-hijri-explanation is-different\">\n\n        <h4>\n          \ud83d\udd0e Why does another website show a different Hijri date?\n        <\/h4>\n\n        <p>\n          For this same Gregorian date,\n          <strong>Umm al-Qura<\/strong> gives\n          <strong>${ummAlQura.text}<\/strong>,\n          while the\n          <strong>Islamic Civil<\/strong>\n          method gives\n          <strong>${civil.text}<\/strong>.\n        <\/p>\n\n        <p>\n          This difference occurs because these\n          calendars use different mathematical\n          rules for determining Islamic months.\n          This is why Hijri converters can\n          sometimes differ by one day.\n        <\/p>\n\n        <p>\n          Local moon sighting, country, time zone,\n          geographical settings and official\n          religious announcements may also affect\n          the observed Islamic date.\n        <\/p>\n\n        <p>\n          <strong>\n            For Ramadan, Eid al-Fitr, Eid al-Adha,\n            Hajj and other religious observances,\n            follow the official Islamic authority\n            in your country.\n          <\/strong>\n        <\/p>\n\n      <\/div>\n    `;\n  }\n\n\n  return `\n\n    <div class=\"it-calendar-comparison\">\n\n\n      <div class=\"it-comparison-heading\">\n\n        <span class=\"it-comparison-icon\">\n          \ud83c\udf19\n        <\/span>\n\n        <div>\n\n          <h3>\n            Compare Hijri Calendar Methods\n          <\/h3>\n\n          <p>\n            See how two calculated Islamic calendar\n            methods interpret the same Gregorian date.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"it-calendar-compare-grid\">\n\n\n        <div class=\"it-calendar-compare-item\">\n\n          <span>\n            Umm al-Qura\n          <\/span>\n\n          <strong>\n            ${ummAlQura.text}\n          <\/strong>\n\n          <small>\n            Umm al-Qura calendar calculation\n          <\/small>\n\n        <\/div>\n\n\n        <div class=\"it-calendar-compare-item\">\n\n          <span>\n            Islamic Civil\n          <\/span>\n\n          <strong>\n            ${civil.text}\n          <\/strong>\n\n          <small>\n            Tabular \/ civil calculation\n          <\/small>\n\n        <\/div>\n\n\n      <\/div>\n\n\n      <div\n        class=\"\n          it-calendar-compare-status\n          ${sameDate ? \"is-same\" : \"is-different\"}\n        \"\n      >\n\n        ${\n          sameDate\n            ? \"\u2705 Both methods show the same Hijri date.\"\n            : \"\u26a0\ufe0f These calculation methods show different Hijri dates.\"\n        }\n\n      <\/div>\n\n\n      ${explanation}\n\n\n      <details class=\"it-calendar-explanation\">\n\n        <summary>\n          Learn more about Hijri date differences\n        <\/summary>\n\n        <p>\n          Calculated Hijri calendars can use\n          different mathematical methods for\n          determining the start and length\n          of Islamic months.\n        <\/p>\n\n        <p>\n          Observed Islamic dates may additionally\n          depend on moon sighting, location,\n          time zone and official announcements.\n        <\/p>\n\n      <\/details>\n\n\n    <\/div>\n  `;\n}\n\n\n\/\/ ========================================\n\/\/ FIND NEXT ISLAMIC OCCASION\n\/\/ ========================================\n\nasync function loadNextIslamicOccasion(\n  hijri,\n  gregorian\n) {\n\n  const box =\n    document.getElementById(\n      \"nextIslamicOccasion\"\n    );\n\n\n  if (!box) return;\n\n\n  const currentDay =\n    Number(hijri.day);\n\n\n  const currentMonth =\n    Number(hijri.month.number);\n\n\n  const currentYear =\n    Number(hijri.year);\n\n\n  let nextOccasion =\n    islamicOccasions.find(\n      occasion =>\n        occasion.month > currentMonth ||\n        (\n          occasion.month === currentMonth &&\n          occasion.day >= currentDay\n        )\n    );\n\n\n  let occasionYear =\n    currentYear;\n\n\n  \/\/ No more occasions this Hijri year\n  if (!nextOccasion) {\n\n    nextOccasion =\n      islamicOccasions[0];\n\n    occasionYear =\n      currentYear + 1;\n  }\n\n\n  try {\n\n    const occasionGregorian =\n      await convertHijriOccasionToGregorian(\n        nextOccasion.day,\n        nextOccasion.month,\n        occasionYear\n      );\n\n\n    if (!occasionGregorian) {\n\n      throw new Error(\n        \"Occasion conversion unavailable\"\n      );\n    }\n\n\n    const selectedDate =\n      gregorianToDateObject(\n        gregorian\n      );\n\n\n    const occasionDate =\n      gregorianToDateObject(\n        occasionGregorian\n      );\n\n\n    let daysAway =\n      null;\n\n\n    if (\n      selectedDate &&\n      occasionDate\n    ) {\n\n      const difference =\n        occasionDate.getTime() -\n        selectedDate.getTime();\n\n\n      daysAway =\n        Math.round(\n          difference \/\n          86400000\n        );\n    }\n\n\n    const hijriOccasionDate =\n      `${nextOccasion.day} ${normalizeHijriMonthName(nextOccasion.month)} ${occasionYear} AH`;\n\n\n    const gregorianOccasionDate =\n      formatGregorianDate(\n        occasionGregorian\n      );\n\n\n    let countdownText = \"\";\n\n\n    if (daysAway === 0) {\n\n      countdownText =\n        \"Today\";\n\n    } else if (daysAway === 1) {\n\n      countdownText =\n        \"Tomorrow\";\n\n    } else if (\n      typeof daysAway === \"number\" &&\n      daysAway > 1\n    ) {\n\n      countdownText =\n        `${daysAway} days from the selected date`;\n\n    } else {\n\n      countdownText =\n        \"Upcoming Islamic occasion\";\n    }\n\n\n    box.innerHTML = `\n\n      <div class=\"it-occasion-header\">\n\n        <span class=\"it-occasion-icon\">\n          ${nextOccasion.icon}\n        <\/span>\n\n        <div>\n\n          <span class=\"it-occasion-label\">\n            Next Islamic Occasion\n          <\/span>\n\n          <h3>\n            ${nextOccasion.name}\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"it-occasion-details\">\n\n        <div class=\"it-occasion-date\">\n\n          <span>\n            Hijri Date\n          <\/span>\n\n          <strong>\n            ${hijriOccasionDate}\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"it-occasion-date\">\n\n          <span>\n            Calculated Gregorian Date\n          <\/span>\n\n          <strong>\n            ${gregorianOccasionDate}\n          <\/strong>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"it-occasion-countdown\">\n        \u23f3 ${countdownText}\n      <\/div>\n\n\n      <p class=\"it-occasion-note\">\n        This is a calculated calendar reference.\n        Religious observance dates may vary according\n        to local moon sighting and official announcements.\n      <\/p>\n    `;\n\n\n  } catch (error) {\n\n    console.error(\n      \"Islamic occasion error:\",\n      error\n    );\n\n\n    box.innerHTML = `\n\n      <div class=\"it-occasion-unavailable\">\n\n        \ud83c\udf19 Islamic occasion information\n        is temporarily unavailable.\n\n      <\/div>\n    `;\n  }\n}\n\n\n\/\/ ========================================\n\/\/ CONVERT OCCASION HIJRI \u2192 GREGORIAN\n\/\/ ========================================\n\nasync function convertHijriOccasionToGregorian(\n  day,\n  month,\n  year\n) {\n\n  try {\n\n    const formattedDay =\n      String(day).padStart(2, \"0\");\n\n\n    const formattedMonth =\n      String(month).padStart(2, \"0\");\n\n\n    const url =\n      `https:\/\/api.aladhan.com\/v1\/hToG?date=${formattedDay}-${formattedMonth}-${year}`;\n\n\n    const response =\n      await fetch(url);\n\n\n    if (!response.ok) {\n\n      return null;\n    }\n\n\n    const data =\n      await response.json();\n\n\n    if (\n      !data ||\n      data.code !== 200 ||\n      !data.data ||\n      !data.data.gregorian\n    ) {\n\n      return null;\n    }\n\n\n    return data.data.gregorian;\n\n\n  } catch (error) {\n\n    console.error(\n      \"Occasion date conversion failed:\",\n      error\n    );\n\n\n    return null;\n  }\n}\n\n\n\/\/ ========================================\n\/\/ GREGORIAN OBJECT \u2192 JAVASCRIPT DATE\n\/\/ ========================================\n\nfunction gregorianToDateObject(\n  gregorian\n) {\n\n  if (\n    !gregorian ||\n    !gregorian.date\n  ) {\n\n    return null;\n  }\n\n\n  const parts =\n    gregorian.date.split(\"-\");\n\n\n  const day =\n    Number(parts[0]);\n\n\n  const month =\n    Number(parts[1]);\n\n\n  const year =\n    Number(parts[2]);\n\n\n  if (\n    !day ||\n    !month ||\n    !year\n  ) {\n\n    return null;\n  }\n\n\n  return new Date(\n    Date.UTC(\n      year,\n      month - 1,\n      day,\n      12,\n      0,\n      0\n    )\n  );\n}\n\n\n\/\/ ========================================\n\/\/ COPY + SHARE\n\/\/ ========================================\n\nfunction setupResultActions(\n  copyText,\n  shareTitle\n) {\n\n  const copyButton =\n    document.getElementById(\n      \"copyHijriResult\"\n    );\n\n\n  const shareButton =\n    document.getElementById(\n      \"shareHijriResult\"\n    );\n\n\n  if (copyButton) {\n\n    copyButton.addEventListener(\n      \"click\",\n      async function () {\n\n        try {\n\n          await navigator.clipboard.writeText(\n            copyText\n          );\n\n\n          const originalText =\n            copyButton.innerHTML;\n\n\n          copyButton.innerHTML =\n            \"\u2705 Copied\";\n\n\n          setTimeout(() => {\n\n            copyButton.innerHTML =\n              originalText;\n\n          }, 1800);\n\n\n        } catch (error) {\n\n          console.error(\n            \"Copy failed:\",\n            error\n          );\n\n\n          fallbackCopyText(\n            copyText\n          );\n        }\n      }\n    );\n  }\n\n\n  if (shareButton) {\n\n    shareButton.addEventListener(\n      \"click\",\n      async function () {\n\n        if (navigator.share) {\n\n          try {\n\n            await navigator.share({\n\n              title:\n                shareTitle ||\n                \"Hijri Date Converter\",\n\n              text:\n                copyText,\n\n              url:\n                window.location.href\n\n            });\n\n\n          } catch (error) {\n\n            if (\n              error.name !==\n              \"AbortError\"\n            ) {\n\n              console.error(\n                \"Share failed:\",\n                error\n              );\n            }\n          }\n\n\n        } else {\n\n          fallbackCopyText(\n            copyText +\n            \"\\n\" +\n            window.location.href\n          );\n\n\n          const originalText =\n            shareButton.innerHTML;\n\n\n          shareButton.innerHTML =\n            \"\u2705 Link Copied\";\n\n\n          setTimeout(() => {\n\n            shareButton.innerHTML =\n              originalText;\n\n          }, 1800);\n        }\n      }\n    );\n  }\n}\n\n\n\/\/ ========================================\n\/\/ FALLBACK COPY\n\/\/ ========================================\n\nfunction fallbackCopyText(text) {\n\n  const textarea =\n    document.createElement(\n      \"textarea\"\n    );\n\n\n  textarea.value =\n    text;\n\n\n  textarea.style.position =\n    \"fixed\";\n\n\n  textarea.style.opacity =\n    \"0\";\n\n\n  document.body.appendChild(\n    textarea\n  );\n\n\n  textarea.focus();\n\n  textarea.select();\n\n\n  try {\n\n    document.execCommand(\n      \"copy\"\n    );\n\n\n  } catch (error) {\n\n    console.error(\n      \"Fallback copy failed:\",\n      error\n    );\n  }\n\n\n  document.body.removeChild(\n    textarea\n  );\n}\n\n\n\/\/ ========================================\n\/\/ MESSAGE \/ ERROR\n\/\/ ========================================\n\nfunction showHijriMessage(\n  message,\n  type = \"info\"\n) {\n\n  const box =\n    document.getElementById(\n      \"hijriResult\"\n    );\n\n\n  if (!box) return;\n\n\n  const icon =\n    type === \"error\"\n      ? \"\u26a0\ufe0f\"\n      : \"\u2139\ufe0f\";\n\n\n  box.innerHTML = `\n\n    <div class=\"it-converter-message ${type}\">\n\n      <span>\n        ${icon}\n      <\/span>\n\n      <p>\n        ${message}\n      <\/p>\n\n    <\/div>\n  `;\n}\n\n\n\/\/ ========================================\n\/\/ TAB SWITCHING\n\/\/ ========================================\n\nfunction setupHijriConverterTabs() {\n\n  const tabs =\n    document.querySelectorAll(\n      \".it-converter-tab\"\n    );\n\n\n  const gregPanel =\n    document.getElementById(\n      \"gregToHijriPanel\"\n    );\n\n\n  const hijriPanel =\n    document.getElementById(\n      \"hijriToGregPanel\"\n    );\n\n\n  if (\n    !tabs.length ||\n    !gregPanel ||\n    !hijriPanel\n  ) {\n\n    return;\n  }\n\n\n  tabs.forEach(tab => {\n\n    tab.addEventListener(\n      \"click\",\n      function () {\n\n        const mode =\n          this.dataset.mode;\n\n\n        tabs.forEach(item => {\n\n          item.classList.remove(\n            \"is-active\"\n          );\n\n\n          item.setAttribute(\n            \"aria-selected\",\n            \"false\"\n          );\n        });\n\n\n        this.classList.add(\n          \"is-active\"\n        );\n\n\n        this.setAttribute(\n          \"aria-selected\",\n          \"true\"\n        );\n\n\n        if (\n          mode === \"g-to-h\"\n        ) {\n\n          gregPanel.hidden =\n            false;\n\n\n          hijriPanel.hidden =\n            true;\n\n\n          gregPanel.classList.add(\n            \"is-active\"\n          );\n\n\n          hijriPanel.classList.remove(\n            \"is-active\"\n          );\n\n\n          resetResultBox();\n        }\n\n\n        if (\n          mode === \"h-to-g\"\n        ) {\n\n          gregPanel.hidden =\n            true;\n\n\n          hijriPanel.hidden =\n            false;\n\n\n          gregPanel.classList.remove(\n            \"is-active\"\n          );\n\n\n          hijriPanel.classList.add(\n            \"is-active\"\n          );\n\n\n          resetResultBox();\n        }\n      }\n    );\n  });\n}\n\n\n\/\/ ========================================\n\/\/ RESET RESULT\n\/\/ ========================================\n\nfunction resetResultBox() {\n\n  const box =\n    document.getElementById(\n      \"hijriResult\"\n    );\n\n\n  if (!box) return;\n\n\n  box.innerHTML = `\n\n    <div class=\"it-result-placeholder\">\n\n      <strong>\n        Your converted date will appear here.\n      <\/strong>\n\n      <p>\n        Select a date and choose a conversion direction.\n      <\/p>\n\n    <\/div>\n  `;\n}\n\n\n\/\/ ========================================\n\/\/ SET TODAY\n\/\/ ========================================\n\nfunction setTodayHijriConverter() {\n\n  const dateInput =\n    document.getElementById(\n      \"gregDate\"\n    );\n\n\n  if (!dateInput) return;\n\n\n  const today =\n    new Date();\n\n\n  const yyyy =\n    today.getFullYear();\n\n\n  const mm =\n    String(\n      today.getMonth() + 1\n    ).padStart(2, \"0\");\n\n\n  const dd =\n    String(\n      today.getDate()\n    ).padStart(2, \"0\");\n\n\n  dateInput.value =\n    `${yyyy}-${mm}-${dd}`;\n}\n\n\n\/\/ ========================================\n\/\/ PAGE INITIALIZATION\n\/\/ ========================================\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n    setTodayHijriConverter();\n\n\n    setupHijriConverterTabs();\n\n\n    const todayButton =\n      document.getElementById(\n        \"useTodayBtn\"\n      );\n\n\n    if (todayButton) {\n\n      todayButton.addEventListener(\n        \"click\",\n        function () {\n\n          setTodayHijriConverter();\n\n          convertHijri();\n        }\n      );\n    }\n\n\n    const gregorianButton =\n      document.getElementById(\n        \"convertToGregorianBtn\"\n      );\n\n\n    if (gregorianButton) {\n\n      gregorianButton.addEventListener(\n        \"click\",\n        convertToGregorian\n      );\n    }\n\n  }\n);\n<\/script>\n\n<section class=\"it-tool-page\">\n  <div class=\"it-wrap\">\n\n    <!-- =====================================\n         PAGE HEADER\n    ====================================== -->\n    <header class=\"it-tool-header\">\n\n      <span class=\"it-badge\">\ud83c\udf19 Islamic Calendar<\/span>\n\n      <h1>Hijri Date Converter<\/h1>\n\n      <p>\n        Convert Gregorian dates to Hijri and Hijri dates to Gregorian using\n        our free Islamic date converter. Check Islamic calendar dates in\n        English and Arabic, compare calendar information, and understand why\n        Hijri dates may vary between countries.\n      <\/p>\n\n    <\/header>\n\n\n    <!-- =====================================\n         MAIN HIJRI CONVERTER\n    ====================================== -->\n    <div class=\"it-tool-layout\">\n\n      <div class=\"it-tool-card it-hijri-converter-card\">\n\n        <h2>Convert Gregorian and Hijri Dates<\/h2>\n\n        <p class=\"it-tool-intro\">\n          Choose a conversion direction below and enter your date.\n        <\/p>\n\n\n        <!-- Conversion Tabs -->\n        <div\n          class=\"it-converter-tabs\"\n          role=\"tablist\"\n          aria-label=\"Hijri date conversion direction\"\n        >\n\n          <button\n            type=\"button\"\n            class=\"it-converter-tab is-active\"\n            id=\"gregToHijriTab\"\n            role=\"tab\"\n            aria-selected=\"true\"\n            aria-controls=\"gregToHijriPanel\"\n            data-mode=\"g-to-h\"\n          >\n            Gregorian \u2192 Hijri\n          <\/button>\n\n          <button\n            type=\"button\"\n            class=\"it-converter-tab\"\n            id=\"hijriToGregTab\"\n            role=\"tab\"\n            aria-selected=\"false\"\n            aria-controls=\"hijriToGregPanel\"\n            data-mode=\"h-to-g\"\n          >\n            Hijri \u2192 Gregorian\n          <\/button>\n\n        <\/div>\n\n\n        <!-- =====================================\n             GREGORIAN TO HIJRI\n        ====================================== -->\n        <div\n          class=\"it-converter-panel is-active\"\n          id=\"gregToHijriPanel\"\n          role=\"tabpanel\"\n          aria-labelledby=\"gregToHijriTab\"\n        >\n\n          <label for=\"gregDate\">\n            Gregorian Date\n          <\/label>\n\n          <input\n            class=\"it-input\"\n            id=\"gregDate\"\n            type=\"date\"\n          >\n\n          <div class=\"it-converter-actions\">\n\n            <button\n              class=\"it-btn it-primary it-load-btn\"\n              type=\"button\"\n              id=\"convertToHijriBtn\"\n              onclick=\"convertHijri()\"\n            >\n              Convert to Hijri\n            <\/button>\n\n            <button\n              class=\"it-btn it-light\"\n              type=\"button\"\n              id=\"useTodayBtn\"\n            >\n              Use Today&#8217;s Date\n            <\/button>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- =====================================\n             HIJRI TO GREGORIAN\n        ====================================== -->\n        <div\n          class=\"it-converter-panel\"\n          id=\"hijriToGregPanel\"\n          role=\"tabpanel\"\n          aria-labelledby=\"hijriToGregTab\"\n          hidden\n        >\n\n          <div class=\"it-hijri-input-grid\">\n\n            <div>\n              <label for=\"hijriDay\">\n                Hijri Day\n              <\/label>\n\n              <select\n                class=\"it-input\"\n                id=\"hijriDay\"\n              >\n                <option value=\"\">Day<\/option>\n                <option value=\"1\">1<\/option>\n                <option value=\"2\">2<\/option>\n                <option value=\"3\">3<\/option>\n                <option value=\"4\">4<\/option>\n                <option value=\"5\">5<\/option>\n                <option value=\"6\">6<\/option>\n                <option value=\"7\">7<\/option>\n                <option value=\"8\">8<\/option>\n                <option value=\"9\">9<\/option>\n                <option value=\"10\">10<\/option>\n                <option value=\"11\">11<\/option>\n                <option value=\"12\">12<\/option>\n                <option value=\"13\">13<\/option>\n                <option value=\"14\">14<\/option>\n                <option value=\"15\">15<\/option>\n                <option value=\"16\">16<\/option>\n                <option value=\"17\">17<\/option>\n                <option value=\"18\">18<\/option>\n                <option value=\"19\">19<\/option>\n                <option value=\"20\">20<\/option>\n                <option value=\"21\">21<\/option>\n                <option value=\"22\">22<\/option>\n                <option value=\"23\">23<\/option>\n                <option value=\"24\">24<\/option>\n                <option value=\"25\">25<\/option>\n                <option value=\"26\">26<\/option>\n                <option value=\"27\">27<\/option>\n                <option value=\"28\">28<\/option>\n                <option value=\"29\">29<\/option>\n                <option value=\"30\">30<\/option>\n              <\/select>\n            <\/div>\n\n\n            <div>\n              <label for=\"hijriMonth\">\n                Hijri Month\n              <\/label>\n\n              <select\n                class=\"it-input\"\n                id=\"hijriMonth\"\n              >\n                <option value=\"\">\n                  Select Month\n                <\/option>\n\n                <option value=\"1\">\n                  Muharram\n                <\/option>\n\n                <option value=\"2\">\n                  Safar\n                <\/option>\n\n                <option value=\"3\">\n                  Rabi al-Awwal\n                <\/option>\n\n                <option value=\"4\">\n                  Rabi al-Thani\n                <\/option>\n\n                <option value=\"5\">\n                  Jumada al-Awwal\n                <\/option>\n\n                <option value=\"6\">\n                  Jumada al-Thani\n                <\/option>\n\n                <option value=\"7\">\n                  Rajab\n                <\/option>\n\n                <option value=\"8\">\n                  Sha&#8217;ban\n                <\/option>\n\n                <option value=\"9\">\n                  Ramadan\n                <\/option>\n\n                <option value=\"10\">\n                  Shawwal\n                <\/option>\n\n                <option value=\"11\">\n                  Dhul Qa&#8217;dah\n                <\/option>\n\n                <option value=\"12\">\n                  Dhul Hijjah\n                <\/option>\n\n              <\/select>\n            <\/div>\n\n\n            <div>\n              <label for=\"hijriYear\">\n                Hijri Year\n              <\/label>\n\n              <input\n                class=\"it-input\"\n                id=\"hijriYear\"\n                type=\"number\"\n                inputmode=\"numeric\"\n                min=\"1\"\n                max=\"2000\"\n                placeholder=\"1448\"\n              >\n            <\/div>\n\n          <\/div>\n\n\n          <button\n            class=\"it-btn it-primary it-load-btn\"\n            type=\"button\"\n            id=\"convertToGregorianBtn\"\n          >\n            Convert to Gregorian\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- =====================================\n           RESULT AREA\n      ====================================== -->\n      <div\n        class=\"it-result-card\"\n        id=\"hijriResult\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n\n        <div class=\"it-result-placeholder\">\n\n          <strong>\n            Your converted date will appear here.\n          <\/strong>\n\n          <p>\n            Select a date and choose a conversion direction.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================\n         CALCULATION METHOD NOTE\n    ====================================== -->\n    <aside class=\"it-note it-tool-note\">\n\n      <h2>About Hijri Date Accuracy<\/h2>\n\n      <p>\n        This converter uses a calculated Islamic calendar reference for date\n        conversion. Hijri dates used for religious observances may differ by\n        one day depending on moon sighting, country, local Islamic authority,\n        time zone, and the calendar method being followed.\n      <\/p>\n\n      <p>\n        Always follow the official Islamic authority in your country when\n        confirming dates such as the beginning of Ramadan, Eid al-Fitr,\n        Eid al-Adha, and Dhul Hijjah.\n      <\/p>\n\n    <\/aside>\n\n\n    <!-- =====================================\n         WHAT IS A HIJRI DATE CONVERTER\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>What Is a Hijri Date Converter?<\/h2>\n\n      <p>\n        A Hijri date converter allows you to convert dates between the\n        Gregorian calendar and the Islamic Hijri calendar. It can help you\n        find the Islamic date corresponding to a birthday, event, historical\n        date, appointment, or any other Gregorian calendar date.\n      <\/p>\n\n      <p>\n        You can also convert a Hijri date back to its corresponding Gregorian\n        date, making the tool useful for understanding Islamic dates across\n        both calendar systems.\n      <\/p>\n\n    <\/section>\n\n\n    <!-- =====================================\n         HOW TO USE\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>How to Convert Gregorian Date to Hijri<\/h2>\n\n      <ol>\n        <li>\n          Select <strong>Gregorian \u2192 Hijri<\/strong>.\n        <\/li>\n\n        <li>\n          Choose the Gregorian date you want to convert.\n        <\/li>\n\n        <li>\n          Click <strong>Convert to Hijri<\/strong>.\n        <\/li>\n\n        <li>\n          View the corresponding Hijri day, month, and year.\n        <\/li>\n      <\/ol>\n\n\n      <h2>How to Convert Hijri Date to Gregorian<\/h2>\n\n      <ol>\n        <li>\n          Select <strong>Hijri \u2192 Gregorian<\/strong>.\n        <\/li>\n\n        <li>\n          Enter the Hijri day, month, and year.\n        <\/li>\n\n        <li>\n          Click <strong>Convert to Gregorian<\/strong>.\n        <\/li>\n\n        <li>\n          View the corresponding Gregorian calendar date.\n        <\/li>\n      <\/ol>\n\n    <\/section>\n\n\n    <!-- =====================================\n         CALENDAR COMPARISON\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>Gregorian Calendar vs Hijri Calendar<\/h2>\n\n      <p>\n        The Gregorian calendar is a solar calendar used internationally for\n        civil dates. A Gregorian year normally contains 365 days, with a leap\n        year containing 366 days.\n      <\/p>\n\n      <p>\n        The Hijri calendar, also known as the Islamic calendar, is based on\n        lunar months. A Hijri year is approximately 354 or 355 days long,\n        which makes it around 10 to 12 days shorter than a Gregorian year.\n      <\/p>\n\n      <p>\n        Because of this difference, Islamic months such as Ramadan move\n        through different seasons of the Gregorian calendar over time.\n      <\/p>\n\n    <\/section>\n\n\n    <!-- =====================================\n         HIJRI MONTHS\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>12 Months of the Islamic Hijri Calendar<\/h2>\n\n      <p>\n        The Islamic calendar contains 12 lunar months:\n      <\/p>\n\n\n      <div class=\"it-hijri-month-grid\">\n\n        <div class=\"it-hijri-month-item\">\n          <strong>1. Muharram<\/strong>\n          <span>\u0645\u064f\u062d\u064e\u0631\u064e\u0651\u0645<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>2. Safar<\/strong>\n          <span>\u0635\u064e\u0641\u064e\u0631<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>3. Rabi al-Awwal<\/strong>\n          <span>\u0631\u064e\u0628\u0650\u064a\u0639 \u0671\u0644\u0652\u0623\u064e\u0648\u064e\u0651\u0644<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>4. Rabi al-Thani<\/strong>\n          <span>\u0631\u064e\u0628\u0650\u064a\u0639 \u0671\u0644\u062b\u064e\u0651\u0627\u0646\u0650\u064a<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>5. Jumada al-Awwal<\/strong>\n          <span>\u062c\u064f\u0645\u064e\u0627\u062f\u064e\u0649\u0670 \u0671\u0644\u0652\u0623\u064f\u0648\u0644\u064e\u0649\u0670<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>6. Jumada al-Thani<\/strong>\n          <span>\u062c\u064f\u0645\u064e\u0627\u062f\u064e\u0649\u0670 \u0671\u0644\u062b\u064e\u0651\u0627\u0646\u0650\u064a\u064e\u0629<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>7. Rajab<\/strong>\n          <span>\u0631\u064e\u062c\u064e\u0628<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>8. Sha&#8217;ban<\/strong>\n          <span>\u0634\u064e\u0639\u0652\u0628\u064e\u0627\u0646<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>9. Ramadan<\/strong>\n          <span>\u0631\u064e\u0645\u064e\u0636\u064e\u0627\u0646<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>10. Shawwal<\/strong>\n          <span>\u0634\u064e\u0648\u064e\u0651\u0627\u0644<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>11. Dhul Qa&#8217;dah<\/strong>\n          <span>\u0630\u064f\u0648 \u0671\u0644\u0652\u0642\u064e\u0639\u0652\u062f\u064e\u0629<\/span>\n        <\/div>\n\n        <div class=\"it-hijri-month-item\">\n          <strong>12. Dhul Hijjah<\/strong>\n          <span>\u0630\u064f\u0648 \u0671\u0644\u0652\u062d\u0650\u062c\u064e\u0651\u0629<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =====================================\n         WHY DATES DIFFER\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>Why Can Hijri Dates Differ Between Websites?<\/h2>\n\n      <p>\n        Two Hijri date converters may occasionally show dates that differ by\n        one day. This does not necessarily mean that one of the converters is\n        incorrect.\n      <\/p>\n\n      <p>\n        Differences can occur because Islamic calendars may use different\n        calculation methods, moon-sighting practices, geographical locations,\n        time zones, or official religious announcements.\n      <\/p>\n\n      <p>\n        For everyday date conversion, a calculated Hijri date provides a\n        useful reference. For religious observances, follow the announcement\n        of the recognized Islamic authority in your country.\n      <\/p>\n\n    <\/section>\n\n\n    <!-- =====================================\n         WHY HIJRI DATES MATTER\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>Why Are Hijri Dates Important?<\/h2>\n\n      <p>\n        Muslims use the Hijri calendar to identify important Islamic months,\n        worship periods, and religious occasions throughout the year.\n      <\/p>\n\n      <p>\n        Important Hijri dates include the beginning of Ramadan, Eid al-Fitr,\n        the days of Hajj, Arafah, Eid al-Adha, Ashura, and other significant\n        Islamic dates.\n      <\/p>\n\n    <\/section>\n\n\n    <!-- =====================================\n         RELATED ISLAMIC TOOLS\n    ====================================== -->\n    <section class=\"it-content-section\">\n\n      <h2>Related Islamic Tools<\/h2>\n\n      <p>\n        You may also find these Islamic tools useful:\n      <\/p>\n\n      <div class=\"it-related-tools\">\n\n        <a\n          class=\"it-card\"\n          href=\"https:\/\/oks.digital\/prayer-times\/\"\n        >\n          <h3>\ud83d\udd4c Prayer Times<\/h3>\n\n          <p>\n            Check today&#8217;s Islamic prayer times and Salah schedule.\n          <\/p>\n        <\/a>\n\n\n        <a\n          class=\"it-card\"\n          href=\"https:\/\/oks.digital\/qibla-direction\/\"\n        >\n          <h3>\ud83e\udded Qibla Direction Finder<\/h3>\n\n          <p>\n            Find the Qibla direction from your current location.\n          <\/p>\n        <\/a>\n\n\n        <a\n          class=\"it-card\"\n          href=\"https:\/\/oks.digital\/zakat-calculator\/\"\n        >\n          <h3>\ud83d\udcb0 Zakat Calculator<\/h3>\n\n          <p>\n            Calculate your estimated Zakat amount online.\n          <\/p>\n        <\/a>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =====================================\n         FAQs\n    ====================================== -->\n    <section class=\"it-content-section it-faq-section\">\n\n      <h2>Hijri Date Converter FAQs<\/h2>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          What is today&#8217;s Hijri date?\n        <\/h3>\n\n        <p>\n          Today&#8217;s Hijri date depends on your location, time zone, calculation\n          method, and local moon-sighting practice. Use the converter above\n          with today&#8217;s Gregorian date to find the calculated Islamic date.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          How do I convert a Gregorian date to Hijri?\n        <\/h3>\n\n        <p>\n          Select Gregorian \u2192 Hijri, choose the Gregorian date, and click\n          Convert to Hijri. The corresponding Islamic date will appear in the\n          result area.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          Can I convert a Hijri date to Gregorian?\n        <\/h3>\n\n        <p>\n          Yes. Select Hijri \u2192 Gregorian, enter the Hijri day, month, and year,\n          and convert it to the corresponding Gregorian date.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          Is the Hijri date the same in every country?\n        <\/h3>\n\n        <p>\n          Not always. The Islamic date may differ by one day depending on moon\n          sighting, location, calculation method, and the decision of the\n          official Islamic authority.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          Why does one Hijri converter show a different date?\n        <\/h3>\n\n        <p>\n          Different websites may use different Islamic calendar calculation\n          methods or geographical settings. Local moon-sighting decisions can\n          also result in a one-day difference.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          Can I convert past and future dates?\n        <\/h3>\n\n        <p>\n          Yes. The converter can be used to check past, current, and future\n          dates within the supported calendar range.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"it-faq-item\">\n\n        <h3>\n          What is another name for the Hijri calendar?\n        <\/h3>\n\n        <p>\n          The Hijri calendar is also known as the Islamic calendar or Islamic\n          lunar calendar.\n        <\/p>\n\n      <\/div>\n\n    <\/section>\n\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf19 Islamic Calendar Hijri Date Converter Convert Gregorian dates to Hijri and Hijri dates to Gregorian using our free Islamic date converter. Check Islamic calendar dates in English and Arabic, compare calendar information, and understand why Hijri dates may vary between countries. Convert Gregorian and Hijri Dates Choose a conversion direction below and enter your&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-151","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"kashi883@gmail.com","author_link":"https:\/\/oks.digital\/ar\/author\/kashi883gmail-com\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":17,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/151\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/151\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/media?parent=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}