Islamic Date and Month Today in Pakistan & Globally

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 < 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();

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);

/* ===== ISLAMIC MONTHS WIDGET ONLY ===== */ .islamic-months-widget { width: 100%; max-width: 520px; margin: 20px auto; box-sizing: border-box; font-family: Poppins, Arial, sans-serif; }

.islamic-months-widget *, .islamic-months-widget *::before, .islamic-months-widget *::after { box-sizing: border-box; }

/* CONTAINER */ .islamic-months-wrapper { width: 100%; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }

/* HEADER */ .islamic-months-header { width: 100%; background: linear-gradient(135deg, #065f46, #064e3b); color: #ffffff; text-align: center; padding: 13px 10px; font-size: 14px; line-height: 1.4; font-weight: 600; }

/* TABLE */ .islamic-months-table { width: 100%; margin: 0; padding: 0; border-collapse: collapse; table-layout: fixed; }

/* ROW */ .islamic-months-table tr { border-bottom: 1px solid #f1f5f9; }

.islamic-months-table tr:last-child { border-bottom: 0; }

/* CELLS */ .islamic-months-table td { padding: 11px 14px; vertical-align: middle; line-height: 1.4; }

/* LEFT COLUMN */ .islamic-months-table td:first-child { width: 70%; text-align: left; }

/* RIGHT COLUMN */ .islamic-months-table td:last-child { width: 30%; text-align: right; }

/* MONTH NAME */ .islamic-month-name { color: #111827; font-size: 13px; font-weight: 600; white-space: normal; }

/* ARABIC */ .islamic-month-arabic { display: inline-block; margin-left: 5px; color: #059669; font-size: 13px; font-weight: 500; direction: rtl; }

/* STATUS */ .islamic-month-status { color: #6b7280; font-size: 11px; white-space: nowrap; }

/* ACTIVE MONTH */ .islamic-months-table tr.active-month { background: #ecfdf5; }

.islamic-months-table tr.active-month .islamic-month-name { color: #065f46; }

.islamic-months-table tr.active-month .islamic-month-arabic { color: #047857; }

.islamic-months-table tr.active-month .islamic-month-status { color: #047857; font-weight: 600; }

/* ===== TABLET ===== */ @media (max-width: 767px) {

.islamic-months-widget { width: 100%; max-width: 100%; margin: 15px 0; }

.islamic-months-wrapper { border-radius: 12px; }

.islamic-months-header { font-size: 13px; padding: 12px 8px; }

.islamic-months-table td { padding: 10px 12px; } }

/* ===== MOBILE ===== */ @media (max-width: 480px) {

.islamic-months-widget { width: 100%; max-width: 100%; margin: 12px 0; }

.islamic-months-table td:first-child { width: 68%; }

.islamic-months-table td:last-child { width: 32%; }

.islamic-months-table td { padding: 9px 10px; }

.islamic-month-name { font-size: 12px; }

.islamic-month-arabic { font-size: 12px; margin-left: 3px; }

.islamic-month-status { font-size: 10px; } }

/* ===== VERY SMALL PHONES ===== */ @media (max-width: 360px) {

.islamic-months-header { font-size: 12px; padding: 10px 6px; }

.islamic-months-table td { padding: 8px 7px; }

.islamic-month-name, .islamic-month-arabic { font-size: 11px; }

.islamic-month-status { font-size: 9px; } }

Islamic Hijri Months (الأشهر الهجرية)

(function () {

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 < ISLAMIC_MONTH_DATA.length; i++) {

const month = ISLAMIC_MONTH_DATA[i];

const startDate = new Date( month.startYear, month.startMonth, month.startDay );

startDate.setHours(0, 0, 0, 0);

const endDate = new Date(startDate);

endDate.setDate( endDate.getDate() + month.length );

if (today >= startDate && today < endDate) { return i; } }

return -1; }

function updateIslamicMonthsTable() {

const tableBody = document.getElementById("islamic-months-table-body");

if (!tableBody) return;

const activeIndex = getCurrentHijriMonthIndex();

let html = "";

ISLAMIC_MONTH_DATA.forEach(function (month, index) {

const isActive = index === activeIndex;

html += `

${month.name}

${month.arabic}

${isActive ? "Current Month" : "Month " + String(month.id).padStart(2, "0") }

`; });

tableBody.innerHTML = html; }

/* Run after page loads */ if (document.readyState === "loading") {

document.addEventListener( "DOMContentLoaded", updateIslamicMonthsTable );

} else {

updateIslamicMonthsTable(); }

/* Refresh once every hour */ setInterval( updateIslamicMonthsTable, 60 * 60 * 1000 );

})();

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 < islamicMonths.length; i++) { let im = islamicMonths[i]; let start = new Date(im.startYear, im.startMonth, im.startDay); start.setHours(0,0,0,0); let nextStart = new Date(start); nextStart.setDate(nextStart.getDate() + im.length);

if (target >= 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" }; }