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'], }, } } }

Islamic Date Today

Live Sync

🇵🇰 Pakistan Local

Loading...

Gregorian Date Loading...

Global / Saudi Hijri 🇸🇦 Loading...

Last checked: Just now Sync Dates

function getHijriDate(date, dayOffset = 0) { const targetDate = new Date(date); targetDate.setDate(targetDate.getDate() + dayOffset);

try { const formatter = new Intl.DateTimeFormat('en-TN-u-ca-islamic-umalqura-nu-latn', { day: 'numeric', month: 'long', year: 'numeric' }); const formatted = formatter.format(targetDate); return formatted.replace(/AH/g, '').trim() + ' AH'; } catch (e) { return "29 Safar, 1448 AH"; } }

function updateCalendar() { const today = new Date();

// 1. Gregorian Date Format const gregorianElem = document.getElementById("gregorian-date"); if (gregorianElem) { gregorianElem.innerText = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); }

// 2. Global / Saudi Hijri Date const globalElem = document.getElementById("global-date"); if (globalElem) { globalElem.innerText = getHijriDate(today, 0); }

// 3. Pakistan Local Hijri Date (-1 Day offset) const pakistanElem = document.getElementById("pakistan-date"); if (pakistanElem) { pakistanElem.innerText = getHijriDate(today, -1); }

// Update timestamp const updatedElem = document.getElementById("last-updated"); if (updatedElem) { const timeStr = today.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); updatedElem.innerText = `Last checked: ${timeStr}`; } }

document.addEventListener('DOMContentLoaded', updateCalendar);

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-style: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-content: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 Moon-Sighting 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: 29 }, // Aug 13 = 29 Safar { name: "Rabi' al-Awwal", year: 1448, monthNum: 3, startDate: new Date(2026, 7, 14), length: 30 }, { name: "Rabi' al-Thani", year: 1448, monthNum: 4, startDate: new Date(2026, 8, 13), length: 29 }, { name: "Jumada al-Awwal", year: 1448, monthNum: 5, startDate: new Date(2026, 9, 12), length: 30 }, { name: "Jumada al-Thani", year: 1448, monthNum: 6, startDate: new Date(2026, 10, 11), length: 29 }, { name: "Rajab", year: 1448, monthNum: 7, startDate: new Date(2026, 11, 10), length: 30 }, { name: "Sha'ban", year: 1448, monthNum: 8, startDate: new Date(2027, 0, 9), length: 29 }, { name: "Ramadan", year: 1448, monthNum: 9, startDate: new Date(2027, 1, 7), 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));

/* 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

body { margin: 0; font-family: 'Poppins', sans-serif; background: #f3f4f6; padding: 15px 8px; }

/* CONTAINER */ .calendar { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 10px; 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: 10px; text-align: center; font-size: 13px; font-weight: 600; }

/* NAV */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eee; background: #fff; }

button { font-size: 10px; padding: 4px 10px; border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; font-weight: 600; border-radius: 5px; 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: 6px 0; border-bottom: 1px solid #eee; }

.weekday { text-align: center; font-size: 10px; font-weight: 600; color: #4b5563; }

/* GRID */ .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; }

/* DAY BOX */ .day { background: #f9fafb; border: 1px solid #f1f5f9; border-radius: 6px; padding: 4px; min-height: 48px; display: flex; flex-direction: column; justify-content: 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: 11px; font-weight: 600; color: #1f2937; }

.h-date { font-size: 8px; font-weight: 500; color: #047857; line-height: 1.1; margin-top: 1px; }

/* FOOTER LEGEND */ .legend { padding: 8px 12px; background: #f9fafb; border-top: 1px solid #eee; display: flex; justify-content: space-around; font-size: 9px; color: #4b5563; }

.legend-item { display: flex; align-items: center; gap: 4px; }

.dot-today { width: 6px; height: 6px; background: #059669; border-radius: 50%; }

.dot-event { width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; }

Islamic Date Today

← 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 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: 29 }, { name: "Rabi' al-Awwal", year: 1448, monthNum: 3, startDate: new Date(2026, 7, 14), length: 30 }, { name: "Rabi' al-Thani", year: 1448, monthNum: 4, startDate: new Date(2026, 8, 13), length: 29 }, { name: "Jumada al-Awwal", year: 1448, monthNum: 5, startDate: new Date(2026, 9, 12), length: 30 }, { name: "Jumada al-Thani", year: 1448, monthNum: 6, startDate: new Date(2026, 10, 11), length: 29 }, { name: "Rajab", year: 1448, monthNum: 7, startDate: new Date(2026, 11, 10), length: 30 }, { name: "Sha'ban", year: 1448, monthNum: 8, startDate: new Date(2027, 0, 9), length: 29 }, { name: "Ramadan", year: 1448, monthNum: 9, startDate: new Date(2027, 1, 7), length: 30 } ];

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

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

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

/* 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";

if (curr.toDateString() === today.toDateString()) { div.classList.add("today"); }

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} `;

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