Islamic Calendar Pakistan 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 Date Today --:--:-- PKT Gregorian Date --- 🌙 Pakistan Hijri Date --- Saudi / Global Hijri --- Islamic Months Index Muharram 1448 المحرّم Mon Tue Wed Thu Fri Sat Sun // Exact calculated start dates and lengths of 1448 AH (Global baseline parameters) 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 < ISLAMIC_MONTH_DATA.length; i++) { const monthInfo = ISLAMIC_MONTH_DATA[i]; const monthStartDate = new Date(monthInfo.startYear, monthInfo.startMonth, monthInfo.startDay); 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; } } // 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 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 = ` <div class="flex items-center gap-3"> <span class="flex items-center justify-center w-6 h-6 text-[10px] rounded-lg ${ isActive ? 'bg-emerald-600 text-white' : 'bg-slate-100 text-slate-500' }"> ${String(index + 1).padStart(2, '0')} </span> <span class="text-xs tracking-tight">${month.name}</span> </div> <span class="text-xs font-normal text-slate-400 select-none">${month.arabic}</span> `; container.appendChild(card); }); } // Render Calendar Days Grid for active month (Fully aligned with Pakistan moon sighting offset) 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 startGregorian by +1 day for the Pakistani Calendar (since months start 1 day later in Pak) startGregorian.setDate(startGregorian.getDate() + 1); // 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 currentLiveHijriPak = getDetailedHijriDate(today, -1); // Pakistan standard // Populate each day tile for (let d = 1; d <= monthInfo.length; d++) { const dayCell = document.createElement("div"); // Track dynamic date for secondary Gregorian reference const currentDayGregorian = new Date(startGregorian); currentDayGregorian.setDate(startGregorian.getDate() + (d - 1)); const isToday = currentLiveHijriPak.year === 1448 && currentLiveHijriPak.monthIndex === monthIndex && currentLiveHijriPak.day === d; dayCell.className = `flex flex-col justify-between p-2.5 rounded-xl border transition-all duration-200 min-h-[60px] ${ isToday ? 'bg-emerald-600 border-emerald-700 text-white shadow-md' : 'bg-white border-slate-100 hover:border-emerald-100 hover:bg-slate-50/50 text-slate-800' }`; // Display Gregorian numbers dynamically inside Hijri calendar blocks const dayLabelFormat = currentDayGregorian.toLocaleDateString('en-US', { day: 'numeric', month: 'short' }); dayCell.innerHTML = ` <div class="flex items-center justify-between w-full"> <span class="text-xs font-bold">${d}</span> <span class="text-[9px] ${isToday ? 'text-emerald-100' : 'text-slate-400'}">${dayLabelFormat}</span> </div> `; gridContainer.appendChild(dayCell); } } // Select and Focus Month Selection View function selectMonth(index) { if (index >= 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 1 day behind world calculations) const worldHijri = getDetailedHijriDate(today, 0); const pakHijri = getDetailedHijriDate(today, -1); // Adjusted by -1 day for Pakistani crescent sighting standard 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 based on Pakistan standard if (pakHijri.year === 1448) { selectMonth(pakHijri.monthIndex); } else { selectMonth(0); // Default to start of year if outside range } } // Run Setup hooks initializeDashboard(); runLiveClock(); setInterval(runLiveClock, 1000);
