<!-- wp:html --> <style data-wp-block-html="css"> .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; } } </style> <script data-wp-block-html="js"> (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(); } })(); </script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Islamic Date Today</title> <!-- Poppins Font Import --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script> 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', } } } } } </script> <style> body { font-family: 'Poppins', sans-serif; background-color: #f8fafc; } </style> <div class="max-w-4xl mx-auto space-y-4 p-4"> <!-- HEADER BANNER --> <header class="block bg-white border border-slate-100 rounded-xl p-4 shadow-sm"> <div class="flex flex-col sm:flex-row justify-between items-center gap-3"> <div> <h1 class="text-base font-bold tracking-tight text-emerald-950">Islamic Date Today</h1> </div> <div class="flex items-center gap-2 bg-emerald-50 border border-emerald-100 px-3 py-1 rounded-lg"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-600"></span> </span> <span id="live-time" class="font-medium text-emerald-800 text-xs">--:--:-- PKT</span> </div> </div> </header> <!-- ========================================== ISLAMIC DATE BLOCK ========================================== --> <section id="islamic-date-part" class="block bg-white border border-slate-100 rounded-xl p-5 shadow-sm space-y-4"> <!-- Stacked Vertically --> <div class="flex flex-col gap-3"> <!-- Gregorian Date Card --> <div class="block bg-slate-50 border border-slate-100 p-3.5 rounded-lg"> <span class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Gregorian Date</span> <div class="text-xs font-bold text-slate-800 mt-1" id="gregorian-date">---</div> </div> <!-- Pakistan Hijri Card --> <div class="block bg-emerald-900 border border-emerald-950 p-3.5 rounded-lg text-white relative overflow-hidden"> <span class="block text-[10px] font-semibold text-emerald-300 uppercase tracking-wider relative z-10">Pakistan Hijri Date</span> <div class="text-xs font-bold text-white mt-1 relative z-10" id="pakistan-date">---</div> <div class="absolute right-2 bottom-0 text-emerald-800/20 text-3xl font-bold select-none pointer-events-none">🌙</div> </div> <!-- Global Hijri Card --> <div class="block bg-slate-50 border border-slate-100 p-3.5 rounded-lg"> <span class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Saudi / Global Hijri</span> <div class="text-xs font-bold text-slate-700 mt-1" id="world-date">---</div> </div> </div> </section> </div> <!-- JAVASCRIPT LOGIC --> <script> 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); </script> <!-- /wp:html --> <!-- wp:html --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Islamic Calendar Pakistan 2026</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> 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%; } </style> <div class="calendar"> <div class="header"> <div id="monthYear">---</div> <div class="sub-header" id="hijriMonthSummary">Islamic Calendar (Pakistan)</div> </div> <div class="nav"> <button onclick="moveMonth(-1)">← Prev</button> <button onclick="goToday()">Today</button> <button onclick="moveMonth(1)">Next →</button> </div> <div class="weekdays"> <div class="weekday">Mon</div> <div class="weekday">Tue</div> <div class="weekday">Wed</div> <div class="weekday">Thu</div> <div class="weekday">Fri</div> <div class="weekday">Sat</div> <div class="weekday">Sun</div> </div> <div class="grid" id="calendarBody"></div> <div class="legend"> <div class="legend-item"><span class="dot-today"></span> Today</div> <div class="legend-item"><span class="dot-event"></span> Key Islamic Event</div> </div> </div> <script> 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 < PAKISTAN_HIJRI_MONTHS.length; i++) { let m = PAKISTAN_HIJRI_MONTHS[i]; let start = m.startDate; let end = new Date(start); end.setDate(end.getDate() + m.length); if (target >= 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 = ` <div> <div class="g-date">${i}</div> <div class="h-date">${h.day} ${h.month}</div> </div> ${eventName ? `<div class="event-tag" title="${eventName}">${eventName}</div>` : ''} `; body.appendChild(div); } } function moveMonth(dir) { displayDate.setMonth(displayDate.getMonth() + dir); renderCalendar(); } function goToday() { displayDate = new Date(); renderCalendar(); } renderCalendar(); </script> <!-- /wp:html -->
