{"id":220,"date":"2026-07-12T14:54:41","date_gmt":"2026-07-12T14:54:41","guid":{"rendered":"https:\/\/oks.digital\/?page_id=220"},"modified":"2026-07-12T14:54:42","modified_gmt":"2026-07-12T14:54:42","slug":"prayer-times-al-ain","status":"publish","type":"page","link":"https:\/\/oks.digital\/ar\/prayer-times-al-ain\/","title":{"rendered":"Al Ain Prayer Times Today"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n#aa-prayer-page,\n#aa-prayer-page * {\n  box-sizing: border-box;\n}\n\n#aa-prayer-page {\n  --aa-dark: #10251b;\n  --aa-green: #176b43;\n  --aa-green-dark: #0f4f31;\n  --aa-green-light: #e7f6ee;\n  --aa-text: #53645b;\n  --aa-border: #dceae2;\n  --aa-soft: #f5faf7;\n  --aa-gold-soft: #fff8e9;\n  --aa-white: #ffffff;\n  color: var(--aa-text);\n}\n\n.aa-wrap {\n  width: min(1120px, 92%);\n  margin: 0 auto;\n}\n\n.aa-hero {\n  padding: 38px 0 58px;\n  background:\n    radial-gradient(\n      circle at 88% 14%,\n      rgba(23, 107, 67, 0.12),\n      transparent 28%\n    ),\n    linear-gradient(\n      135deg,\n      #f3fbf7 0%,\n      #ffffff 55%,\n      #eef8f3 100%\n    );\n}\n\n.aa-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 7px;\n  align-items: center;\n  margin-bottom: 32px;\n  color: #718078;\n  font-size: 13px;\n}\n\n.aa-breadcrumb a {\n  color: var(--aa-green);\n  text-decoration: none;\n}\n\n.aa-hero-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);\n  gap: 42px;\n  align-items: center;\n}\n\n.aa-badge,\n.aa-eyebrow {\n  display: inline-block;\n  color: var(--aa-green);\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.aa-badge {\n  padding: 8px 14px;\n  border: 1px solid #c8e5d4;\n  border-radius: 999px;\n  background: var(--aa-green-light);\n}\n\n.aa-eyebrow {\n  margin-bottom: 9px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.aa-hero h1 {\n  max-width: 720px;\n  margin: 18px 0;\n  color: var(--aa-dark);\n  font-size: clamp(38px, 5vw, 61px);\n  font-weight: 800;\n  letter-spacing: -1.4px;\n  line-height: 1.07;\n}\n\n.aa-hero-content > p {\n  max-width: 730px;\n  margin: 0 0 21px;\n  font-size: 18px;\n  line-height: 1.75;\n}\n\n.aa-location {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  padding: 9px 13px;\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.78);\n  color: #3d5046;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.aa-next-card {\n  padding: 27px;\n  border: 1px solid var(--aa-border);\n  border-radius: 22px;\n  background: var(--aa-white);\n  box-shadow: 0 18px 48px rgba(16, 37, 27, 0.11);\n}\n\n.aa-next-label {\n  display: inline-block;\n  margin-bottom: 17px;\n  color: var(--aa-green);\n  font-size: 13px;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n\n.aa-next-main {\n  display: flex;\n  gap: 20px;\n  align-items: flex-end;\n  justify-content: space-between;\n}\n\n.aa-next-main strong,\n.aa-next-main span,\n.aa-countdown-wrap span,\n.aa-countdown-wrap strong {\n  display: block;\n}\n\n.aa-next-main > div:first-child strong {\n  color: var(--aa-dark);\n  font-size: 30px;\n}\n\n.aa-next-main > div:first-child span {\n  margin-top: 4px;\n  color: var(--aa-green);\n  font-size: 22px;\n  font-weight: 800;\n}\n\n.aa-countdown-wrap {\n  text-align: right;\n}\n\n.aa-countdown-wrap span {\n  margin-bottom: 4px;\n  font-size: 11px;\n}\n\n.aa-countdown-wrap strong {\n  color: var(--aa-dark);\n  font-size: 20px;\n}\n\n.aa-next-card > p {\n  margin: 17px 0 0;\n  padding-top: 15px;\n  border-top: 1px solid var(--aa-border);\n  font-size: 13px;\n}\n\n.aa-today-section,\n.aa-content-section {\n  padding: 66px 0;\n  background: var(--aa-white);\n}\n\n.aa-section-heading {\n  display: flex;\n  gap: 24px;\n  align-items: flex-end;\n  justify-content: space-between;\n  margin-bottom: 27px;\n}\n\n.aa-section-heading h2,\n.aa-content-section h2 {\n  margin: 0;\n  color: var(--aa-dark);\n  font-size: clamp(28px, 4vw, 40px);\n  line-height: 1.18;\n}\n\n.aa-section-heading p {\n  max-width: 700px;\n  margin: 11px 0 0;\n  font-size: 16px;\n  line-height: 1.7;\n}\n\n.aa-date-display {\n  min-width: 210px;\n  text-align: right;\n}\n\n.aa-date-display strong,\n.aa-date-display span {\n  display: block;\n}\n\n.aa-date-display strong {\n  color: var(--aa-dark);\n  font-size: 15px;\n}\n\n.aa-date-display span {\n  margin-top: 4px;\n  font-size: 13px;\n}\n\n.aa-status {\n  min-height: 21px;\n  margin-bottom: 13px;\n  font-size: 13px;\n}\n\n.aa-error {\n  margin-bottom: 16px;\n  padding: 13px 15px;\n  border-left: 4px solid #c43b35;\n  border-radius: 10px;\n  background: #fff1f1;\n  color: #8c2823;\n}\n\n.aa-prayer-grid {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: 13px;\n}\n\n.aa-prayer-card {\n  padding: 18px 14px;\n  border: 1px solid var(--aa-border);\n  border-radius: 16px;\n  background: linear-gradient(180deg, #ffffff, #f7fbf9);\n  text-align: center;\n}\n\n.aa-prayer-card.aa-sunrise {\n  background: linear-gradient(180deg, #fffdf8, var(--aa-gold-soft));\n}\n\n.aa-prayer-icon {\n  display: flex;\n  width: 43px;\n  height: 43px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 11px;\n  border-radius: 13px;\n  background: var(--aa-green-light);\n  font-size: 21px;\n}\n\n.aa-prayer-name,\n.aa-prayer-card time,\n.aa-prayer-card small {\n  display: block;\n}\n\n.aa-prayer-name {\n  color: #41544a;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.aa-prayer-card time {\n  margin: 7px 0 5px;\n  color: var(--aa-green);\n  font-size: 18px;\n  font-weight: 800;\n  white-space: nowrap;\n}\n\n.aa-prayer-card small {\n  color: #7b8881;\n  font-size: 11px;\n}\n\n.aa-settings {\n  margin-top: 25px;\n  padding: 22px;\n  border: 1px solid var(--aa-border);\n  border-radius: 16px;\n  background: var(--aa-soft);\n}\n\n.aa-settings-heading h3 {\n  margin: 0 0 4px;\n  color: var(--aa-dark);\n}\n\n.aa-settings-heading p {\n  margin: 0;\n  font-size: 13px;\n}\n\n.aa-settings-grid {\n  display: grid;\n  grid-template-columns: 1.3fr 0.8fr auto;\n  gap: 12px;\n  align-items: end;\n  margin-top: 17px;\n}\n\n.aa-field label,\n.aa-calendar-controls label {\n  display: block;\n  margin-bottom: 6px;\n  color: #41544a;\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.aa-field select,\n.aa-calendar-controls select {\n  width: 100%;\n  min-height: 46px;\n  padding: 10px;\n  border: 1px solid #cbded4;\n  border-radius: 10px;\n  background: var(--aa-white);\n  font: inherit;\n}\n\n.aa-button {\n  min-height: 46px;\n  padding: 11px 18px;\n  border: 0;\n  border-radius: 10px;\n  background: var(--aa-green);\n  color: var(--aa-white);\n  cursor: pointer;\n  font: inherit;\n  font-weight: 700;\n}\n\n.aa-button:hover {\n  background: var(--aa-green-dark);\n}\n\n.aa-button:disabled,\n.aa-field select:disabled,\n.aa-calendar-controls select:disabled {\n  opacity: 0.6;\n}\n\n.aa-settings-note {\n  margin: 13px 0 0;\n  font-size: 12px;\n}\n\n.aa-calendar-section {\n  padding: 66px 0;\n  background: var(--aa-soft);\n}\n\n.aa-calendar-controls {\n  display: grid;\n  grid-template-columns: 145px 105px;\n  gap: 9px;\n}\n\n.aa-table-wrap {\n  overflow-x: auto;\n  border: 1px solid var(--aa-border);\n  border-radius: 15px;\n  background: var(--aa-white);\n}\n\n.aa-calendar-table {\n  width: 100%;\n  min-width: 800px;\n  border-collapse: collapse;\n}\n\n.aa-calendar-table th,\n.aa-calendar-table td {\n  padding: 13px 12px;\n  border-bottom: 1px solid #e8f0eb;\n  text-align: center;\n  white-space: nowrap;\n}\n\n.aa-calendar-table th {\n  background: var(--aa-green);\n  color: var(--aa-white);\n  font-size: 12px;\n  text-transform: uppercase;\n}\n\n.aa-calendar-table td {\n  color: #405249;\n  font-size: 13px;\n}\n\n.aa-calendar-table tbody tr.aa-today-row {\n  background: #e9f7ef;\n  font-weight: 700;\n}\n\n.aa-calendar-table td small {\n  display: block;\n  margin-top: 3px;\n  color: #7a8980;\n  font-size: 10px;\n}\n\n.aa-scroll-note {\n  margin: 10px 0 0;\n  font-size: 12px;\n}\n\n.aa-content-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr);\n  gap: 47px;\n}\n\n.aa-content-grid article > p {\n  margin: 17px 0 0;\n  font-size: 16px;\n  line-height: 1.8;\n}\n\n.aa-information-card {\n  padding: 25px;\n  border: 1px solid var(--aa-border);\n  border-radius: 17px;\n  background: var(--aa-soft);\n}\n\n.aa-information-card h3 {\n  margin: 0 0 15px;\n  color: var(--aa-dark);\n}\n\n.aa-information-card dl {\n  margin: 0;\n}\n\n.aa-information-card dl > div {\n  padding: 12px 0;\n  border-bottom: 1px solid var(--aa-border);\n}\n\n.aa-information-card dt {\n  margin-bottom: 3px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.aa-information-card dd {\n  margin: 0;\n  color: #34483d;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.aa-soft-section {\n  background: var(--aa-soft);\n}\n\n.aa-explanation-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 17px;\n}\n\n.aa-explanation-grid article {\n  padding: 21px;\n  border: 1px solid var(--aa-border);\n  border-radius: 15px;\n  background: var(--aa-white);\n}\n\n.aa-explanation-grid h3 {\n  margin: 0 0 8px;\n  color: var(--aa-dark);\n  font-size: 18px;\n}\n\n.aa-explanation-grid p {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.65;\n}\n\n.aa-faq-list {\n  display: grid;\n  gap: 11px;\n  max-width: 900px;\n}\n\n.aa-faq {\n  border: 1px solid var(--aa-border);\n  border-radius: 13px;\n}\n\n.aa-faq summary {\n  position: relative;\n  padding: 17px 50px 17px 19px;\n  color: var(--aa-dark);\n  cursor: pointer;\n  font-weight: 700;\n  list-style: none;\n}\n\n.aa-faq summary::-webkit-details-marker {\n  display: none;\n}\n\n.aa-faq summary::after {\n  position: absolute;\n  top: 50%;\n  right: 19px;\n  color: var(--aa-green);\n  content: \"+\";\n  font-size: 23px;\n  transform: translateY(-50%);\n}\n\n.aa-faq[open] summary::after {\n  content: \"\u2212\";\n}\n\n.aa-faq p {\n  margin: 0;\n  padding: 0 19px 18px;\n  font-size: 14px;\n  line-height: 1.7;\n}\n\n.aa-official-note {\n  display: grid;\n  grid-template-columns: 48px 1fr;\n  gap: 16px;\n  margin-top: 30px;\n  padding: 25px;\n  border: 1px solid #d2e7db;\n  border-left: 5px solid var(--aa-green);\n  border-radius: 16px;\n  background: var(--aa-soft);\n}\n\n.aa-note-icon {\n  display: flex;\n  width: 46px;\n  height: 46px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 13px;\n  background: var(--aa-green-light);\n}\n\n.aa-official-note h2 {\n  margin-bottom: 7px;\n  font-size: 23px;\n}\n\n.aa-official-note p {\n  margin: 0 0 10px;\n  font-size: 14px;\n  line-height: 1.7;\n}\n\n.aa-official-note a {\n  color: var(--aa-green);\n  font-weight: 700;\n  text-decoration: none;\n}\n\n@media (max-width: 980px) {\n  .aa-prayer-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .aa-explanation-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 820px) {\n  .aa-hero-grid,\n  .aa-content-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .aa-section-heading {\n    display: grid;\n  }\n\n  .aa-date-display {\n    text-align: left;\n  }\n\n  .aa-settings-grid {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .aa-button {\n    grid-column: 1 \/ -1;\n  }\n}\n\n@media (max-width: 620px) {\n  .aa-hero {\n    padding: 28px 0 43px;\n  }\n\n  .aa-hero h1 {\n    font-size: 38px;\n  }\n\n  .aa-next-main {\n    display: grid;\n  }\n\n  .aa-countdown-wrap {\n    text-align: left;\n  }\n\n  .aa-today-section,\n  .aa-calendar-section,\n  .aa-content-section {\n    padding: 48px 0;\n  }\n\n  .aa-prayer-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .aa-settings-grid,\n  .aa-explanation-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .aa-calendar-controls {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .aa-official-note {\n    grid-template-columns: 1fr;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \"use strict\";\n\n  const API_BASE = \"https:\/\/api.aladhan.com\/v1\";\n  const CITY = \"Al Ain\";\n  const COUNTRY = \"United Arab Emirates\";\n  const TIMEZONE = \"Asia\/Dubai\";\n  const REQUEST_TIMEOUT = 12000;\n\n  let countdownInterval = null;\n\n  function initializeAlAinPrayerPage() {\n    const page = document.getElementById(\"aa-prayer-page\");\n\n    if (!page) {\n      return;\n    }\n\n    const methodSelect = document.getElementById(\"aa-method\");\n    const schoolSelect = document.getElementById(\"aa-school\");\n    const reloadButton = document.getElementById(\"aa-reload\");\n    const statusBox = document.getElementById(\"aa-status\");\n    const errorBox = document.getElementById(\"aa-error\");\n    const monthSelect = document.getElementById(\"aa-month\");\n    const yearSelect = document.getElementById(\"aa-year\");\n\n    const calendarStatus = document.getElementById(\n      \"aa-calendar-status\"\n    );\n\n    const calendarBody = document.getElementById(\n      \"aa-calendar-body\"\n    );\n\n    const prayerNames = [\n      \"Fajr\",\n      \"Sunrise\",\n      \"Dhuhr\",\n      \"Asr\",\n      \"Maghrib\",\n      \"Isha\"\n    ];\n\n    const countdownNames = [\n      \"Fajr\",\n      \"Dhuhr\",\n      \"Asr\",\n      \"Maghrib\",\n      \"Isha\"\n    ];\n\n    function getAlAinDateParts(offsetDays) {\n      const shiftedDate = new Date(\n        Date.now() + (offsetDays || 0) * 86400000\n      );\n\n      const parts = new Intl.DateTimeFormat(\"en-GB\", {\n        timeZone: TIMEZONE,\n        year: \"numeric\",\n        month: \"2-digit\",\n        day: \"2-digit\"\n      }).formatToParts(shiftedDate);\n\n      const values = {};\n\n      parts.forEach(function (part) {\n        if (part.type !== \"literal\") {\n          values[part.type] = Number(part.value);\n        }\n      });\n\n      return {\n        year: values.year,\n        month: values.month,\n        day: values.day\n      };\n    }\n\n    function getApiDate(dateParts) {\n      return (\n        String(dateParts.day).padStart(2, \"0\") +\n        \"-\" +\n        String(dateParts.month).padStart(2, \"0\") +\n        \"-\" +\n        dateParts.year\n      );\n    }\n\n    function cleanTime(value) {\n      if (!value || typeof value !== \"string\") {\n        return \"--:--\";\n      }\n\n      return value.split(\" \")[0];\n    }\n\n    function formatTime(value) {\n      const cleanValue = cleanTime(value);\n      const parts = cleanValue.split(\":\");\n\n      if (parts.length < 2) {\n        return cleanValue;\n      }\n\n      let hour = parseInt(parts[0], 10);\n      const minute = parts[1];\n\n      if (Number.isNaN(hour)) {\n        return cleanValue;\n      }\n\n      const period = hour >= 12 ? \"PM\" : \"AM\";\n      hour = hour % 12 || 12;\n\n      return hour + \":\" + minute + \" \" + period;\n    }\n\n    function getMethod() {\n      return methodSelect.value || \"16\";\n    }\n\n    function getSchool() {\n      return schoolSelect.value || \"0\";\n    }\n\n    async function fetchJson(url) {\n      const controller = new AbortController();\n\n      const timeoutId = window.setTimeout(function () {\n        controller.abort();\n      }, REQUEST_TIMEOUT);\n\n      try {\n        const response = await fetch(url, {\n          method: \"GET\",\n          headers: {\n            Accept: \"application\/json\"\n          },\n          signal: controller.signal\n        });\n\n        if (!response.ok) {\n          throw new Error(\n            \"The prayer-time service could not be reached.\"\n          );\n        }\n\n        const result = await response.json();\n\n        if (\n          !result ||\n          Number(result.code) !== 200 ||\n          !result.data\n        ) {\n          throw new Error(\n            \"Prayer-time information is unavailable.\"\n          );\n        }\n\n        return result.data;\n      } catch (error) {\n        if (error.name === \"AbortError\") {\n          throw new Error(\n            \"The request took too long. Please check your internet connection.\"\n          );\n        }\n\n        throw error;\n      } finally {\n        window.clearTimeout(timeoutId);\n      }\n    }\n\n    async function fetchDay(dateParts) {\n      const parameters = new URLSearchParams({\n        city: CITY,\n        country: COUNTRY,\n        method: getMethod(),\n        school: getSchool()\n      });\n\n      const url =\n        API_BASE +\n        \"\/timingsByCity\/\" +\n        getApiDate(dateParts) +\n        \"?\" +\n        parameters.toString();\n\n      return fetchJson(url);\n    }\n\n    async function fetchCalendar(year, month) {\n      const parameters = new URLSearchParams({\n        city: CITY,\n        country: COUNTRY,\n        method: getMethod(),\n        school: getSchool()\n      });\n\n      const url =\n        API_BASE +\n        \"\/calendarByCity\/\" +\n        year +\n        \"\/\" +\n        month +\n        \"?\" +\n        parameters.toString();\n\n      return fetchJson(url);\n    }\n\n    function setLoading(isLoading) {\n      reloadButton.disabled = isLoading;\n      methodSelect.disabled = isLoading;\n      schoolSelect.disabled = isLoading;\n\n      reloadButton.textContent = isLoading\n        ? \"Loading...\"\n        : \"Update Timings\";\n    }\n\n    function showError(message) {\n      errorBox.textContent = message;\n      errorBox.hidden = false;\n      statusBox.textContent = \"\";\n    }\n\n    function clearError() {\n      errorBox.textContent = \"\";\n      errorBox.hidden = true;\n    }\n\n    function parseAlAinTime(dateParts, timeValue) {\n      const parts = cleanTime(timeValue).split(\":\");\n\n      return Date.UTC(\n        dateParts.year,\n        dateParts.month - 1,\n        dateParts.day,\n        Number(parts[0]) - 4,\n        Number(parts[1]),\n        0\n      );\n    }\n\n    function startCountdown(\n      prayerName,\n      timeValue,\n      dateParts\n    ) {\n      if (countdownInterval) {\n        window.clearInterval(countdownInterval);\n      }\n\n      const nameElement = document.getElementById(\n        \"aa-next-name\"\n      );\n\n      const timeElement = document.getElementById(\n        \"aa-next-time\"\n      );\n\n      const countdownElement = document.getElementById(\n        \"aa-countdown\"\n      );\n\n      const noteElement = document.getElementById(\n        \"aa-next-note\"\n      );\n\n      const targetTime = parseAlAinTime(\n        dateParts,\n        timeValue\n      );\n\n      nameElement.textContent = prayerName;\n      timeElement.textContent = formatTime(timeValue);\n\n      noteElement.textContent =\n        prayerName === \"Fajr tomorrow\"\n          ? \"The next prayer is tomorrow\u2019s Fajr.\"\n          : \"The next prayer today is \" +\n            prayerName +\n            \".\";\n\n      function updateCountdown() {\n        const difference = targetTime - Date.now();\n\n        if (difference <= 0) {\n          countdownElement.textContent = \"00:00:00\";\n          window.clearInterval(countdownInterval);\n\n          window.setTimeout(function () {\n            loadToday();\n          }, 1500);\n\n          return;\n        }\n\n        const totalSeconds = Math.floor(\n          difference \/ 1000\n        );\n\n        const hours = Math.floor(\n          totalSeconds \/ 3600\n        );\n\n        const minutes = Math.floor(\n          (totalSeconds % 3600) \/ 60\n        );\n\n        const seconds = totalSeconds % 60;\n\n        countdownElement.textContent =\n          String(hours).padStart(2, \"0\") +\n          \":\" +\n          String(minutes).padStart(2, \"0\") +\n          \":\" +\n          String(seconds).padStart(2, \"0\");\n      }\n\n      updateCountdown();\n\n      countdownInterval = window.setInterval(\n        updateCountdown,\n        1000\n      );\n    }\n\n    async function findNextPrayer(\n      todayData,\n      todayParts\n    ) {\n      const now = Date.now();\n\n      for (\n        let index = 0;\n        index < countdownNames.length;\n        index++\n      ) {\n        const prayerName = countdownNames[index];\n        const prayerTime = todayData.timings[prayerName];\n\n        const timestamp = parseAlAinTime(\n          todayParts,\n          prayerTime\n        );\n\n        if (timestamp > now) {\n          startCountdown(\n            prayerName,\n            prayerTime,\n            todayParts\n          );\n\n          return;\n        }\n      }\n\n      const tomorrowParts = getAlAinDateParts(1);\n      const tomorrowData = await fetchDay(tomorrowParts);\n\n      startCountdown(\n        \"Fajr tomorrow\",\n        tomorrowData.timings.Fajr,\n        tomorrowParts\n      );\n    }\n\n    function getHijriText(data) {\n      const hijri = data.date?.hijri;\n\n      if (!hijri) {\n        return \"Hijri date unavailable\";\n      }\n\n      if (\n        !hijri.day ||\n        !hijri.month?.en ||\n        !hijri.year\n      ) {\n        return \"Hijri date unavailable\";\n      }\n\n      return (\n        hijri.day +\n        \" \" +\n        hijri.month.en +\n        \" \" +\n        hijri.year +\n        \" AH\"\n      );\n    }\n\n    function displayToday(data, dateParts) {\n      prayerNames.forEach(function (prayerName) {\n        const element = document.getElementById(\n          \"aa-\" + prayerName\n        );\n\n        if (!element) {\n          return;\n        }\n\n        element.textContent = formatTime(\n          data.timings[prayerName]\n        );\n\n        element.setAttribute(\n          \"datetime\",\n          cleanTime(data.timings[prayerName])\n        );\n      });\n\n      document.getElementById(\n        \"aa-gregorian-date\"\n      ).textContent =\n        data.date?.readable || \"Date unavailable\";\n\n      document.getElementById(\n        \"aa-hijri-date\"\n      ).textContent = getHijriText(data);\n\n      statusBox.textContent =\n        \"Al Ain prayer times loaded successfully.\";\n\n      findNextPrayer(data, dateParts).catch(\n        function (error) {\n          console.error(\"Next-prayer error:\", error);\n\n          document.getElementById(\n            \"aa-next-note\"\n          ).textContent =\n            \"The next-prayer countdown is temporarily unavailable.\";\n        }\n      );\n    }\n\n    async function loadToday() {\n      const todayParts = getAlAinDateParts(0);\n\n      clearError();\n      setLoading(true);\n\n      statusBox.textContent =\n        \"Loading today\u2019s Al Ain prayer times...\";\n\n      try {\n        const data = await fetchDay(todayParts);\n        displayToday(data, todayParts);\n      } catch (error) {\n        console.error(\n          \"Today prayer-time error:\",\n          error\n        );\n\n        showError(\n          error.message ||\n            \"Unable to load today\u2019s prayer times.\"\n        );\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    function populateYears() {\n      const currentYear =\n        getAlAinDateParts(0).year;\n\n      yearSelect.innerHTML = \"\";\n\n      for (\n        let year = currentYear - 1;\n        year <= currentYear + 2;\n        year++\n      ) {\n        const option = document.createElement(\"option\");\n\n        option.value = String(year);\n        option.textContent = String(year);\n\n        if (year === currentYear) {\n          option.selected = true;\n        }\n\n        yearSelect.appendChild(option);\n      }\n    }\n\n    function displayCalendar(\n      data,\n      selectedYear,\n      selectedMonth\n    ) {\n      const todayParts = getAlAinDateParts(0);\n\n      calendarBody.innerHTML = \"\";\n\n      data.forEach(function (dayData) {\n        const row = document.createElement(\"tr\");\n        const gregorian = dayData.date.gregorian;\n        const hijri = dayData.date.hijri;\n        const dayNumber = Number(gregorian.day);\n\n        const sameYear =\n          selectedYear === todayParts.year;\n\n        const sameMonth =\n          selectedMonth === todayParts.month;\n\n        const sameDay =\n          dayNumber === todayParts.day;\n\n        if (sameYear) {\n          if (sameMonth) {\n            if (sameDay) {\n              row.classList.add(\"aa-today-row\");\n            }\n          }\n        }\n\n        const dateCell =\n          document.createElement(\"td\");\n\n        dateCell.textContent =\n          gregorian.day +\n          \" \" +\n          gregorian.month.en.slice(0, 3);\n\n        const hijriSmall =\n          document.createElement(\"small\");\n\n        hijriSmall.textContent =\n          hijri.day +\n          \" \" +\n          hijri.month.en.slice(0, 3);\n\n        dateCell.appendChild(hijriSmall);\n        row.appendChild(dateCell);\n\n        const dayCell =\n          document.createElement(\"td\");\n\n        dayCell.textContent =\n          gregorian.weekday.en;\n\n        row.appendChild(dayCell);\n\n        prayerNames.forEach(\n          function (prayerName) {\n            const cell =\n              document.createElement(\"td\");\n\n            cell.textContent = formatTime(\n              dayData.timings[prayerName]\n            );\n\n            row.appendChild(cell);\n          }\n        );\n\n        calendarBody.appendChild(row);\n      });\n\n      calendarStatus.textContent =\n        \"Monthly Al Ain prayer timetable loaded.\";\n    }\n\n    async function loadMonthlyCalendar() {\n      const selectedMonth =\n        Number(monthSelect.value);\n\n      const selectedYear =\n        Number(yearSelect.value);\n\n      monthSelect.disabled = true;\n      yearSelect.disabled = true;\n\n      calendarStatus.textContent =\n        \"Loading monthly Al Ain prayer timetable...\";\n\n      try {\n        const data = await fetchCalendar(\n          selectedYear,\n          selectedMonth\n        );\n\n        displayCalendar(\n          data,\n          selectedYear,\n          selectedMonth\n        );\n      } catch (error) {\n        console.error(\n          \"Monthly calendar error:\",\n          error\n        );\n\n        calendarStatus.textContent =\n          error.message ||\n          \"Unable to load the monthly timetable.\";\n      } finally {\n        monthSelect.disabled = false;\n        yearSelect.disabled = false;\n      }\n    }\n\n    function reloadAllTimings() {\n      loadToday();\n      loadMonthlyCalendar();\n    }\n\n    const currentDate = getAlAinDateParts(0);\n\n    populateYears();\n\n    monthSelect.value =\n      String(currentDate.month);\n\n    yearSelect.value =\n      String(currentDate.year);\n\n    reloadButton.addEventListener(\n      \"click\",\n      reloadAllTimings\n    );\n\n    monthSelect.addEventListener(\n      \"change\",\n      loadMonthlyCalendar\n    );\n\n    yearSelect.addEventListener(\n      \"change\",\n      loadMonthlyCalendar\n    );\n\n    loadToday();\n    loadMonthlyCalendar();\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializeAlAinPrayerPage\n    );\n  } else {\n    initializeAlAinPrayerPage();\n  }\n})();\n<\/script>\n\n<main id=\"aa-prayer-page\">\n\n  <section class=\"aa-hero\">\n    <div class=\"aa-wrap\">\n\n      <nav class=\"aa-breadcrumb\" aria-label=\"Breadcrumb\">\n        <a href=\"\/\">Home<\/a>\n        <span>\u203a<\/span>\n        <a href=\"\/prayer-times\/\">Prayer Times<\/a>\n        <span>\u203a<\/span>\n        <span>Al Ain<\/span>\n      <\/nav>\n\n      <div class=\"aa-hero-grid\">\n\n        <div class=\"aa-hero-content\">\n          <span class=\"aa-badge\">\ud83d\udd4c Al Ain Salah Timings<\/span>\n\n          <h1>Al Ain Prayer Times Today<\/h1>\n\n          <p>\n            Check today\u2019s Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha prayer\n            times in Al Ain, United Arab Emirates. View the next prayer and\n            complete monthly Salah timetable.\n          <\/p>\n\n          <div class=\"aa-location\">\n            <span aria-hidden=\"true\">\ud83d\udccd<\/span>\n            Al Ain, Abu Dhabi, United Arab Emirates\n          <\/div>\n        <\/div>\n\n        <div class=\"aa-next-card\">\n          <span class=\"aa-next-label\">Next prayer<\/span>\n\n          <div class=\"aa-next-main\">\n            <div>\n              <strong id=\"aa-next-name\">Loading...<\/strong>\n              <span id=\"aa-next-time\">--:--<\/span>\n            <\/div>\n\n            <div class=\"aa-countdown-wrap\">\n              <span>Time remaining<\/span>\n              <strong id=\"aa-countdown\">--:--:--<\/strong>\n            <\/div>\n          <\/div>\n\n          <p id=\"aa-next-note\">\n            Calculating the next prayer in Al Ain.\n          <\/p>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"aa-today-section\">\n    <div class=\"aa-wrap\">\n\n      <div class=\"aa-section-heading\">\n        <div>\n          <span class=\"aa-eyebrow\">Today\u2019s schedule<\/span>\n          <h2>Prayer Times in Al Ain Today<\/h2>\n        <\/div>\n\n        <div class=\"aa-date-display\">\n          <strong id=\"aa-gregorian-date\">Loading date...<\/strong>\n          <span id=\"aa-hijri-date\">Loading Hijri date...<\/span>\n        <\/div>\n      <\/div>\n\n      <div\n        id=\"aa-status\"\n        class=\"aa-status\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        Loading today\u2019s Al Ain prayer times...\n      <\/div>\n\n      <div id=\"aa-error\" class=\"aa-error\" role=\"alert\" hidden><\/div>\n\n      <div class=\"aa-prayer-grid\">\n\n        <article class=\"aa-prayer-card\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\ud83c\udf0c<\/span>\n          <span class=\"aa-prayer-name\">Fajr<\/span>\n          <time id=\"aa-Fajr\">--:--<\/time>\n          <small>Dawn prayer<\/small>\n        <\/article>\n\n        <article class=\"aa-prayer-card aa-sunrise\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\ud83c\udf05<\/span>\n          <span class=\"aa-prayer-name\">Sunrise<\/span>\n          <time id=\"aa-Sunrise\">--:--<\/time>\n          <small>Sunrise time<\/small>\n        <\/article>\n\n        <article class=\"aa-prayer-card\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\u2600\ufe0f<\/span>\n          <span class=\"aa-prayer-name\">Dhuhr<\/span>\n          <time id=\"aa-Dhuhr\">--:--<\/time>\n          <small>Midday prayer<\/small>\n        <\/article>\n\n        <article class=\"aa-prayer-card\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\ud83c\udf24\ufe0f<\/span>\n          <span class=\"aa-prayer-name\">Asr<\/span>\n          <time id=\"aa-Asr\">--:--<\/time>\n          <small>Afternoon prayer<\/small>\n        <\/article>\n\n        <article class=\"aa-prayer-card\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\ud83c\udf07<\/span>\n          <span class=\"aa-prayer-name\">Maghrib<\/span>\n          <time id=\"aa-Maghrib\">--:--<\/time>\n          <small>Sunset prayer<\/small>\n        <\/article>\n\n        <article class=\"aa-prayer-card\">\n          <span class=\"aa-prayer-icon\" aria-hidden=\"true\">\ud83c\udf19<\/span>\n          <span class=\"aa-prayer-name\">Isha<\/span>\n          <time id=\"aa-Isha\">--:--<\/time>\n          <small>Night prayer<\/small>\n        <\/article>\n\n      <\/div>\n\n      <div class=\"aa-settings\">\n        <div class=\"aa-settings-heading\">\n          <h3>Calculation Settings<\/h3>\n          <p>Change the settings if your mosque follows another method.<\/p>\n        <\/div>\n\n        <div class=\"aa-settings-grid\">\n\n          <div class=\"aa-field\">\n            <label for=\"aa-method\">Calculation method<\/label>\n\n            <select id=\"aa-method\">\n              <option value=\"16\">Dubai\/UAE preset \u2013 Experimental<\/option>\n              <option value=\"8\">Gulf Region<\/option>\n              <option value=\"3\">Muslim World League<\/option>\n              <option value=\"4\">Umm Al-Qura, Makkah<\/option>\n              <option value=\"1\">University of Karachi<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"aa-field\">\n            <label for=\"aa-school\">Asr calculation<\/label>\n\n            <select id=\"aa-school\">\n              <option value=\"0\">Standard<\/option>\n              <option value=\"1\">Hanafi<\/option>\n            <\/select>\n          <\/div>\n\n          <button type=\"button\" id=\"aa-reload\" class=\"aa-button\">\n            Update Timings\n          <\/button>\n\n        <\/div>\n\n        <p class=\"aa-settings-note\">\n          These are calculated times. Official Al Ain mosque timings may\n          include local adjustments.\n        <\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"aa-calendar-section\">\n    <div class=\"aa-wrap\">\n\n      <div class=\"aa-section-heading\">\n        <div>\n          <span class=\"aa-eyebrow\">Monthly calendar<\/span>\n          <h2>Al Ain Monthly Prayer Timetable<\/h2>\n\n          <p>\n            Select a month to view the complete daily Salah timetable for\n            Al Ain.\n          <\/p>\n        <\/div>\n\n        <div class=\"aa-calendar-controls\">\n          <div>\n            <label for=\"aa-month\">Month<\/label>\n\n            <select id=\"aa-month\">\n              <option value=\"1\">January<\/option>\n              <option value=\"2\">February<\/option>\n              <option value=\"3\">March<\/option>\n              <option value=\"4\">April<\/option>\n              <option value=\"5\">May<\/option>\n              <option value=\"6\">June<\/option>\n              <option value=\"7\">July<\/option>\n              <option value=\"8\">August<\/option>\n              <option value=\"9\">September<\/option>\n              <option value=\"10\">October<\/option>\n              <option value=\"11\">November<\/option>\n              <option value=\"12\">December<\/option>\n            <\/select>\n          <\/div>\n\n          <div>\n            <label for=\"aa-year\">Year<\/label>\n            <select id=\"aa-year\"><\/select>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div\n        id=\"aa-calendar-status\"\n        class=\"aa-status\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        Loading monthly timetable...\n      <\/div>\n\n      <div class=\"aa-table-wrap\">\n        <table class=\"aa-calendar-table\">\n          <thead>\n            <tr>\n              <th>Date<\/th>\n              <th>Day<\/th>\n              <th>Fajr<\/th>\n              <th>Sunrise<\/th>\n              <th>Dhuhr<\/th>\n              <th>Asr<\/th>\n              <th>Maghrib<\/th>\n              <th>Isha<\/th>\n            <\/tr>\n          <\/thead>\n\n          <tbody id=\"aa-calendar-body\"><\/tbody>\n        <\/table>\n      <\/div>\n\n      <p class=\"aa-scroll-note\">\n        On mobile, move the table left or right to view all prayer times.\n      <\/p>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"aa-content-section\">\n    <div class=\"aa-wrap\">\n\n      <div class=\"aa-content-grid\">\n\n        <article>\n          <span class=\"aa-eyebrow\">Daily Salah in Al Ain<\/span>\n\n          <h2>About Al Ain Prayer Times<\/h2>\n\n          <p>\n            Prayer times in Al Ain change slightly every day because they are\n            connected to the position of the sun. Fajr begins before sunrise,\n            Dhuhr begins after midday, Asr is in the afternoon, Maghrib begins\n            after sunset and Isha begins at night.\n          <\/p>\n\n          <p>\n            This page helps residents, workers and visitors check Salah times\n            in areas including Al Jimi, Al Mutarad, Al Towayya, Al Hili,\n            Zakher, Falaj Hazza and central Al Ain.\n          <\/p>\n\n          <p>\n            Al Ain prayer times can differ slightly from Abu Dhabi city because\n            the two locations have different coordinates. Always follow your\n            mosque for congregational prayer.\n          <\/p>\n        <\/article>\n\n        <aside class=\"aa-information-card\">\n          <h3>Al Ain Prayer Information<\/h3>\n\n          <dl>\n            <div>\n              <dt>Location<\/dt>\n              <dd>Al Ain, Abu Dhabi Emirate<\/dd>\n            <\/div>\n\n            <div>\n              <dt>Country<\/dt>\n              <dd>United Arab Emirates<\/dd>\n            <\/div>\n\n            <div>\n              <dt>Timezone<\/dt>\n              <dd>Asia\/Dubai \u2013 UTC+4<\/dd>\n            <\/div>\n\n            <div>\n              <dt>Daily prayers<\/dt>\n              <dd>Fajr, Dhuhr, Asr, Maghrib and Isha<\/dd>\n            <\/div>\n          <\/dl>\n        <\/aside>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"aa-content-section aa-soft-section\">\n    <div class=\"aa-wrap\">\n\n      <div class=\"aa-section-heading\">\n        <div>\n          <span class=\"aa-eyebrow\">Helpful guidance<\/span>\n          <h2>Understanding Al Ain Salah Times<\/h2>\n        <\/div>\n      <\/div>\n\n      <div class=\"aa-explanation-grid\">\n\n        <article>\n          <h3>Fajr time in Al Ain<\/h3>\n          <p>\n            Fajr begins at dawn before sunrise. Its calculated time depends\n            on the selected calculation method and Fajr angle.\n          <\/p>\n        <\/article>\n\n        <article>\n          <h3>Dhuhr time in Al Ain<\/h3>\n          <p>\n            Dhuhr begins after the sun passes its highest point during the\n            middle of the day.\n          <\/p>\n        <\/article>\n\n        <article>\n          <h3>Asr time in Al Ain<\/h3>\n          <p>\n            Asr is the afternoon prayer. Standard and Hanafi calculations may\n            show different starting times.\n          <\/p>\n        <\/article>\n\n        <article>\n          <h3>Maghrib time in Al Ain<\/h3>\n          <p>\n            Maghrib begins shortly after sunset. During Ramadan, it marks the\n            beginning of the daily fasting break.\n          <\/p>\n        <\/article>\n\n        <article>\n          <h3>Isha time in Al Ain<\/h3>\n          <p>\n            Isha begins after evening twilight and may differ depending on the\n            selected calculation method.\n          <\/p>\n        <\/article>\n\n        <article>\n          <h3>Friday prayer in Al Ain<\/h3>\n          <p>\n            Confirm current Friday prayer arrangements with your local mosque\n            or the responsible UAE Islamic authority.\n          <\/p>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"aa-content-section\">\n    <div class=\"aa-wrap\">\n\n      <div class=\"aa-section-heading\">\n        <div>\n          <span class=\"aa-eyebrow\">Common questions<\/span>\n          <h2>Al Ain Prayer Times FAQs<\/h2>\n        <\/div>\n      <\/div>\n\n      <div class=\"aa-faq-list\">\n\n        <details class=\"aa-faq\">\n          <summary>What are today\u2019s prayer times in Al Ain?<\/summary>\n          <p>\n            Today\u2019s Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha times are\n            displayed at the top of this page and updated daily.\n          <\/p>\n        <\/details>\n\n        <details class=\"aa-faq\">\n          <summary>Are Al Ain and Abu Dhabi prayer times the same?<\/summary>\n          <p>\n            Not always. Small differences can occur because Al Ain and Abu\n            Dhabi city have different geographical locations.\n          <\/p>\n        <\/details>\n\n        <details class=\"aa-faq\">\n          <summary>Why are my mosque\u2019s times slightly different?<\/summary>\n          <p>\n            Your mosque may use official local adjustments or another\n            calculation method. Follow your mosque for congregational prayer.\n          <\/p>\n        <\/details>\n\n        <details class=\"aa-faq\">\n          <summary>What is the difference between Standard and Hanafi Asr?<\/summary>\n          <p>\n            These methods use different shadow-length calculations to\n            determine when Asr begins.\n          <\/p>\n        <\/details>\n\n      <\/div>\n\n      <div class=\"aa-official-note\">\n        <div class=\"aa-note-icon\" aria-hidden=\"true\">\u2139\ufe0f<\/div>\n\n        <div>\n          <h2>Important Accuracy Note<\/h2>\n\n          <p>\n            These are automatically calculated prayer times and may differ\n            slightly from official Al Ain timings. Confirm important timings\n            with your local mosque or the responsible UAE Islamic authority.\n          <\/p>\n\n          <a href=\"https:\/\/www.awqaf.gov.ae\/prayer-times?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\">\n            Check official UAE prayer timings \u2192\n          <\/a>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/main>\n","protected":false},"excerpt":{"rendered":"<p>Home \u203a Prayer Times \u203a Al Ain \ud83d\udd4c Al Ain Salah Timings Al Ain Prayer Times Today Check today\u2019s Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha prayer times in Al Ain, United Arab Emirates. View the next prayer and complete monthly Salah timetable. \ud83d\udccd Al Ain, Abu Dhabi, United Arab Emirates Next prayer Loading&#8230; &#8211;:&#8211;&#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":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-220","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\/220","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=220"}],"version-history":[{"count":1,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/220\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/220\/revisions\/221"}],"wp:attachment":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/media?parent=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}