Islamic Date Today

Islamic Date Today tailwind.config = { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, colors: { emerald: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', } } } } } body { font-family: 'Poppins', sans-serif; background-color: #f8fafc; }

Islamic Date Today --:--:-- PKT

Gregorian Date ---

Pakistan Hijri Date --- 🌙

Saudi / Global Hijri ---

const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", startYear: 2026, startMonth: 5, startDay: 15, length: 30 }, { id: 2, name: "Safar", startYear: 2026, startMonth: 6, startDay: 15, length: 30 }, { id: 3, name: "Rabi' al-Awwal", startYear: 2026, startMonth: 7, startDay: 14, length: 29 }, { id: 4, name: "Rabi' al-Thani", startYear: 2026, startMonth: 8, startDay: 12, length: 30 }, { id: 5, name: "Jumada al-Awwal", startYear: 2026, startMonth: 9, startDay: 12, length: 30 }, { id: 6, name: "Jumada al-Thani", startYear: 2026, startMonth: 10, startDay: 11, length: 29 }, { id: 7, name: "Rajab", startYear: 2026, startMonth: 11, startDay: 10, length: 30 }, { id: 8, name: "Sha'ban", startYear: 2027, startMonth: 0, startDay: 9, length: 30 }, { id: 9, name: "Ramadan", startYear: 2027, startMonth: 1, startDay: 8, length: 30 }, { id: 10, name: "Shawwal", startYear: 2027, startMonth: 2, startDay: 10, length: 29 }, { id: 11, name: "Dhu al-Qadah", startYear: 2027, startMonth: 3, startDay: 8, length: 30 }, { id: 12, name: "Dhu al-Hijjah", startYear: 2027, startMonth: 4, startDay: 8, length: 29 } ];

function getDetailedHijriDate(date, offsetDays = 0) { const adjustedDate = new Date(date); adjustedDate.setDate(adjustedDate.getDate() + offsetDays); adjustedDate.setHours(0,0,0,0);

let matchedMonthIndex = -1; let currentDayOfHijriMonth = -1;

for (let i = 0; i < ISLAMIC_MONTH_DATA.length; i++) { const monthInfo = ISLAMIC_MONTH_DATA[i]; const monthStartDate = new Date(monthInfo.startYear, monthInfo.startMonth, monthInfo.startDay); monthStartDate.setHours(0,0,0,0); const monthEndDate = new Date(monthStartDate); monthEndDate.setDate(monthEndDate.getDate() + monthInfo.length);

if (adjustedDate >= monthStartDate && adjustedDate < monthEndDate) { matchedMonthIndex = i; const diffTime = Math.abs(adjustedDate - monthStartDate); currentDayOfHijriMonth = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1; break; } }

if (matchedMonthIndex === -1) { if (adjustedDate < new Date(2026, 5, 15)) { return { day: 29, monthName: "Dhu al-Hijjah", year: 1447 }; } return { day: 1, monthName: "Muharram", year: 1449 }; }

return { day: currentDayOfHijriMonth, monthName: ISLAMIC_MONTH_DATA[matchedMonthIndex].name, year: 1448 }; }

function updateIslamicDates() { const today = new Date();

// 1. Gregorian Date document.getElementById("gregorian-date").innerText = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });

// 2. Global Hijri Date const worldHijri = getDetailedHijriDate(today, 0); document.getElementById("world-date").innerText = `${worldHijri.day} ${worldHijri.monthName}, ${worldHijri.year} AH`;

// 3. Pakistan Local Hijri Date (-1 day offset) const pakistanHijri = getDetailedHijriDate(today, -1); document.getElementById("pakistan-date").innerText = `${pakistanHijri.day} ${pakistanHijri.monthName} ${pakistanHijri.year} AH`; }

updateIslamicDates(); runLiveClock(); setInterval(runLiveClock, 1000);

Islamic Months (Hijri) Directory * { font-family: 'Poppins', sans-serif; } body { background-color: #f8fafc; }

Islamic Hijri Calendar

12 Months

🌙 -- Month Featured / Active --- --- Loading description...

// Data model for the 12 Islamic Months const ISLAMIC_MONTHS = [ { id: 1, name: "Muharram", arabic: "المحرّم", sacred: true, desc: "1st Hijri month. One of the four sacred months in Islam." }, { id: 2, name: "Safar", arabic: "صفر", sacred: false, desc: "2nd Hijri month, currently active and highlighted." }, { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", sacred: false, desc: "3rd month, notable for Mawlid and the birth of Prophet Muhammad (PBUH)." }, { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", sacred: false, desc: "4th month of the Islamic lunar calendar." }, { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", sacred: false, desc: "5th month in the Islamic Hijri calendar." }, { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", sacred: false, desc: "6th month of the Islamic calendar." }, { id: 7, name: "Rajab", arabic: "رجب", sacred: true, desc: "7th month and one of the four sacred months, preceding Sha'ban and Ramadan." }, { id: 8, name: "Sha'ban", arabic: "شعبان", sacred: false, desc: "8th month, preceding Ramadan and containing Laylat al-Bara'at." }, { id: 9, name: "Ramadan", arabic: "رمضان", sacred: false, desc: "Holy 9th month during which Muslims fast from dawn until sunset worldwide." }, { id: 10, name: "Shawwal", arabic: "شوال", sacred: false, desc: "10th month, commencing with the celebration of Eid al-Fitr." }, { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", sacred: true, desc: "11th month and one of the four sacred months in Islam." }, { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", sacred: true, desc: "12th month in which the Hajj pilgrimage takes place along with Eid al-Adha." } ];

let selectedMonthIndex = 1; // Safar is index 1 const safarIndex = 1; let autoCycleTimer = null; let isUserInteracted = false;

function renderIslamicMonths() { const container = document.getElementById("islamic-months-container"); if (!container) return;

container.innerHTML = "";

ISLAMIC_MONTHS.forEach((month, index) => { const isSelected = index === selectedMonthIndex; const isSafar = index === safarIndex;

const card = document.createElement("div"); // Styling logic: Safar gets a special distinct border & tag, selected month gets solid fill let borderStyle = "border-slate-200 bg-white text-slate-700 hover:border-emerald-300"; if (isSelected) { borderStyle = "bg-emerald-600 border-emerald-700 text-white shadow-md font-medium ring-2 ring-emerald-400/50"; } else if (isSafar) { borderStyle = "bg-amber-50/80 border-amber-400 text-amber-950 font-semibold shadow-sm"; }

card.className = `p-2.5 rounded-xl border flex items-center justify-between cursor-pointer transition-all duration-200 relative ${borderStyle}`;

card.onclick = () => { stopAutoCycle(); selectIslamicMonth(index); };

card.innerHTML = ` <span class="flex items-center justify-center w-5 h-5 text-[9px] rounded-md font-bold shrink-0 ${ isSelected ? "bg-emerald-900 text-white" : isSafar ? "bg-amber-400 text-amber-950 font-extrabold" : "bg-slate-100 text-slate-500" }"> ${String(month.id).padStart(2, "0")} ${month.name} ${isSafar ? ` ` : ''} ${isSafar ? 'Active Month' : (month.sacred ? 'Sacred' : 'Hijri')} ${month.arabic} `;

container.appendChild(card); });

updateDetailCard(ISLAMIC_MONTHS[selectedMonthIndex]); }

function selectIslamicMonth(index) { selectedMonthIndex = index; renderIslamicMonths(); }

function getOrdinal(n) { const s = ["th", "st", "nd", "rd"]; const v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); }

function updateDetailCard(month) { const isSafar = selectedMonthIndex === safarIndex;

document.getElementById("detail-number").innerText = `${getOrdinal(month.id)} Hijri Month`; document.getElementById("detail-name").innerText = month.name; document.getElementById("detail-arabic").innerText = month.arabic; document.getElementById("detail-description").innerText = month.desc;

const currentBadge = document.getElementById("detail-current-badge"); if (isSafar) { currentBadge.innerText = "Current Month"; currentBadge.classList.remove("hidden"); } else { currentBadge.innerText = "Viewing Month"; currentBadge.classList.remove("hidden"); } }

// Auto-change slideshow loop function startAutoCycle() { autoCycleTimer = setInterval(() => { selectedMonthIndex = (selectedMonthIndex + 1) % ISLAMIC_MONTHS.length; renderIslamicMonths(); }, 3000); // Rotates every 3 seconds }

function stopAutoCycle() { if (autoCycleTimer) { clearInterval(autoCycleTimer); autoCycleTimer = null; } }

document.addEventListener("DOMContentLoaded", () => { const today = new Date(); document.getElementById("today-gregorian-text").innerText = `Today: ${today.toLocaleDateString('en-US', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })}`;