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'], }, colors: { emerald: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', } } } } } body { font-family: 'Poppins', sans-serif; background-color: #f8fafc; } Islamic Date Today --:--:-- PKT Gregorian Date --- Pakistan Hijri Date --- 🌙 Saudi / Global Hijri --- const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", startYear: 2026, startMonth: 5, startDay: 15, length: 30 }, { id: 2, name: "Safar", startYear: 2026, startMonth: 6, startDay: 15, length: 30 }, { id: 3, name: "Rabi' al-Awwal", startYear: 2026, startMonth: 7, startDay: 14, length: 29 }, { id: 4, name: "Rabi' al-Thani", startYear: 2026, startMonth: 8, startDay: 12, length: 30 }, { id: 5, name: "Jumada al-Awwal", startYear: 2026, startMonth: 9, startDay: 12, length: 30 }, { id: 6, name: "Jumada al-Thani", startYear: 2026, startMonth: 10, startDay: 11, length: 29 }, { id: 7, name: "Rajab", startYear: 2026, startMonth: 11, startDay: 10, length: 30 }, { id: 8, name: "Sha'ban", startYear: 2027, startMonth: 0, startDay: 9, length: 30 }, { id: 9, name: "Ramadan", startYear: 2027, startMonth: 1, startDay: 8, length: 30 }, { id: 10, name: "Shawwal", startYear: 2027, startMonth: 2, startDay: 10, length: 29 }, { id: 11, name: "Dhu al-Qadah", startYear: 2027, startMonth: 3, startDay: 8, length: 30 }, { id: 12, name: "Dhu al-Hijjah", startYear: 2027, startMonth: 4, startDay: 8, length: 29 } ]; 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'; } } 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", year: 1447 }; } return { day: 1, monthName: "Muharram", year: 1449 }; } return { day: currentDayOfHijriMonth, monthName: ISLAMIC_MONTH_DATA[matchedMonthIndex].name, year: 1448 }; } function updateIslamicDates() { const today = new Date(); // 1. Gregorian Date document.getElementById("gregorian-date").innerText = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); // 2. Global Hijri Date const worldHijri = getDetailedHijriDate(today, 0); document.getElementById("world-date").innerText = `${worldHijri.day} ${worldHijri.monthName}, ${worldHijri.year} AH`; // 3. Pakistan Local Hijri Date (-1 day offset) const pakistanHijri = getDetailedHijriDate(today, -1); document.getElementById("pakistan-date").innerText = `${pakistanHijri.day} ${pakistanHijri.monthName} ${pakistanHijri.year} AH`; } updateIslamicDates(); runLiveClock(); setInterval(runLiveClock, 1000); 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-content: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-style: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 Local 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: 30 }, // Aug 14 = 30 Safar { name: "Rabi' al-Awwal", year: 1448, monthNum: 3, startDate: new Date(2026, 7, 15), length: 29 }, // Starts Aug 15 { name: "Rabi' al-Thani", year: 1448, monthNum: 4, startDate: new Date(2026, 8, 13), length: 30 }, { name: "Jumada al-Awwal", year: 1448, monthNum: 5, startDate: new Date(2026, 9, 13), length: 29 }, { name: "Jumada al-Thani", year: 1448, monthNum: 6, startDate: new Date(2026, 10, 11), length: 30 }, { name: "Rajab", year: 1448, monthNum: 7, startDate: new Date(2026, 11, 11), length: 29 }, { name: "Sha'ban", year: 1448, monthNum: 8, startDate: new Date(2027, 0, 9), length: 30 }, { name: "Ramadan", year: 1448, monthNum: 9, startDate: new Date(2027, 1, 8), 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

Islamic Date Today in Pakistan & Worldwide – Hijri Calendar

Islamic Date Today

Mohsin Ali (Staff Reporter)

Leave a Reply Cancel reply

Mohsin Ali (Staff Reporter)

Contempt of Court petition on Imran Khan's hospital transfer gets case number

Punjabi Date Today in Pakistan – Desi Mahina - Punjabi Calendar

Related Articles

Petrol Price Falls as Diesel Gets More Expensive

Major Progress in Talks Between Government and Dealers

Government Tightens Spending With New Austerity Drive

IHC Takes Key Step Over Arrest of PTI Leaders

Leave a Reply Cancel reply