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 <= daysInMonth; i++) { let curr = new Date(year, month, i); let h = getIslamicDetails(curr); let div = document.createElement("div"); div.className = "day"; // Highlight Today if (curr.toDateString() === today.toDateString()) { div.classList.add("today"); } // Check for Islamic Event let eventKey = `${h.day}-${h.monthNum}`; let eventName = ISLAMIC_EVENTS[eventKey] || ""; if (eventName) { div.classList.add("has-event"); } div.innerHTML = ` ${i} ${h.day} ${h.month} ${eventName ? ` ${eventName} ` : ''} `; body.appendChild(div); } } function moveMonth(dir) { displayDate.setMonth(displayDate.getMonth() + dir); renderCalendar(); } function goToday() { displayDate = new Date(); renderCalendar(); } renderCalendar();

Islamic Date Today in Pakistan & Worldwide – Hijri Calendar

Punjabi Date Today in Pakistan – Desi Mahina – Punjabi Calendar

Fuel Prices Today in Pakistan

Mohsin Ali (Staff Reporter)

Fuel Prices Today in Pakistan

Leave a Reply Cancel reply

Must Read

US should accept Iranian demands, Baqir Qalibaf’s categorical stance

Emergency in Khyber Pakhtunkhwa is in accordance with the constitution, Foreign Office

Petrol Price Falls in Pakistan, No Change in Diesel Rate

Pakistan’s IT exports surge, earning $1.25 billion in the first quarter

Pakistan records 750% increase in foreign investment, receives $3.65 billion

Useful Categories

Useful Links

Contact Us!