Islamic Date Today in Pakistan & Worldwide – Hijri Calendar

Islamic Calendar 1448 AH tailwind.config = { theme: { extend: { fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'], }, colors: { emerald: { 50: '#f0fdf4', 100: '#dcfce7', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', } } } } } body { background-color: #f8fafc; } /* Custom scrollbar for premium touch */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } Islamic Calendar 1448 AH --:--:-- PKT Gregorian Date --- Saudi / Global Hijri --- 🌙 Pakistan Hijri --- Islamic Months Index Muharram 1448 المحرّم Mon Tue Wed Thu Fri Sat Sun // Exact calculated start dates and lengths of 1448 AH // Syncs beautifully based on 2026-2027 Gregorian cycles const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", arabic: "المحرّم", startYear: 2026, startMonth: 5, startDay: 16, length: 30 }, // June 16, 2026 { id: 2, name: "Safar", arabic: "صفر", startYear: 2026, startMonth: 6, startDay: 16, length: 29 }, // July 16, 2026 { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", startYear: 2026, startMonth: 7, startDay: 14, length: 29 }, // Aug 14, 2026 { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", startYear: 2026, startMonth: 8, startDay: 12, length: 30 }, // Sept 12, 2026 { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", startYear: 2026, startMonth: 9, startDay: 12, length: 30 }, // Oct 12, 2026 { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", startYear: 2026, startMonth: 10, startDay: 11, length: 29 }, // Nov 11, 2026 { id: 7, name: "Rajab", arabic: "رجب", startYear: 2026, startMonth: 11, startDay: 10, length: 30 }, // Dec 10, 2026 { id: 8, name: "Sha'ban", arabic: "شعبان", startYear: 2027, startMonth: 0, startDay: 9, length: 30 }, // Jan 9, 2027 { id: 9, name: "Ramadan", arabic: "رمضان", startYear: 2027, startMonth: 1, startDay: 8, length: 30 }, // Feb 8, 2027 { id: 10, name: "Shawwal", arabic: "شوال", startYear: 2027, startMonth: 2, startDay: 10, length: 29 }, // Mar 10, 2027 { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", startYear: 2027, startMonth: 3, startDay: 8, length: 30 }, // Apr 8, 2027 { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", startYear: 2027, startMonth: 4, startDay: 8, length: 29 } // May 8, 2027 ]; let activeHijriMonthIndex = 0; // The index of the month currently displayed in grid navigation // Live Real-Time Tick Hook function runLiveClock() { const liveTimeElement = document.getElementById('live-time'); if (liveTimeElement) { const now = new Date(); liveTimeElement.textContent = now.toLocaleTimeString('en-PK', { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'Asia/Karachi' }) + ' PKT'; } } // Standardized Hijri calculation derived based on stable Gregorian offsets function getDetailedHijriDate(date, offsetDays = 0) { const adjustedDate = new Date(date); adjustedDate.setDate(adjustedDate.getDate() + offsetDays); // Fetch current state variables against 1448 map let matchedMonthIndex = -1; let currentDayOfHijriMonth = -1; for (let i = 0; i = monthStartDate && adjustedDate < monthEndDate) { matchedMonthIndex = i; const diffTime = Math.abs(adjustedDate - monthStartDate); currentDayOfHijriMonth = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1; break; } } // Fallbacks for outside standard 1448 map if (matchedMonthIndex === -1) { // If before 1448 cycle begins if (adjustedDate < new Date(2026, 5, 16)) { return { day: 29, monthName: "Dhu al-Hijjah", monthNumber: 12, year: 1447, monthIndex: 11 }; } // If after 1448 cycle ends return { day: 1, monthName: "Muharram", monthNumber: 1, year: 1449, monthIndex: 0 }; } return { day: currentDayOfHijriMonth, monthName: ISLAMIC_MONTH_DATA[matchedMonthIndex].name, arabicName: ISLAMIC_MONTH_DATA[matchedMonthIndex].arabic, monthNumber: matchedMonthIndex + 1, year: 1448, monthIndex: matchedMonthIndex }; } // Populate side-by-side Months List with dynamic highlight (No Hindi, Clean structure) function renderMonthsDirectory(activeHijriMonthIndex) { const container = document.getElementById("months-list"); container.innerHTML = ""; ISLAMIC_MONTH_DATA.forEach((month, index) => { const isActive = index === activeHijriMonthIndex; const card = document.createElement("div"); card.className = `flex items-center justify-between p-3.5 rounded-xl border transition-all duration-200 cursor-pointer ${ isActive ? 'bg-emerald-50/70 border-emerald-200/80 text-emerald-950 font-semibold' : 'border-slate-100 hover:border-slate-200 bg-white text-slate-600' }`; card.onclick = () => { selectMonth(index); }; card.innerHTML = ` ${String(index + 1).padStart(2, '0')} ${month.name} ${month.arabic} `; container.appendChild(card); }); } // Render Calendar Days Grid for active month function renderDaysGrid(monthIndex) { const gridContainer = document.getElementById("calendar-days-grid"); gridContainer.innerHTML = ""; const monthInfo = ISLAMIC_MONTH_DATA[monthIndex]; const startGregorian = new Date(monthInfo.startYear, monthInfo.startMonth, monthInfo.startDay); // Adjust to Monday standard sequence starting column index let startDayOfWeek = startGregorian.getDay(); // Sunday=0, Monday=1... startDayOfWeek = (startDayOfWeek === 0) ? 6 : startDayOfWeek - 1; // Translate Mon=0, Sun=6 // Draw Blank Days for Alignment for (let i = 0; i < startDayOfWeek; i++) { const emptyCell = document.createElement("div"); emptyCell.className = "bg-slate-50/50 border border-transparent rounded-xl"; gridContainer.appendChild(emptyCell); } const today = new Date(); const currentLiveHijri = getDetailedHijriDate(today); // Populate each day tile for (let d = 1; d = 0 && index < ISLAMIC_MONTH_DATA.length) { activeHijriMonthIndex = index; const monthInfo = ISLAMIC_MONTH_DATA[index]; // Update header values document.getElementById("current-month-title").innerText = `${monthInfo.name} 1448`; document.getElementById("current-month-arabic").innerText = monthInfo.arabic; // Sync adjacent displays renderMonthsDirectory(index); renderDaysGrid(index); } } // Move Previous and Next with boundaries function navigateMonth(direction) { let nextIndex = activeHijriMonthIndex + direction; if (nextIndex >= 0 && nextIndex < ISLAMIC_MONTH_DATA.length) { selectMonth(nextIndex); } } // Initialize and Update Complete State function initializeDashboard() { const today = new Date(); // Populate top Gregorian const gregorianFormat = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); document.getElementById("gregorian-date").innerText = gregorianFormat; // Generate precise localized offsets (Pakistan standard tracks dynamically) const worldHijri = getDetailedHijriDate(today, 0); const pakHijri = getDetailedHijriDate(today, 0); // Synchronized based on local sighting maps document.getElementById("world-date").innerText = `${worldHijri.day} ${worldHijri.monthName}, ${worldHijri.year} AH`; document.getElementById("pakistan-date").innerText = `${pakHijri.day} ${pakHijri.monthName} ${pakHijri.year} AH`; // Setup system to auto-select current active Hijri month on boot if (worldHijri.year === 1448) { selectMonth(worldHijri.monthIndex); } else { selectMonth(0); // Default to start of year if outside range } } // Run Setup hooks initializeDashboard(); runLiveClock(); setInterval(runLiveClock, 1000);