Islamic Date Today

body { margin: 0; background: #f3f4f6; font-family: 'Poppins', sans-serif; } /* WRAPPER */ .islamic-table-wrapper { max-width: 520px; margin: 25px auto; background: #ffffff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; } /* HEADER */ .islamic-table-header { background: linear-gradient(135deg, #065f46, #064e3b); color: #fff; text-align: center; padding: 16px; font-size: 16px; font-weight: 600; } /* TABLE */ .islamic-table { width: 100%; border-collapse: collapse; } /* ROWS */ .islamic-table tr { border-bottom: 1px solid #f1f5f9; transition: 0.2s; } .islamic-table tr:hover { background: #f9fafb; } /* CELLS */ .islamic-table td { padding: 14px 16px; font-size: 13px; vertical-align: top; } /* LABEL */ .label { color: #6b7280; font-weight: 500; text-transform: uppercase; font-size: 11px; margin-bottom: 4px; display: block; } /* VALUE */ .value { color: #111827; font-weight: 600; font-size: 14px; } /* HIGHLIGHT */ .highlight { display: inline-block; margin-top: 6px; background: #ecfdf5; color: #059669; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; } /* INFO TEXT */ .info-row { background: #f9fafb; } .info-text { font-size: 12px; color: #374151; line-height: 1.6; } /* MOBILE */ @media(max-width:480px) { .islamic-table td { padding: 12px; font-size: 12px; } .value { font-size: 13px; } } Islamic Calendar (Hijri Date Today) Gregorian Date --- Pakistan Hijri Date --- --- 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 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 = 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(); const gregorian = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); const worldHijri = getDetailedHijriDate(today, 0); const pakistanHijri = getDetailedHijriDate(today, -1); const localHijriStr = `${pakistanHijri.day} ${pakistanHijri.monthName} ${pakistanHijri.year} AH`; const globalHijriStr = `${worldHijri.day} ${worldHijri.monthName} ${worldHijri.year} AH (Global)`; document.getElementById("gregorian-date").innerText = gregorian; document.getElementById("pakistan-date").innerText = localHijriStr; document.getElementById("world-date").innerText = globalHijriStr; document.getElementById("info-text").innerHTML = `Today is ${gregorian} , which corresponds to ${localHijriStr} in Pakistan. Islamic dates are determined by lunar sightings and may vary by region.`; } updateIslamicDates(); setInterval(updateIslamicDates, 3600000); body{ margin:0; background:#f3f4f6; font-family:'Poppins',sans-serif; } /* WRAPPER */ .months-table-wrapper{ max-width:520px; margin:25px auto; background:#ffffff; border-radius:16px; border:1px solid #e5e7eb; overflow:hidden; } /* HEADER */ .months-header{ background:linear-gradient(135deg,#065f46,#064e3b); color:#fff; text-align:center; padding:14px; font-size:15px; font-weight:600; } /* TABLE */ .months-table{ width:100%; border-collapse:collapse; } /* ROW */ .months-table tr{ border-bottom:1px solid #f1f5f9; transition:0.2s; } .months-table tr:hover{ background:#f9fafb; } /* CELL */ .months-table td{ padding:13px 16px; font-size:13px; } /* MONTH NAME */ .month-name{ font-weight:600; color:#111827; } /* ARABIC NAME */ .month-arabic{ color:#059669; font-weight:500; margin-left:6px; font-size:14px; } /* MONTH NUMBER / STATUS */ .month-date{ font-size:12px; color:#6b7280; text-align:right; } /* ACTIVE MONTH */ .active-month{ background:#ecfdf5; } .active-month .month-name{ color:#065f46; } .active-month .month-punjabi, .active-month .month-arabic{ color:#047857; } /* MOBILE */ @media(max-width:480px){ .months-table td{ padding:10px 12px; font-size:12px; } .month-date{ font-size:11px; } } Islamic Hijri Months (الأشهر الهجرية) const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", arabic: "المحرّم", startYear: 2026, startMonth: 5, startDay: 15, length: 30 }, { id: 2, name: "Safar", arabic: "صفر", startYear: 2026, startMonth: 6, startDay: 15, length: 30 }, { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", startYear: 2026, startMonth: 7, startDay: 14, length: 29 }, { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", startYear: 2026, startMonth: 8, startDay: 12, length: 30 }, { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", startYear: 2026, startMonth: 9, startDay: 12, length: 30 }, { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", startYear: 2026, startMonth: 10, startDay: 11, length: 29 }, { id: 7, name: "Rajab", arabic: "رجب", startYear: 2026, startMonth: 11, startDay: 10, length: 30 }, { id: 8, name: "Sha'ban", arabic: "شعبان", startYear: 2027, startMonth: 0, startDay: 9, length: 30 }, { id: 9, name: "Ramadan", arabic: "رمضان", startYear: 2027, startMonth: 1, startDay: 8, length: 30 }, { id: 10, name: "Shawwal", arabic: "شوال", startYear: 2027, startMonth: 2, startDay: 10, length: 29 }, { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", startYear: 2027, startMonth: 3, startDay: 8, length: 30 }, { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", startYear: 2027, startMonth: 4, startDay: 8, length: 29 } ]; function getCurrentHijriMonthIndex() { const today = new Date(); today.setHours(0,0,0,0); for (let i = 0; i = monthStartDate && today { const isActive = index === activeIndex; const activeClass = isActive ? "active-month" : ""; const statusText = isActive ? "Current Month" : `Month ${String(month.id).padStart(2, '0')}`; html += ` ${month.name} ${month.arabic} ${statusText} `; }); table.innerHTML = html; } updateIslamicMonthsTable(); // Refresh table every hour setInterval(updateIslamicMonthsTable, 3600000); Islamic Calendar 2026 body{ margin:0; font-family:'Poppins',sans-serif; background:#f3f4f6; } /* CONTAINER */ .calendar{ max-width:520px; margin:20px auto; background:#fff; border-radius:12px; border:1px solid #e5e7eb; overflow:hidden; } /* HEADER */ .header{ background:#065f46; color:white; padding:12px; text-align:center; font-size:14px; font-weight:600; } /* NAV */ .nav{ display:flex; justify-content:space-between; padding:8px 12px; border-bottom:1px solid #eee; } button{ font-size:11px; padding:5px 10px; border:none; background:#ecfdf5; color:#065f46; border-radius:6px; cursor:pointer; } /* WEEK DAYS */ .weekdays{ display:grid; grid-template-columns:repeat(7,1fr); background:#f9fafb; padding:6px 0; border-bottom:1px solid #eee; } .weekday{ text-align:center; font-size:10px; color:#6b7280; } /* GRID */ .grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:10px; } /* DAY BOX */ .day{ background:#f9fafb; border:1px solid #f1f5f9; border-radius:8px; padding:6px; min-height:55px; font-size:10px; } .day:hover{ background:#ecfdf5; } /* EMPTY */ .empty{ visibility:hidden; } /* TODAY */ .today{ background:#d1fae5; border-color:#059669; } /* TEXT */ .g-date{ font-size:11px; font-weight:600; } .p-date{ font-size:9px; color:#059669; font-weight:500; } Prev Next Mon Tue Wed Thu Fri Sat Sun let displayDate = new Date(); let today = new Date(); // Pakistan Islamic Calendar Month Data (Starts calibrated with 1 Rabi' al-Awwal 1448 AH) const islamicMonths = [ { name: "Muharram", startYear: 2026, startMonth: 5, startDay: 16, length: 30, year: 1448 }, { name: "Safar", startYear: 2026, startMonth: 6, startDay: 16, length: 30, year: 1448 }, { name: "Rabi' al-Awwal", startYear: 2026, startMonth: 7, startDay: 15, length: 29, year: 1448 }, { name: "Rabi' al-Thani", startYear: 2026, startMonth: 8, startDay: 13, length: 30, year: 1448 }, { name: "Jumada al-Awwal", startYear: 2026, startMonth: 9, startDay: 13, length: 30, year: 1448 }, { name: "Jumada al-Thani", startYear: 2026, startMonth: 10, startDay: 12, length: 29, year: 1448 }, { name: "Rajab", startYear: 2026, startMonth: 11, startDay: 11, length: 30, year: 1448 }, { name: "Sha'ban", startYear: 2027, startMonth: 0, startDay: 10, length: 30, year: 1448 }, { name: "Ramadan", startYear: 2027, startMonth: 1, startDay: 9, length: 30, year: 1448 }, { name: "Shawwal", startYear: 2027, startMonth: 2, startDay: 11, length: 29, year: 1448 }, { name: "Dhu al-Qadah", startYear: 2027, startMonth: 3, startDay: 9, length: 30, year: 1448 }, { name: "Dhu al-Hijjah", startYear: 2027, startMonth: 4, startDay: 9, length: 29, year: 1448 } ]; function getIslamicDetails(date){ let target = new Date(date); target.setHours(0,0,0,0); for (let i = 0; i = start && target < nextStart) { let diff = Math.floor((target - start) / 86400000) + 1; return { day: diff, month: im.name }; } } // Default fallback calculation if outside explicit array dates let start = new Date(2026, 7, 15); start.setHours(0,0,0,0); let diff = Math.floor((target - start) / 86400000) + 1; return { day: diff > 0 ? diff : 1, month: "Rabi' al-Awwal" }; } function renderCalendar(){ let body=document.getElementById("calendarBody"); body.innerHTML=""; let year=displayDate.getFullYear(); let month=displayDate.getMonth(); 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; let daysInMonth=new Date(year,month+1,0).getDate(); /* EMPTY CELLS */ for(let i=0;i ${i} ${p.day} ${p.month} `; body.appendChild(div); } } function moveMonth(dir){ displayDate.setMonth(displayDate.getMonth()+dir); renderCalendar(); } renderCalendar();

Islamic Date Today

Punjabi Date Today in Pakistan – Desi Mahina, Punjabi Calendar & Ajj Di Tareekh

Islamic Date Today

onPakistan’s 79th Independence Day was celebrated with enthusiasm

Leave a Reply Cancel reply

Must Read

Weekly inflation reaches 9.11 percent

NADRA makes important changes in the ID card system

Pakistan Army’s important message to the nation on Independence Day

President Zardari’s emphasis on world peace

No compromise on Pakistan’s water: PM Shahbaz Sharif

Related News

onPakistan’s 79th Independence Day was celebrated with enthusiasm

Iran approves strategic plan to monitor the Strait of Hormuz

Weekly inflation reaches 9.11 percent

NADRA makes important changes in the ID card system

ECC approves increase in petrol and diesel margin

Useful Categories

Useful Links

Contact Us!

Islamic Date Today

Related posts

onPakistan’s 79th Independence Day was celebrated with enthusiasm

Leave a Reply Cancel reply

Must Read

Related News

Useful Categories

Useful Links

Contact Us!