/* 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
Example JSON response (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 response from API’);
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 = ‘
Loading timings…
‘;
try {
const timings = await fetchTimings(apiCity, dateStr);
renderTimingsTiles(grid, timings);
} catch (e) {
grid.innerHTML = `
Unable to load timings (${e.message}).
`;
}
}
/* ===============================
Table all cities
=============================== */
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 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}`;
// Init 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 accounted for
});
$(‘#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);
}
});
// First render (Casablanca)
updateMainCard();
}
document.addEventListener(‘DOMContentLoaded’, initUI);
Prayer times in Casablanca: detailed guide for each salat
Exact times of the five daily prayers in Casablanca (example: October 2025)
In Casablanca, the accuracy of prayer times determines the daily prayer. Example for October 15, 2025 (GMT+1): Fajr 05:59 (ends at Sunrise 07:25), Dhuhr 13:22, Asr 16:38, Maghrib 18:53, Isha 20:08. The adhan signals the start of the prayer, and each time slot has clear start and end times.
The sahur period ends at the adhan of Fajr, and the iftar corresponds to Maghrib. For the following night, the favorable window for the spiritual Fajr (pre-dawn supplications) is before the adhan of Fajr, often around the last third of the night.
Practical example: on 15/10, recommended sahur until 05:55, Fajr 05:59–07:25, iftar at 18:53.
For Rabat, also check this updated prayer calendar.
Start and end of each prayer: Fajr, Sunrise, Dhuhr, Asr, Maghrib, Isha
The time for Fajr starts at true dawn and ends at sunrise (Sunrise). Dhuhr starts just after the zenith and lasts until the start of Asr. Asr continues until sunset, the time of Maghrib. Isha extends from the disappearance of twilight until midnight (ideally) or until Fajr.
Useful milestones: sunrise 07:25, iftar time 18:53, Fajr window 05:59–07:25.
For cross-checking, explore these detailed timings for Rabat.
Calculation of prayer times in Casablanca: methods, sun angles, and time zones
Calculation method for prayer times: sun angles and Casablanca’s latitude
We adopt classical angles: 18° for Fajr and Isha, consistent with the latitude of Casablanca and the GMT+1 time zone. Practically, the algorithm determines the solar position according to local longitude and adjusts margins for a reliable adhan.
Reference points: Fajr/Isha at 18°, automatic adaptation to civil day and twilight.
Need a nearby reference? Check prayer times in Rabat.
Differences between schools and religious authorities regarding timings
Differences exist: some authorities adopt 15° for Fajr/Isha, and for Asr, the Hanafi school uses the double shadow length while others use the simple shadow. In Casablanca, these nuances shift the windows by a few minutes.
Specificities of prayers in Casablanca: number of raka’at, recommendations, and discouraged times
Number of rak’ats (fardh, sunnah, nawafil) for each prayer
In Casablanca, the practice follows orthodoxy: Fajr 2 fardh (after 2 sunnah), Dhuhr 4 fardh (before/after sunnah), Asr 4 fardh, Maghrib 3 fardh, Isha 4 fardh plus witr. The supererogatory prayer strengthens the daily spiritual presence.
Advice: audible recitation for Fajr, Maghrib, Isha; low voice for Dhuhr and Asr.
Want to compare? Browse this nearby calendar.
Recommended and makruh (discouraged) times for each daily prayer
It is discouraged to pray exactly at sunrise, zenith, and sunset. In Casablanca, performing Fajr early in its window, Dhuhr after zenith, and Asr before yellowing of the sun fosters quality prayer. These landmarks guide a serene and disciplined practice.
Good practice: avoid delaying Fajr and rushing Asr at the end of its window.
For Rabat, the same vigilance applies: see the slots.
Secondary prayer times in Casablanca: Duha, Tahajjoud, and key spiritual moments
Ideal times for the Duha prayer and their significance
The Duha prayer begins after Sunrise when the sun has risen a bit: for our date, around 07:45–11:30 in Casablanca. Duha nourishes gratitude, like a breath in the morning between activity and contemplation.
Indicative window: 07:45–11:30, with 2 to 8 units of recommended prayer.
Nearby example available: Duha in Rabat.
Favorable times for Tahajjoud and the importance of night prayer
Tahajjoud is performed in the last third of the night. Between Maghrib and Fajr, the ideal window in Casablanca for the given example is around 02:45–05:40, a time when the heart calms and supplications strengthen.
Qibla direction in Casablanca: orientation towards the Kaaba
In Casablanca, the qibla points approximately to 100° (east-southeast) from geographic north. This bearing ensures alignment towards the Kaaba, essential for prayer in congregation and at work throughout Morocco.
Memo: check orientation once, then mark the prayer space.
Need another urban reference? Also see the page dedicated to Rabat.
Seasonal variation of prayer times in Casablanca and access to the monthly online calendar
Changes in prayer times according to the seasons (summer, winter, solstices)
Days lengthen in summer and shorten in winter; in Casablanca, Fajr shifts earlier in June and later in December, while Asr and Isha move accordingly. Understanding these variations means planning your prayer at the right time.
Seasonal markers: around the summer solstice, very early Fajr; in winter, Isha closer to Maghrib.
Think of following a reliable calendar for your travels.
Easy access to the monthly prayer calendar and city search on our site
A detailed monthly calendar, with local corrections and method options, simplifies life in Casablanca. To refine your times, compare with the neighboring city via this handy link to official times in Rabat, useful for professional mobility.
Key features: city search, alerts, and display by adhan time for each prayer.
Smooth transition between Casablanca and Rabat via the same timings portal.