/* 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;
}
/*
API gratuite utilisée: Aladhan
Endpoint: https://api.aladhan.com/v1/timingsByCity?city={CITY}&country=Morocco&date={DD-MM-YYYY}
Doc: https://aladhan.com/prayer-times-api
Exemple d’appel:
https://api.aladhan.com/v1/timingsByCity?city=Casablanca&country=Morocco&date=10-10-2025
Exemple de réponse JSON (extrait):
{
“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” }
}
}
*/
/* ===============================
Données des 50 plus grandes villes (étiquette FR / nom API)
=============================== */
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” }
];
/* ===============================
Constantes & helpers
=============================== */
const API_BASE = “https://api.aladhan.com/v1/timingsByCity”;
const cache = new Map(); // clé: 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 renvoie parfois “05:38 (+01)” -> on garde HH:MM
return String(t).split(‘ ‘)[0];
}
/* ===============================
Récupération des horaires (avec 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(`Erreur réseau (${resp.status})`);
const json = await resp.json();
if (json.code !== 200 || !json.data) throw new Error(‘Réponse invalide de l’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;
}
/* ===============================
Rendu de la carte principale (ville sélectionnée)
=============================== */
function renderTimingsTiles(container, timings) {
container.innerHTML = ”;
const items = [
{ k: ‘Fajr’, label: ‘Fajr’ },
{ k: ‘Sunrise’, label: ‘Salida del sol’ },
{ 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} — horarios del ${formatHumanDateFR(date)}`;
$(‘#badge-date’).textContent = formatHumanDateFR(date);
const grid = $(‘#grille-horaires’);
grid.innerHTML = ‘
Cargando horarios…
‘;
try {
const timings = await fetchTimings(apiCity, dateStr);
renderTimingsTiles(grid, timings);
} catch (e) {
grid.innerHTML = `
No se pueden cargar los horarios (${e.message}).
`;
}
}
/* ===============================
Tableau toutes les villes
=============================== */
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; // limite de concurrence pour 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] || ‘—’;
});
});
}
/* ===============================
Initialisation UI
=============================== */
function initUI() {
// Remplir le select des villes
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);
});
// Date du jour par défaut (format 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 tableau
initAllCitiesRows();
// Listeners
$(‘#btn-actualiser’).addEventListener(‘click’, updateMainCard);
$(‘#select-ville’).addEventListener(‘change’, updateMainCard);
$(‘#input-date’).addEventListener(‘change’, () => {
updateMainCard();
// Si l’utilisateur recharge toutes les villes après changement de date, ce sera pris en compte
});
$(‘#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 = `Progreso ${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 al cargar los horarios para todas las ciudades.’);
} finally {
$(‘#btn-charger-toutes’).removeAttribute(‘disabled’);
setProgress(100);
setTimeout(() => setProgress(0), 800);
}
});
// Premier rendu (Casablanca)
updateMainCard();
}
document.addEventListener(‘DOMContentLoaded’, initUI);
Horarios de las oraciones en Casablanca: guía detallada para cada salat
Horas precisas de las cinco oraciones diarias en Casablanca (ejemplo: octubre 2025)
En Casablanca, la exactitud de los horarios condiciona la oración diaria. Ejemplo para el 15 de octubre de 2025 (GMT+1): Fajr 05:59 (fin en Chourouq 07:25), Dhuhr 13:22, Asr 16:38, Maghrib 18:53, Isha 20:08. El adhan indica el inicio de la oración, y cada intervalo tiene un inicio y un fin claros.
El periodo de sahur termina con el adhan de Fajr, y el Iftar corresponde a Maghrib. Para la noche siguiente, la ventana favorable para el Fajr espiritual (invocaciones antes del amanecer) está antes del adhan del Fajr, comúnmente durante el último tercio de la noche.
Inicio y fin de cada oración: Fajr, Chourouq, Dhuhr, Asr, Maghrib, Isha
El tiempo de Fajr comienza con el verdadero amanecer y termina en la salida del sol (Chourouq). Dhuhr comienza justo después del cenit y se extiende hasta la entrada de Asr. Asr dura hasta la puesta del sol, momento de Maghrib. Isha se extiende desde el ocaso del crepúsculo hasta la mitad de la noche (idealmente) o hasta el Fajr.
Hitos útiles: salida del sol 07:25, momento de Iftar 18:53, ventana de Fajr 05:59–07:25.
Para una verificación cruzada, explore estos horarios detallados de Rabat.
Cálculo de los horarios de oración en Casablanca: métodos, ángulos y husos horarios
Método de cálculo de los horarios de oración: ángulos solares y latitud de Casablanca
Adoptamos los ángulos clásicos: 18° para Fajr y Isha, coherentes con la latitud de Casablanca y el huso horario GMT+1. Concretamente, el algoritmo determina la posición solar según la longitud local y ajusta los márgenes para un adhan fiable.
Referencias: Fajr/Isha a 18°, adaptación automática al día civil y al crepúsculo.
¿Necesita un referente cercano? Consulte los tiempos de oración en Rabat.
Diferencias entre escuelas y autoridades religiosas respecto a los horarios
Existen diferencias: algunas autoridades adoptan 15° para Fajr/Isha, y para Asr, la escuela hanafí considera la sombra doble mientras que otras escuelas usan la sombra simple. En Casablanca, estas variaciones desplazan las ventanas algunos minutos.
Especificidades de las oraciones en Casablanca: número de raka’at, recomendaciones y momentos desaconsejados
Número de rak’ats (fardh, sunnah, nawafil) para cada oración
En Casablanca, la práctica sigue la ortodoxia: Fajr 2 fardh (después de 2 sunnah), Dhuhr 4 fardh (antes/después sunnah), Asr 4 fardh, Maghrib 3 fardh, Isha 4 fardh más witr. La oración voluntaria fortalece la presencia espiritual diaria.
Consejo: recitación en voz audible para Fajr, Maghrib, Isha; baja para Dhuhr y Asr.
¿Quiere comparar? Recorra este calendario cercano.
Momentos recomendados y makruh (desaconsejados) para cada oración diaria
Se desaconseja orar justo a la salida, en el cenit y al atardecer. En Casablanca, cumplir Fajr temprano en su ventana, Dhuhr después del cenit, y Asr antes del amarilleo del sol favorece la calidad de la oración. Estas referencias guían una práctica serena y disciplinada.
Buen hábito: evitar retrasar Fajr y acelerar Asr al final de la ventana.
Para Rabat, la misma vigilancia aplica: vea los intervalos.
Horarios de oraciones secundarias en Casablanca: Duha, Tahajjoud y momentos espirituales clave
Horas ideales para la oración de Duha y su significado
La oración de Duha comienza después de Chourouq cuando el sol se eleva un poco: para nuestra fecha, alrededor de 07:45–11:30 en Casablanca. Duha nutre la gratitud, como un soplo en la mañana entre actividad y recogimiento.
Ventana indicativa: 07:45–11:30, con 2 a 8 unidades de oración recomendadas.
Ejemplo cercano consultable: Duha en Rabat.
Horarios propicios para Tahajjoud e importancia de la oración nocturna
Tahajjoud se realiza en el último tercio de la noche. Entre Maghrib y Fajr, el período ideal en Casablanca para el ejemplo dado está en torno a 02:45–05:40, momento donde el corazón se calma y la petición se fortalece.
Dirección de la qibla en Casablanca: orientación hacia la Kaaba
En Casablanca, la qibla apunta aproximadamente hacia 100° (este-sureste) desde el norte geográfico. Este rumbo asegura el alineamiento hacia la Kaaba, práctica esencial para la oración colectiva y en el trabajo en todo el Marruecos.
Memorándum: verifique la orientación una vez, luego marque el espacio de oración.
¿Necesita otro referente urbano? Consulte también la página dedicada a Rabat.
Variación estacional de los horarios de oración en Casablanca y acceso al calendario mensual en línea
Cambios en los horarios de oración según las estaciones (verano, invierno, solsticios)
Los días se alargan en verano y se acortan en invierno; en Casablanca, el Fajr se adelanta en junio y se retrasa en diciembre, mientras que Asr e Isha se desplazan en consecuencia. Entender estas variaciones es planificar la oración en el momento adecuado.
Referencias estacionales: alrededor del solsticio de verano, Fajr muy temprano; en invierno, Isha más cercano a Maghrib.
Considere seguir un calendario mensual fiable para sus desplazamientos.
Acceso fácil al calendario mensual de oración y búsqueda por ciudad en nuestro sitio
Un calendario mensual detallado, con correcciones locales y opciones de método, facilita la vida en Casablanca. Para afinar sus horarios, compare con la ciudad vecina gracias a este enlace práctico hacia los tiempos oficiales en Rabat, útil en movilidad profesional.
Funciones clave: búsqueda por ciudad, alertas y visualización por hora de adhan para cada oración.
Transición fluida entre Casablanca y Rabat vía el mismo portal de horarios.