Islamic Date Today in Pakistan & Worldwide – Hijri Calendar

.simple-islamic-date { width: 100%; margin: 15px auto; } .islamic-date-box { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .date-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .date-item span { display: block; font-size: 14px; color: #64748b; margin-bottom: 7px; } .date-item strong { display: block; font-size: 20px; color: #047857; font-weight: 700; } @media (max-width: 600px) { .islamic-date-box { grid-template-columns: 1fr; } .date-item strong { font-size: 18px; } } (function () { function updateIslamicDate() { var today = new Date(); var pakistanDate = new Date(today); /* * Pakistan local moon-sighting date. * Change the offset here if your local * announcement differs. */ pakistanDate.setDate( pakistanDate.getDate() - 1 ); var globalDate = today; function getHijriDate(date) { return new Intl.DateTimeFormat( 'en-US-u-ca-islamic', { day: 'numeric', month: 'long', year: 'numeric' } ).format(date); } var pakistan = document.getElementById( 'pakistan-islamic-date' ); var global = document.getElementById( 'global-islamic-date' ); if (pakistan) { pakistan.textContent = getHijriDate(pakistanDate) + ' AH'; } if (global) { global.textContent = getHijriDate(globalDate) + ' AH'; } } function startIslamicDate() { updateIslamicDate(); /* * Check every minute so the date * automatically changes after midnight. */ setInterval( updateIslamicDate, 60000 ); } if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', startIslamicDate ); } else { startIslamicDate(); } })(); Islamic Date Today tailwind.config = { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, } } } Islamic Date Today Live Sync 🇵🇰 Pakistan Local Loading... Gregorian Date Loading... Global / Saudi Hijri 🇸🇦 Loading... Last checked: Just now Sync Dates function getHijriDate(date, dayOffset = 0) { const targetDate = new Date(date); targetDate.setDate(targetDate.getDate() + dayOffset); try { const formatter = new Intl.DateTimeFormat('en-TN-u-ca-islamic-umalqura-nu-latn', { day: 'numeric', month: 'long', year: 'numeric' }); const formatted = formatter.format(targetDate); return formatted.replace(/AH/g, '').trim() + ' AH'; } catch (e) { return "29 Safar, 1448 AH"; } } function updateCalendar() { const today = new Date(); // 1. Gregorian Date Format const gregorianElem = document.getElementById("gregorian-date"); if (gregorianElem) { gregorianElem.innerText = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); } // 2. Global / Saudi Hijri Date const globalElem = document.getElementById("global-date"); if (globalElem) { globalElem.innerText = getHijriDate(today, 0); } // 3. Pakistan Local Hijri Date (-1 Day offset) const pakistanElem = document.getElementById("pakistan-date"); if (pakistanElem) { pakistanElem.innerText = getHijriDate(today, -1); } // Update timestamp const updatedElem = document.getElementById("last-updated"); if (updatedElem) { const timeStr = today.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); updatedElem.innerText = `Last checked: ${timeStr}`; } } document.addEventListener('DOMContentLoaded', updateCalendar); Islamic Calendar Pakistan 2026 body{ margin:0; font-family:'Poppins',sans-serif; background:#f3f4f6; padding:20px 10px; } /* CONTAINER */ .calendar{ max-width:540px; margin:0 auto; background:#fff; border-radius:12px; border:1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); overflow:hidden; } /* HEADER */ .header{ background:#065f46; color:white; padding:14px; text-align:center; font-size:15px; font-weight:600; } .sub-header{ font-size:11px; font-weight:400; color:#a7f3d0; margin-top:2px; } /* NAV */ .nav{ display:flex; justify-style:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid #eee; background:#fff; } button{ font-size:11px; padding:6px 12px; border:1px solid #a7f3d0; background:#ecfdf5; color:#065f46; font-weight:600; border-radius:6px; cursor:pointer; transition: all 0.2s; } button:hover{ background:#065f46; color:#fff; } /* WEEK DAYS */ .weekdays{ display:grid; grid-template-columns:repeat(7,1fr); background:#f9fafb; padding:8px 0; border-bottom:1px solid #eee; } .weekday{ text-align:center; font-size:11px; font-weight:600; color:#4b5563; } /* GRID */ .grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:12px; } /* DAY BOX */ .day{ background:#f9fafb; border:1px solid #f1f5f9; border-radius:8px; padding:6px; min-height:60px; font-size:10px; display:flex; flex-direction:column; justify-style:space-between; transition:background 0.15s ease; position:relative; } .day:hover{ background:#ecfdf5; } /* EMPTY */ .empty{ visibility:hidden; } /* TODAY */ .today{ background:#d1fae5 !important; border-color:#059669 !important; box-shadow:0 0 0 1px #059669; } /* EVENT DAY */ .has-event{ border-color:#f59e0b; background:#fffbeb; } .has-event:hover{ background:#fef3c7; } /* TEXT */ .g-date{ font-size:12px; font-weight:600; color:#1f2937; } .h-date{ font-size:9px; font-weight:500; color:#047857; line-height:1.1; margin-top:2px; } .event-tag{ font-size:8px; font-weight:600; color:#b45309; background:#fef3c7; border:1px solid #fcd34d; padding:1px 3px; border-radius:4px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* FOOTER LEGEND */ .legend{ padding:10px 14px; background:#f9fafb; border-top:1px solid #eee; display:flex; justify-content:space-around; font-size:10px; color:#4b5563; } .legend-item{ display:flex; align-items:center; gap:5px; } .dot-today{ width:8px; height:8px; background:#059669; border-radius:50%; } .dot-event{ width:8px; height:8px; background:#f59e0b; border-radius:50%; } --- Islamic Calendar (Pakistan) ← Prev Today Next → Mon Tue Wed Thu Fri Sat Sun Today Key Islamic Event let displayDate = new Date(); let today = new Date(); // Key Islamic Events (Day + Month in Hijri) const ISLAMIC_EVENTS = { "1-1": "Islamic New Year", "9-1": "Tasu'a (9 Muharram)", "10-1": "Ashura (10 Muharram)", "12-3": "Mawlid an-Nabi ﷺ", "27-7": "Shab-e-Miraj", "15-8": "Shab-e-Barat", "1-9": "1st Ramadan", "27-9": "Shab-e-Qadr", "1-10": "Eid-ul-Fitr", "2-10": "Eid-ul-Fitr Day 2", "3-10": "Eid-ul-Fitr Day 3", "9-12": "Day of Arafah", "10-12": "Eid-ul-Adha", "11-12": "Eid-ul-Adha Day 2", "12-12": "Eid-ul-Adha Day 3" }; // Pakistan Hijri Calendar Month Table (Accurate Moon-Sighting Baseline) const PAKISTAN_HIJRI_MONTHS = [ { name: "Sha'ban", year: 1447, monthNum: 8, startDate: new Date(2026, 0, 20), length: 29 }, { name: "Ramadan", year: 1447, monthNum: 9, startDate: new Date(2026, 1, 18), length: 30 }, { name: "Shawwal", year: 1447, monthNum: 10, startDate: new Date(2026, 2, 20), length: 29 }, { name: "Dhu al-Qadah", year: 1447, monthNum: 11, startDate: new Date(2026, 3, 18), length: 30 }, { name: "Dhu al-Hijjah", year: 1447, monthNum: 12, startDate: new Date(2026, 4, 18), length: 29 }, { name: "Muharram", year: 1448, monthNum: 1, startDate: new Date(2026, 5, 16), length: 30 }, { name: "Safar", year: 1448, monthNum: 2, startDate: new Date(2026, 6, 16), length: 29 }, // Aug 13 = 29 Safar { name: "Rabi' al-Awwal", year: 1448, monthNum: 3, startDate: new Date(2026, 7, 14), length: 30 }, { name: "Rabi' al-Thani", year: 1448, monthNum: 4, startDate: new Date(2026, 8, 13), length: 29 }, { name: "Jumada al-Awwal", year: 1448, monthNum: 5, startDate: new Date(2026, 9, 12), length: 30 }, { name: "Jumada al-Thani", year: 1448, monthNum: 6, startDate: new Date(2026, 10, 11), length: 29 }, { name: "Rajab", year: 1448, monthNum: 7, startDate: new Date(2026, 11, 10), length: 30 }, { name: "Sha'ban", year: 1448, monthNum: 8, startDate: new Date(2027, 0, 9), length: 29 }, { name: "Ramadan", year: 1448, monthNum: 9, startDate: new Date(2027, 1, 7), length: 30 } ]; /** * Calculates exact local Hijri date aligned with Pakistan moon sighting */ function getIslamicDetails(date) { let target = new Date(date.getFullYear(), date.getMonth(), date.getDate()); for (let i = 0; i = start && target < end) { let diffDays = Math.floor((target - start) / (1000 * 60 * 60 * 24)) + 1; return { day: diffDays, month: m.name, monthNum: m.monthNum, year: m.year }; } } // Fallback estimation if date is out of table bounds return { day: target.getDate(), month: "Safar", monthNum: 2, year: 1448 }; } function renderCalendar() { let body = document.getElementById("calendarBody"); body.innerHTML = ""; let year = displayDate.getFullYear(); let month = displayDate.getMonth(); // Gregorian Header document.getElementById("monthYear").innerText = displayDate.toLocaleString('default', { month: 'long', year: 'numeric' }); let firstDay = new Date(year, month, 1).getDay(); firstDay = (firstDay === 0) ? 6 : firstDay - 1; // Align to Monday start let daysInMonth = new Date(year, month + 1, 0).getDate(); // Determine primary Islamic months overlapping this Gregorian month let firstHijri = getIslamicDetails(new Date(year, month, 1)); let lastHijri = getIslamicDetails(new Date(year, month, daysInMonth)); let summaryText = `${firstHijri.month} / ${lastHijri.month} ${lastHijri.year} AH (Pakistan)`; if (firstHijri.month === lastHijri.month) { summaryText = `${firstHijri.month} ${firstHijri.year} AH (Pakistan)`; } document.getElementById("hijriMonthSummary").innerText = summaryText; /* EMPTY CELLS */ for (let i = 0; i < firstDay; i++) { let div = document.createElement("div"); div.className = "day empty"; body.appendChild(div); } /* DAYS */ for (let i = 1; i = start && target < end) { let diffDays = Math.floor((target - start) / (1000 * 60 * 60 * 24)) + 1; return { day: diffDays, month: m.name, monthNum: m.monthNum, year: m.year }; } } return { day: target.getDate(), month: "Safar", monthNum: 2, year: 1448 }; } function renderCalendar() { let body = document.getElementById("calendarBody"); body.innerHTML = ""; let year = displayDate.getFullYear(); let month = displayDate.getMonth(); let firstDay = new Date(year, month, 1).getDay(); firstDay = (firstDay === 0) ? 6 : firstDay - 1; // Align to Monday start let daysInMonth = new Date(year, month + 1, 0).getDate(); /* EMPTY CELLS */ for (let i = 0; i < firstDay; i++) { let div = document.createElement("div"); div.className = "day empty"; body.appendChild(div); } /* DAYS */ for (let i = 1; i