Islamic Date and Month in Pakistan Today – Islamic Calendar 2026

Islamic Date Pakistan & World :root{ --green:#0b8d4b; --gold:#b8860b; --text:#2d3436; --bg:#f8faf9; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); padding:15px; font-size:13px; } .wrapper{ max-width:560px; margin:auto; } header{ text-align:center; margin-bottom:25px; } h1{ color:var(--green); font-size:24px; font-weight:600; } .subtitle{ font-size:11px; color:#7f8c8d; text-transform:uppercase; letter-spacing:1px; } .block-container{ display:flex; flex-direction:column; gap:15px; margin-bottom:25px; } .date-block{ background:#fff; padding:20px; border-radius:16px; box-shadow:0 4px 15px rgba(0,0,0,.04); border-left:5px solid var(--green); text-align:center; } .date-block.world{ border-left-color:var(--gold); } .date-block span{ display:block; font-size:10px; color:#95a5a6; font-weight:600; margin-bottom:6px; text-transform:uppercase; } .value{ font-size:16px; font-weight:600; line-height:1.5; } .table-section{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.04); margin-bottom:25px; } table{ width:100%; border-collapse:collapse; } th{ background:#f1f3f2; padding:12px; font-size:11px; color:#636e72; text-align:center; } td{ padding:14px; text-align:center; border-top:1px solid #edf2f0; font-size:12px; } .row-pak{ background:#f0fff4; color:var(--green); font-weight:600; } .month-list{ background:#fff; border-radius:16px; padding:15px; box-shadow:0 4px 15px rgba(0,0,0,.04); } .month-title{ color:var(--green); font-size:14px; font-weight:600; margin-bottom:12px; } .month-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; margin-bottom:5px; background:#f8faf9; font-size:12px; } .month-item.active{ background:var(--green); color:#fff; font-weight:500; } .footer{ text-align:center; margin-top:18px; font-size:10px; color:#95a5a6; } @media(max-width:400px){ h1{ font-size:20px; } .value{ font-size:14px; } } --- Islamic Date Today Gregorian Calendar -- World Islamic Date -- Pakistan Islamic Date -- Region Current Hijri Date Global / Saudi -- Pakistan -- List of Islamic Months const islamicMonths = [ "Muharram", "Safar", "Rabi al-Awwal", "Rabi al-Thani", "Jumada al-Awwal", "Jumada al-Thani", "Rajab", "Sha'ban", "Ramadan", "Shawwal", "Dhu al-Qi'dah", "Dhu al-Hijjah" ]; // Dynamically calculates length of a specific Hijri month using the standard 30-year tabular model function getDaysInHijriMonth(monthIndex, year) { // Months 1, 3, 5, 7, 9, 11 have 30 days. Even months have 29 days. if ((monthIndex + 1) % 2 !== 0) { return 30; } // Dhu al-Hijjah (index 11) has 30 days in leap years if (monthIndex === 11) { const leapYears = [2, 5, 7, 10, 13, 16, 18, 21, 24, 26, 29]; const cycleYear = year % 30; if (leapYears.includes(cycleYear)) { return 30; } } return 29; } // Master Engine to parse dates and adjust increments automatically function calculateHijri(today, dayOffset = 0) { // Core Reference Anchor: May 18, 2026 = 1 Dhu al-Hijjah 1447 AH const refDate = new Date(2026, 4, 18); // Day calculation calculation logic const diffTime = today.getTime() - refDate.getTime(); let diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + dayOffset; let day = 1; let monthIndex = 11; // Dhu al-Hijjah let year = 1447; day += diffDays; // Forward processing logic while (day > getDaysInHijriMonth(monthIndex, year)) { day -= getDaysInHijriMonth(monthIndex, year); monthIndex++; if (monthIndex > 11) { monthIndex = 0; year++; } } // Backward processing logic while (day { const item = document.createElement('div'); item.className = index === pakistanHijri.monthIndex ? 'month-item active' : 'month-item'; item.innerHTML = ` ${index + 1}. ${month} ${index === pakistanHijri.monthIndex ? 'Current' : ''} `; monthBox.appendChild(item); }); } } // Autochange execution loop: Initial run + check every 1 second updateDashboard(); setInterval(updateDashboard, 1000); Daily Quran & Hadith Reflection :root { --primary-book: #064e3b; /* Deep Islamic green */ --primary-light: #f0fdf4; /* Soft ivory-green page tint */ --accent-gold: #b45309; /* Classical book gold tint */ --accent-gold-light: #fef3c7; /* Light gold background framing */ --text-dark: #1e293b; /* Charcoal body text */ --text-muted: #64748b; /* Subtle slate for metadata */ --border-color: #cbd5e1; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f8fafc; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 20px 20px; font-family: 'Poppins', sans-serif; color: var(--text-dark); padding: 12px 8px; /* Tighter body padding */ line-height: 1.4; } .container { max-width: 600px; /* Snugger layout constraint */ margin: auto; } /* Professional Header Design */ header { text-align: center; margin-bottom: 20px; /* Reduced vertical spacing */ position: relative; padding-bottom: 8px; } header::after { content: "❖ ❖ ❖"; display: block; font-size: 9px; color: var(--accent-gold); letter-spacing: 4px; margin-top: 4px; } .main-title { font-family: 'Cinzel', serif; font-size: 18px; /* Moderated header size */ font-weight: 700; color: var(--primary-book); letter-spacing: 0.5px; } .date-badge { display: inline-block; font-size: 10px; background: var(--accent-gold-light); color: var(--accent-gold); padding: 2px 10px; border-radius: 50px; font-weight: 600; margin-top: 4px; border: 1px solid #fde68a; text-transform: uppercase; } /* Classical Literary Book Layout Pattern */ .book-card { background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid var(--primary-book); border-radius: 8px; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05); margin-bottom: 16px; /* Reduced spacing between cards */ overflow: hidden; } .book-card.hadith-card { border-top-color: var(--accent-gold); } .card-meta { display: flex; justify-content: space-between; align-items: center; background: #fafafa; padding: 8px 12px; /* Tighter metadata bar */ border-bottom: 1px solid #f1f5f9; } .chapter-tag { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; color: var(--primary-book); text-transform: uppercase; } .book-card.hadith-card .chapter-tag { color: var(--accent-gold); } .source-ref { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 500; color: var(--text-muted); background: #f1f5f9; padding: 1px 6px; border-radius: 4px; } /* Text Blocks Layout */ .verse-unit { padding: 14px 12px; /* Tighter content entry boxes */ border-bottom: 1px solid #f1f5f9; } .verse-unit:last-child { border-bottom: none; } .index-indicator { font-family: 'Poppins', sans-serif; font-size: 9px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; color: var(--accent-gold); margin-bottom: 4px; display: block; } /* Arabic typography configurations */ .arabic-text { font-family: 'Amiri', serif; font-size: 20px; /* Slightly scaled down for small viewports */ line-height: 1.8; /* Shorter spacing */ color: #0f172a; direction: rtl; text-align: right; margin-bottom: 8px; /* Tighter bottom separation */ font-weight: 400; } /* Urdu Typography Nastaliq Engine styling rules */ .urdu-translation { font-family: 'Noto Nastaliq Urdu', serif; font-size: 13px; line-height: 2.2; /* Tighter line heights for dense rendering */ color: #1e293b; direction: rtl; text-align: right; margin-bottom: 8px; padding-right: 8px; border-right: 2px solid #e2e8f0; } /* English Translation text blocks */ .english-translation { font-family: 'Poppins', sans-serif; font-size: 12px; /* Small, readable Poppins style */ line-height: 1.5; color: #334155; text-align: left; font-weight: 400; } footer { text-align: center; font-size: 10px; color: var(--text-muted); margin-top: 20px; padding: 10px 0; border-top: 1px solid #e2e8f0; } /* Fluid Mobile Compression */ @media (max-width: 480px) { body { padding: 8px 4px; } .verse-unit { padding: 12px 10px; } .card-meta { padding: 6px 10px; } .arabic-text { font-size: 19px; line-height: 1.7; margin-bottom: 6px; } .urdu-translation { font-size: 12px; line-height: 2.0; margin-bottom: 6px; } .english-translation { font-size: 11px; line-height: 1.4; } } Daily Reflection -- -- ---- // Structural Data Collections const quranDatabase = [ { metaTitle: "Surah Al-Baqarah", reference: "Surah Al-Baqarah (2:9-12)", verses: [ { label: "Ayat 9", arabic: "يُخَادِعُونَ اللَّهَ وَالَّذِينَ آمَنُوا وَمَا يَخْدَعُونَ إِلَّا أَنفُسَهُمْ وَمَا يَشْعُرُونَ", urdu: "وہ اللہ اور ایمان والوں کو دھوکہ دینا چاہتے ہیں، حالانکہ وہ اپنے آپ ہی کو دھوکہ دے رہے ہیں اور انہیں شعور نہیں۔", english: "They [think to] deceive Allah and those who believe, but they deceive not except themselves and perceive [it] not." }, { label: "Ayat 10", arabic: "فِي قُلُوبِهِم مَّرَضٌ فَزَادَهُمُ اللَّهُ مَرَضًا ۖ وَلَهُمْ عَذَابٌ أَلِيمٌ بِمَا كَانُوا يَكْذِبُونَ", urdu: "ان کے دلوں میں بیماری ہے، تو اللہ نے ان کی بیماری اور بڑھا دی، اور ان کے لیے دردناک عذاب ہے کیونکہ وہ جھوٹ بولتے تھے۔", english: "In their hearts is disease, so Allah has increased their disease; and for them is a painful punishment because they [habitually] used to lie." }, { label: "Ayat 11", arabic: "وَإِذَا قِيلَ لَهُمْ لَا تُفْسِدُوا فِي الْأَرْضِ قَالُوا إِنَّمَا نَحْنُ مُصْلِحُونَ", urdu: "اور جب ان سے کہا جاتا ہے کہ زمین میں فساد نہ کرو، تو کہتے ہیں کہ ہم تو صرف اصلاح کرنے والے ہیں۔", english: "And when it is said to them, “Do not cause corruption on the earth,” they say, “We are but reformers.”" }, { label: "Ayat 12", arabic: "أَلَا إِنَّهُمْ هُمُ الْمُفْسِدُونَ وَلَٰكِن لَّا يَشْعُرُونَ", urdu: "خبردار! بے شک یہی لوگ فساد کرنے والے ہیں لیکن انہیں شعور نہیں۔", english: "Unquestionably, it is they who are the corrupters, but they perceive [it] not." } ] }, { metaTitle: "Surah Al-Baqarah", reference: "Surah Al-Baqarah (2:13-16)", verses: [ { label: "Ayat 13", arabic: "وَإِذَا قِيلَ لَهُمْ آمِنُوا كَمَا آمَنَ النَّاسُ قَالُوا أَنُؤْمِنُ كَمَا آمَنَ السُّفَهَاءُ ۗ أَلَا إِنَّهُمْ هُمُ السُّفَهَاءُ وَلَٰكِن لَّا يَعْلَمُونَ", urdu: "اور جب ان سے کہا جاتا ہے کہ تم بھی اسی طرح ایمان لاؤ جیسے دوسرے لوگ ایمان لائے ہیں، تو کہتے ہیں کیا ہم اس طرح ایمان لائیں جس طرح بیوقوف ایمان لائے ہیں؟ سن لو! یقیناً یہی لوگ بیوقوف ہیں لیکن وہ نہیں جانتے۔", english: "And when it is said to them, \"Believe as the people have believed,\" they say, \"Should we believe as the foolish have believed?\" Unquestionably, it is they who are the foolish, but they know not." }, { label: "Ayat 14", arabic: "وَإِذَا لَقُوا الَّذِينَ آمَنُوا قَالُوا آمَنَّا وَإِذَا خَلَوْا إِلَىٰ شَيَاطِينِهِمْ قَالُوا إِنَّا مَعَكُمْ إِنَّمَا نَحْنُ مُسْتَهْزِئُونَ", urdu: "اور جب یہ ایمان والوں سے ملتے ہیں تو کہتے ہیں ہم ایمان لا چکے، اور جب اپنے شیطانوں کے پاس تنہائی میں جاتے ہیں تو کہتے ہیں کہ ہم تمہارے ساتھ ہیں، ہم تو صرف مذاق اڑا رہے ہیں۔", english: "And when they meet those who believe, they say, \"We believe\"; but when they are alone with their evil ones, they say, \"Indeed, we are with you; we were only mockers.\"" }, { label: "Ayat 15", arabic: "اللَّهُ يَسْتَهْزِئُ بِهِمْ وَيَمُدُّهُمْ فِي طُغْيَانِهِمْ يَعْمَهُونَ", urdu: "اللہ ان سے مذاق کرتا ہے اور انہیں ان کی سرکشی میں ڈھیل دیتا ہے کہ وہ بھٹکتے پھریں۔", english: "Allah mocks them and prolongs them in their transgression [while] they wander blindly." }, { label: "Ayat 16", arabic: "أُولَٰئِكَ الَّذِينَ اشْتَرَوُا الضَّلَالَةَ بِالْهُدَىٰ فَمَا رَبِحَت تِّجَارَتُهُمْ وَمَا كَانُوا مُهْتَدِينَ", urdu: "یہ وہ لوگ ہیں جنہوں نے ہدایت کے بدلے گمراہی خریدی، پس نہ تو ان کی تجارت نے نفع دیا اور نہ ہی وہ ہدایت پانے والے ہوئے۔", english: "Those are the ones who have purchased error [in exchange] for guidance, so their transaction has brought no profit, nor were they guided." } ] }, { metaTitle: "Surah Al-Baqarah", reference: "Surah Al-Baqarah (2:17-19)", verses: [ { label: "Ayat 17", arabic: "مَثَلُهُمْ كَمَثَلِ الَّذِي اسْتَوْقَدَ نَارًا فَلَمَّا أَضَاءَتْ مَا حَوْلَهُ ذَهَبَ اللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِي ظُلُمَاتٍ لَّا يُبْصِرُونَ", urdu: "ان کی مثال اس شخص کی سی ہے جس نے آگ جلائی، پھر جب آگ نے اس کے آس پاس کی چیزوں کو روشن کر دیا تو اللہ نے ان کا نور چھین لیا اور انہیں اندھیروں میں چھوڑ دیا کہ انہیں کچھ دکھائی نہیں دیتا۔", english: "Their example is that of one who kindled a fire, but when it illuminated what was around him, Allah took away their light and left them in darkness [so] they could not see." }, { label: "Ayat 18", arabic: "صُمٌّ بُكْمٌ عُمْيٌ فَهُمْ لَا يَرْجِعُونَ", urdu: "وہ بہرے ہیں، گونگے ہیں، اندھے ہیں، پس وہ اب لوٹ کر نہیں آئیں گے۔", english: "Deaf, dumb and blind - so they will not return [to the right path]." }, { label: "Ayat 19", arabic: "أَوْ كَصَيِّبٍ مِّنَ السَّمَاءِ فِيهِ ظُلُمَاتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَابِعَهُمْ فِي آذَانِهِم مِّنَ الصَّوَاعِقِ حَذَرَ الْمَوْتِ ۚ وَاللَّهُ مُحِيطٌ بِالْكَافِرِينَ", urdu: "یا پھر ان کی مثال آسمان سے برستی بارش جیسی ہے جس میں اندھیریاں، گرج اور بجلی ہو، وہ کڑک کے باعث موت کے ڈر سے اپنی انگلیاں اپنے کانوں میں ٹھونس لیتے ہیں، اور اللہ کافروں کو گھیرے ہوئے ہے۔", english: "Or [it is] like a rainstorm from the sky within which is darkness, thunder and lightning. They put their fingers in their ears against the thunderclaps in dread of death. But Allah is encompassing of the disbelievers." } ] } ]; const hadithDatabase = [ { metaTitle: "Sahih al-Bukhari", reference: "Hadith No. 5", arabic: "بَدَأَ الْوَحْيُ إِلَى رَسُولِ اللَّهِ ﷺ بِالرُّؤْيَا الصَّالِحَةِ فِي النَّوْمِ، فَكَانَ لَا يَرَى رُؤْيَا إِلَّا جَاءَتْ مِثْلَ فَلَقِ الصُّبْحِ", urdu: "رسول اللہ ﷺ پر وحی کی ابتدا سچے خوابوں سے ہوئی، جو صبح کی روشنی کی طرح واضح سچ ثابت ہوتے تھے۔", english: "The commencement of the Divine Inspiration to Allah’s Messenger (ﷺ) was in the form of good dreams which came true like bright daylight." }, { metaTitle: "Sahih al-Bukhari", reference: "Hadith No. 6", arabic: "كَانَ رَسُولُ اللَّهِ ﷺ أَجْوَدَ النَّاسِ، وَكَانَ أَجْوَدُ مَا يَكُونُ فِي رَمَضَانَ حِينَ يَلْقَاهُ جِبْرِيلُ", urdu: "رسول اللہ ﷺ تمام انسانوں سے زیادہ سخی تھے، اور رمضان میں جب جبرائیل علیہ السلام آپ سے ملتے تو آپ کی سخاوت اور بھی بڑھ جاتی تھی۔", english: "Allah's Messenger (ﷺ) was the most generous of all the people, and he used to reach the peak of generosity in the month of Ramadan when Jibril met him." }, { metaTitle: "Sahih al-Bukhari", reference: "Hadith No. 7", arabic: "أَنَّ ابْنَ عَبَّاسٍ رَضِيَ اللَّهُ عَنْهُمَا أَخْبَرَهُ أَنَّ أَبَا سُفْيَانَ بْنَ حَرْبٍ أَخْبَرَهُ أَنَّ هِرَقْلَ أَرْسَلَ إِلَيْهِ فِي رَكْبٍ مِنْ قُرَيْشٍ", urdu: "عبداللہ بن عباس رضی اللہ عنہما نے بتایا کہ ابو سفیان بن حرب نے ان سے یہ واقعہ بیان کیا کہ ہرقل (شاہِ روم) نے ان کے پاس قریش کے قافلے میں ایک قاصد بھیجا۔", english: "Narrated Ibn `Abbas: Abu Sufyan bin Harb informed me that Heraclius had sent a messenger to him while he had been accompanying a caravan from Quraish." } ]; // Calculation engine for predictable rotational sequence logic tracking day progression function getDeterministicIndex(modulusLength) { const today = new Date(); // Anchor point date: January 1, 2026 const anchorDate = new Date(2026, 0, 1); // Convert mathematical timestamp discrepancies into pure absolute days const diffTime = Math.abs(today - anchorDate); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); return diffDays % modulusLength; } function renderDailyContent() { const today = new Date(); // Set formatted human header timestamp display string document.getElementById('current-date').innerText = today.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); // Acquire calculated rotational dynamic matching pointers const quranIdx = getDeterministicIndex(quranDatabase.length); const hadithIdx = getDeterministicIndex(hadithDatabase.length); const activeQuran = quranDatabase[quranIdx]; const activeHadith = hadithDatabase[hadithIdx]; // Assembly Matrix — Quran UI Building Loop let quranHTML = ` 📖 ${activeQuran.metaTitle} ${activeQuran.reference} `; activeQuran.verses.forEach(v => { quranHTML += ` ${v.label} ${v.arabic} ${v.urdu} ${v.english} `; }); quranHTML += ``; // Assembly Matrix — Hadith UI Building Loop let hadithHTML = ` 🕌 ${activeHadith.metaTitle} ${activeHadith.reference} ${activeHadith.arabic} ${activeHadith.urdu} ${activeHadith.english} `; // Atomic Insertion Strategy execution run elements execution document.getElementById('quran-container').innerHTML = quranHTML; document.getElementById('hadith-container').innerHTML = hadithHTML; } // Runtime Initialisation execution setup matrix blocks execution paths renderDailyContent(); // Cross-boundary execution observer framework checking for day transformation intervals setInterval(() => { const now = new Date(); if(now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) { renderDailyContent(); } }, 1000);