Islamic Date Today

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 = ` ${String(index + 1).padStart(2, '0')} ${month.name} ${month.arabic} `; 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 = ` ${d} ${dayLabelFormat} `;

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);

Islamic Date Today – Islamic Calendar 2026

Muharram 1448

Qatar Rejects Claims of $6 Billion Release to Iran

Punjabi Date Today in Pakistan – Desi Mahina, Punjabi Calendar & Ajj Di Tareekh

Muhammad Ali (Web Desk Reporter)

Punjabi Date Today in Pakistan – Desi Mahina, Punjabi Calendar & Ajj Di Tareekh

Leave a Reply Cancel reply

Government sets new prices of petrol and diesel

Jubilee Life Insurance Wins National Recognition at EFP Awards 2026

Al Ghazi Tractors Enters Uzbekistan With First Tractor Exports

PM Shehbaz Sharif Forms 11 Member Committee for Khyber Pakhtunkhwa

Jamadi ul Awwal Moon Sighted in Pakistan on the First Day on October 13

Useful Categories

Useful Links

Contact Us!