Prayer Times in Rabat

/* Conteneur global limité en hauteur */ .widget-prieres-maroc { max-height: 1900px; /* div { height: 100%; width: 0%; background: #1f8ceb; transition: width .2s ease; } .table-wrap { max-height: 900px; /* limite l’affichage des 50 villes */ overflow: auto; border: 1px solid #eee; border-radius: 10px; } table { width: 100%; border-collapse: collapse; } th, td { white-space: nowrap; } tbody tr:nth-child(odd) { background: #fff; } tbody tr:nth-child(even) { background: #f6f6f6; } .badge { display: inline-block; padding: .25rem .5rem; border-radius: 999px; background: #eaf4ff; color: #1f8ceb; font-size: .8rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .inline-note { font-size: .9rem; color: #666; } .sticky-top { position: sticky; top: 0; background: inherit; z-index: 2; } /* Free API used: Aladhan Endpoint: https://api.aladhan.com/v1/timingsByCity?city={CITY}&country=Morocco&date={DD-MM-YYYY} Doc: https://aladhan.com/prayer-times-api Example call: https://api.aladhan.com/v1/timingsByCity?city=Casablanca&country=Morocco&date=10-10-2025 JSON response example (excerpt): { “code”: 200, “status”: “OK”, “data”: { “timings”: { “Fajr”: “05:38”, “Sunrise”: “07:04”, “Dhuhr”: “13:22”, “Asr”: “16:33”, “Maghrib”: “19:34”, “Isha”: “20:56” }, “date”: { “readable”: “10 Oct 2025”, “timestamp”: “1696896000” }, “meta”: { “timezone”: “Africa/Casablanca” } } } */ /* =============================== Data for the 50 largest cities (FR label / API name) =============================== */ const VILLES_MAROC = [ { label: “Casablanca”, city: “Casablanca” }, { label: “Rabat”, city: “Rabat” }, { label: “Fès”, city: “Fes” }, { label: “Salé”, city: “Sale” }, { label: “Tanger”, city: “Tangier” }, { label: “Marrakech”, city: “Marrakech” }, { label: “Meknès”, city: “Meknes” }, { label: “Oujda”, city: “Oujda” }, { label: “Kénitra”, city: “Kenitra” }, { label: “Agadir”, city: “Agadir” }, { label: “Tétouan”, city: “Tetouan” }, { label: “Témara”, city: “Temara” }, { label: “Safi”, city: “Safi” }, { label: “Mohammédia”, city: “Mohammedia” }, { label: “Khouribga”, city: “Khouribga” }, { label: “El Jadida”, city: “El Jadida” }, { label: “Béni Mellal”, city: “Beni Mellal” }, { label: “Nador”, city: “Nador” }, { label: “Taza”, city: “Taza” }, { label: “Settat”, city: “Settat” }, { label: “Berrechid”, city: “Berrechid” }, { label: “Ksar El Kébir”, city: “Ksar el Kebir” }, { label: “Larache”, city: “Larache” }, { label: “Khemisset”, city: “Khemisset” }, { label: “Guelmim”, city: “Guelmim” }, { label: “Ouarzazate”, city: “Ouarzazate” }, { label: “Al Hoceïma”, city: “Al Hoceima” }, { label: “Taroudant”, city: “Taroudant” }, { label: “Essaouira”, city: “Essaouira” }, { label: “Fnideq”, city: “Fnideq” }, { label: “Martil”, city: “Martil” }, { label: “Sidi Slimane”, city: “Sidi Slimane” }, { label: “Sidi Kacem”, city: “Sidi Kacem” }, { label: “Oulad Teima”, city: “Oulad Teima” }, { label: “Youssoufia”, city: “Youssoufia” }, { label: “Midelt”, city: “Midelt” }, { label: “Berkane”, city: “Berkane” }, { label: “Guercif”, city: “Guercif” }, { label: “Taourirt”, city: “Taourirt” }, { label: “Errachidia”, city: “Errachidia” }, { label: “Fquih Ben Salah”, city: “Fkih Ben Salah” }, { label: “Sefrou”, city: “Sefrou” }, { label: “Azrou”, city: “Azrou” }, { label: “Oued Zem”, city: “Oued Zem” }, { label: “Ouazzane”, city: “Ouazzane” }, { label: “Tiznit”, city: “Tiznit” }, { label: “Chichaoua”, city: “Chichaoua” }, { label: “Skhirat”, city: “Skhirat” }, { label: “Benslimane”, city: “Benslimane” }, { label: “Bouznika”, city: “Bouznika” } ]; /* =============================== Constants & helpers =============================== */ const API_BASE = “https://api.aladhan.com/v1/timingsByCity”; const cache = new Map(); // key: city|date -> timings const $ = (sel, ctx=document) => ctx.querySelector(sel); const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel)); function toDDMMYYYY(date) { const d = String(date.getDate()).padStart(2, ‘0’); const m = String(date.getMonth() + 1).padStart(2, ‘0’); const y = date.getFullYear(); return `${d}-${m}-${y}`; } function fromInputDate(val) { // val: YYYY-MM-DD const [y,m,d] = val.split(‘-‘).map(Number); return new Date(y, m-1, d); } function formatHumanDateFR(date) { return date.toLocaleDateString(‘fr-MA’, { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’ }); } function stripTZ(t) { // Aladhan sometimes returns “05:38 (+01)” -> keep HH:MM only return String(t).split(‘ ‘)[0]; } /* =============================== Fetch timings (with cache) =============================== */ async function fetchTimings(city, dateStr) { const key = `${city}|${dateStr}`; if (cache.has(key)) return cache.get(key); const url = `${API_BASE}?city=${encodeURIComponent(city)}&country=Morocco&date=${encodeURIComponent(dateStr)}`; const resp = await fetch(url); if (!resp.ok) throw new Error(`Network error (${resp.status})`); const json = await resp.json(); if (json.code !== 200 || !json.data) throw new Error(‘Invalid API response’); const t = json.data.timings; const timings = { Fajr: stripTZ(t.Fajr), Sunrise: stripTZ(t.Sunrise), Dhuhr: stripTZ(t.Dhuhr), Asr: stripTZ(t.Asr), Maghrib: stripTZ(t.Maghrib), Isha: stripTZ(t.Isha), timezone: json.data.meta?.timezone || ‘Africa/Casablanca’ }; cache.set(key, timings); return timings; } /* =============================== Render main card (selected city) =============================== */ function renderTimingsTiles(container, timings) { container.innerHTML = ”; const items = [ { k: ‘Fajr’, label: ‘Fajr’ }, { k: ‘Sunrise’, label: ‘Sunrise’ }, { k: ‘Dhuhr’, label: ‘Dhuhr’ }, { k: ‘Asr’, label: ‘Asr’ }, { k: ‘Maghrib’, label: ‘Maghrib’ }, { k: ‘Isha’, label: ‘Isha’ } ]; items.forEach(item => { const div = document.createElement(‘div’); div.className = ‘time-pill’; div.innerHTML = `${item.label}${timings[item.k] || ‘–:–‘}`; container.appendChild(div); }); } async function updateMainCard() { const select = $(‘#select-ville’); const dateInput = $(‘#input-date’); const cityObj = VILLES_MAROC[select.selectedIndex] || VILLES_MAROC[0]; const apiCity = cityObj.city; const label = cityObj.label; const date = dateInput.value ? fromInputDate(dateInput.value) : new Date(); const dateStr = toDDMMYYYY(date); $(‘#titre-ville’).textContent = `${label} — timings for ${formatHumanDateFR(date)}`; $(‘#badge-date’).textContent = formatHumanDateFR(date); const grid = $(‘#grille-horaires’); grid.innerHTML = ‘‘; try { const timings = await fetchTimings(apiCity, dateStr); renderTimingsTiles(grid, timings); } catch (e) { grid.innerHTML = ``; } } /* =============================== All cities table =============================== */ function initAllCitiesRows() { const tbody = $(‘#tbody-villes’); tbody.innerHTML = ”; VILLES_MAROC.forEach(v => { const tr = document.createElement(‘tr’); tr.dataset.label = v.label.toLowerCase(); tr.innerHTML = ` ${v.label} –:– –:– –:– –:– –:– –:– `; tbody.appendChild(tr); }); } function filterCities(q) { const needle = q.trim().toLowerCase(); $$(‘#tbody-villes tr’).forEach(tr => { tr.style.display = (!needle || tr.dataset.label.includes(needle)) ? ” : ‘none’; }); } async function loadAllCities(dateStr, onProgress) { const results = {}; let done = 0; const total = VILLES_MAROC.length; const limit = 8; // concurrency limit for performance const queue = VILLES_MAROC.map(v => v); async function worker() { while (queue.length) { const v = queue.shift(); try { const t = await fetchTimings(v.city, dateStr); results[v.label] = t; } catch { results[v.label] = { Fajr: ‘—’, Sunrise: ‘—’, Dhuhr: ‘—’, Asr: ‘—’, Maghrib: ‘—’, Isha: ‘—’ }; } finally { done++; onProgress(Math.round((done / total) * 100)); } } } await Promise.all(Array.from({ length: limit }, worker)); return results; } function renderAllCitiesTable(results) { $$(‘#tbody-villes tr’).forEach(tr => { const label = tr.querySelector(‘td strong’).textContent; const times = results[label]; if (!times) return; [‘Fajr’,’Sunrise’,’Dhuhr’,’Asr’,’Maghrib’,’Isha’].forEach(k => { const td = tr.querySelector(`td[data-k=”${k}”]`); if (td) td.textContent = times[k] || ‘—’; }); }); } /* =============================== UI Initialization =============================== */ function initUI() { // Fill city select const select = $(‘#select-ville’); VILLES_MAROC.forEach((v, i) => { const opt = document.createElement(‘option’); opt.value = v.city; opt.textContent = v.label; if (v.label === ‘Casablanca’) opt.selected = true; select.appendChild(opt); }); // Default today date (YYYY-MM-DD) const today = new Date(); const yyyy = today.getFullYear(); const mm = String(today.getMonth() + 1).padStart(2, ‘0’); const dd = String(today.getDate()).padStart(2, ‘0’); $(‘#input-date’).value = `${yyyy}-${mm}-${dd}`; // Initialize table initAllCitiesRows(); // Listeners $(‘#btn-actualiser’).addEventListener(‘click’, updateMainCard); $(‘#select-ville’).addEventListener(‘change’, updateMainCard); $(‘#input-date’).addEventListener(‘change’, () => { updateMainCard(); // If user reloads all cities after date change, it will be taken into account }); $(‘#filtre-ville’).addEventListener(‘input’, (e) => filterCities(e.target.value)); const progressBar = $(‘#progress-bar’); const srProgress = $(‘#sr-progress’); function setProgress(pct) { progressBar.style.width = `${pct}%`; srProgress.textContent = `Progress ${pct}%`; } $(‘#btn-charger-toutes’).addEventListener(‘click’, async () => { const date = $(‘#input-date’).value ? fromInputDate($(‘#input-date’).value) : new Date(); const dateStr = toDDMMYYYY(date); setProgress(0); $(‘#btn-charger-toutes’).setAttribute(‘disabled’, ‘true’); try { const results = await loadAllCities(dateStr, setProgress); renderAllCitiesTable(results); } catch (e) { alert(‘Error loading timings for all cities.’); } finally { $(‘#btn-charger-toutes’).removeAttribute(‘disabled’); setProgress(100); setTimeout(() => setProgress(0), 800); } }); // Initial render (Casablanca) updateMainCard(); } document.addEventListener(‘DOMContentLoaded’, initUI);

Prayer times in Rabat: daily tables and real-time details

In Rabat, consulting precise prayer times is achieved through a continuously updated service, ensuring reliability and accessibility for the widest audience. The indicated times (Fajr: 05:17, Sunrise: 06:38, Dhuhr: 13:37, Asr: 17:12, Maghrib: 20:28, Isha: 21:48) are based on the Muslim World League and the Shafi’i method for Asr, allowing conformity with the city’s practices.

• Automatic time updates

• Precision adapted to daily needs

Precise prayer times today in Rabat: Fajr, Sunrise, Dhuhr, Asr, Maghrib, Isha

For this day, each prayer is detailed down to the minute. A concrete example: the Asr prayer is at 17:12, while Maghrib occurs at sunset at 20:28.

• Notification of the upcoming prayer

• Corresponding Hijri date provided: 1446-10-28

The proposed times simplify daily organization and honor the spiritual dimension.

Calculation methods of timings in Rabat: Muslim World League and Asr Shafi’i method

Adoption of the Muslim World League ensures a recognized frame throughout Morocco, adapted to the specificity of Rabat. For Asr, the Shafi’i method guarantees respect for interpretative differences. This methodical choice strengthens the confidence of believers, who benefit from:

• An official framework applied locally

• Easy adaptation to each urban situation

This technical approach precisely meets the community’s expectations.

Consultation of the next prayer and real-time display of the Hijri date

Thanks to a dynamic interface, the time of the next prayer is always highlighted. For example, if Maghrib is approaching, the tool anticipates and informs about the remaining time. The conversion from the Gregorian calendar to the Hijri enriches the experience, strengthening the cultural link. At any moment, the user can verify:

• The prayer not to miss

• Precise knowledge of the date according to both calendars

This functionality facilitates organization on all days.

Variation of prayer times over 30 days in Rabat: evolution, accuracy, and national coverage

Timings evolve over the seasons, requiring attentive monitoring. A believer like Samir, an employee at the Rabat administration, uses these services to adapt professional rhythm and religious obligations.

• Simple tracking of timing progression

• Facilitated forecasting of prayer times over several days

The national dimension ensures coherence for each region.

Progression of timings over 30 days: understanding variations for each prayer

In spring, for example, Fajr gradually shifts, impacting the wake-up time. Observing this progression is essential to anticipate and maintain prayer regularity, even when moving around the city.

Gregorian/Hijri calendar conversion: enriching understanding of prayer times

The correspondence between the two calendars adds value, especially during religious holidays or traditional events in Rabat. This conversion allows better planning of spiritual and family schedules.

Prayer times for all cities in Morocco: reliability and reference for Rabat and the country

Finally, the service offers access to timings for all cities in the territory, with the same accuracy as for Rabat. This national coverage acts as a reference, strengthening the trust and cohesion of practitioners throughout Morocco.