Islamic Date Today

Islamic Calendar Pakistan 2026 tailwind.config = { theme: { extend: { fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'], }, colors: { emerald: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', } } } } } body { background-color: #f8fafc; } ::-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 Pakistan & Global Hijri Calendar 2026

--:--:-- PKT

The current Islamic date today is -- --- ---- in Pakistan, India, and Bangladesh, while the global Hijri calendar stands at -- --- ---- . This Islamic calendar 2026 helps track all religious events easily. Every date here depends strictly on the local moon sighting announcements from regional committees.

Gregorian Date --- 🌙 Pakistan Hijri Date --- Saudi / Global Hijri ---

Islamic Months Index

Safar 1448 صفر

Mon Tue Wed Thu Fri Sat Sun

// Exact corrected astronomical timeline of 1448 AH (Global base dates) const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", arabic: "المحرّم", startYear: 2026, startMonth: 5, startDay: 15, length: 30 }, // June 15, 2026 { id: 2, name: "Safar", arabic: "صفر", startYear: 2026, startMonth: 6, startDay: 15, length: 29 }, // July 15, 2026 (Global start) { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", startYear: 2026, startMonth: 7, startDay: 13, length: 29 }, { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", startYear: 2026, startMonth: 8, startDay: 11, length: 30 }, { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", startYear: 2026, startMonth: 9, startDay: 11, length: 30 }, { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", startYear: 2026, startMonth: 10, startDay: 10, length: 29 }, { id: 7, name: "Rajab", arabic: "رجب", startYear: 2026, startMonth: 11, startDay: 9, length: 30 }, { id: 8, name: "Sha'ban", arabic: "شعبان", startYear: 2027, startMonth: 0, startDay: 8, length: 30 }, { id: 9, name: "Ramadan", arabic: "رمضان", startYear: 2027, startMonth: 1, startDay: 7, length: 30 }, { id: 10, name: "Shawwal", arabic: "شوال", startYear: 2027, startMonth: 2, startDay: 9, length: 29 }, { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", startYear: 2027, startMonth: 3, startDay: 7, length: 30 }, { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", startYear: 2027, startMonth: 4, startDay: 7, length: 29 } ];

let activeHijriMonthIndex = 1; // Default to Safar (Index 1)

// Live Real-Time Clock 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 algorithm 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", monthNumber: 12, year: 1447, monthIndex: 11 }; } 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 }; }

// Render Sidebar Menu function renderMonthsDirectory(activeIdx) { const container = document.getElementById("months-list"); container.innerHTML = "";

ISLAMIC_MONTH_DATA.forEach((month, index) => { const isActive = index === activeIdx; 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 Grid aligned to Pakistan's localized 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); // Pakistan standard shifts the Hijri month start +1 day later relative to the global start date startGregorian.setDate(startGregorian.getDate() + 1);

let startDayOfWeek = startGregorian.getDay(); startDayOfWeek = (startDayOfWeek === 0) ? 6 : startDayOfWeek - 1;

// Offset blank days 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 pakistanHijri = getDetailedHijriDate(today, -1); // 1-Day offset applied dynamically for Pakistan standard

for (let d = 1; d <= monthInfo.length; d++) { const dayCell = document.createElement("div"); const currentDayGregorian = new Date(startGregorian); currentDayGregorian.setDate(startGregorian.getDate() + (d - 1));

const isToday = pakistanHijri.year === 1448 && pakistanHijri.monthIndex === monthIndex && pakistanHijri.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 font-bold' : 'bg-white border-slate-100 hover:border-emerald-100 hover:bg-slate-50/50 text-slate-800' }`;

const dayLabelFormat = currentDayGregorian.toLocaleDateString('en-US', { day: 'numeric', month: 'short' });

dayCell.innerHTML = ` ${d} ${dayLabelFormat} `;

gridContainer.appendChild(dayCell); } }

function selectMonth(index) { if (index >= 0 && index < ISLAMIC_MONTH_DATA.length) { activeHijriMonthIndex = index; const monthInfo = ISLAMIC_MONTH_DATA[index]; document.getElementById("current-month-title").innerText = `${monthInfo.name} 1448`; document.getElementById("current-month-arabic").innerText = monthInfo.arabic;

renderMonthsDirectory(index); renderDaysGrid(index); } }

function navigateMonth(direction) { let nextIndex = activeHijriMonthIndex + direction; if (nextIndex >= 0 && nextIndex < ISLAMIC_MONTH_DATA.length) { selectMonth(nextIndex); } }

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

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

// Global vs. Pakistan offset calculation const worldHijri = getDetailedHijriDate(today, 0); const pakistanHijri = getDetailedHijriDate(today, -1);

// Update Dynamic Accent Cards document.getElementById("world-date").innerText = `${worldHijri.day} ${worldHijri.monthName}, ${worldHijri.year} AH`;

document.getElementById("pakistan-date").innerText = `${pakistanHijri.day} ${pakistanHijri.monthName} ${pakistanHijri.year} AH`;

// Update Banner Paragraph Dynamically document.getElementById("banner-pakistan-date").innerText = `${String(pakistanHijri.day).padStart(2, '0')} ${pakistanHijri.monthName} ${pakistanHijri.year}`; document.getElementById("banner-world-date").innerText = `${String(worldHijri.day).padStart(2, '0')} ${worldHijri.monthName} ${worldHijri.year}`;

// Auto-select active month based on Pakistan standard if (pakistanHijri.year === 1448) { selectMonth(pakistanHijri.monthIndex); } else { selectMonth(1); } }