body{ margin:0; background:#f3f4f6; font-family:'Poppins',sans-serif; } /* WRAPPER */ .punjabi-table-wrapper{ max-width:520px; margin:25px auto; background:#ffffff; border-radius:16px; border:1px solid #e5e7eb; overflow:hidden; } /* HEADER */ .punjabi-table-header{ background:linear-gradient(135deg,#065f46,#064e3b); color:#fff; text-align:center; padding:16px; font-size:16px; font-weight:600; } /* TABLE */ .punjabi-table{ width:100%; border-collapse:collapse; } /* ROWS */ .punjabi-table tr{ border-bottom:1px solid #f1f5f9; transition:0.2s; } .punjabi-table tr:hover{ background:#f9fafb; } /* CELLS */ .punjabi-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){ .punjabi-table td{ padding:12px; font-size:12px; } .value{ font-size:13px; } } Punjabi Nanakshahi Calendar Gregorian Date Punjabi Date function getPunjabiDate(date) { const punjabiMonths = [ "Chet", "Vaisakh", "Jeth", "Harh", "Sawan", "Bhadon", "Assu", "Katak", "Maghar", "Poh", "Magh", "Phagun" ]; // Nanakshahi year starts on 14 March const startOfYear = new Date(date.getFullYear(), 2, 14); let punjabiYear = date.getFullYear() - 1468; let diffDays = Math.floor((date - startOfYear) / (1000 * 60 * 60 * 24)); if (diffDays < 0) { punjabiYear--; const prevYearStart = new Date(date.getFullYear() - 1, 2, 14); diffDays = Math.floor((date - prevYearStart) / (1000 * 60 * 60 * 24)); } const monthLengths = [31,31,31,31,31,30,30,30,30,30,30,30]; let month = 0; let day = diffDays + 1; while (day > monthLengths[month]) { day -= monthLengths[month]; month++; } return { day: day, monthName: punjabiMonths[month], monthNumber: month + 1, year: punjabiYear }; } function updatePunjabiCalendar() { const today = new Date(); const gregorian = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }); const punjabi = getPunjabiDate(today); document.getElementById("gregorian-date").innerHTML = gregorian; document.getElementById("punjabi-date").innerHTML = `${punjabi.day} ${punjabi.monthName} ${punjabi.year}`; document.getElementById("short-punjabi-date").innerHTML = `${punjabi.day} / ${String(punjabi.monthNumber).padStart(2,'0')} / ${punjabi.year}`; document.getElementById("info-text").innerHTML = `Today is <strong>${gregorian}</strong>, which is <strong>${punjabi.day} ${punjabi.monthName} ${punjabi.year}</strong> in the Punjabi calendar. In Pakistan, the Punjabi calendar is widely used in rural areas for agriculture and seasonal planning.`; } updatePunjabiCalendar(); setInterval(updatePunjabiCalendar, 3600000); body{ margin:0; background:#f3f4f6; font-family:'Poppins',sans-serif; } /* WRAPPER */ .days-table-wrapper{ max-width:520px; margin:25px auto; background:#ffffff; border-radius:16px; border:1px solid #e5e7eb; overflow:hidden; } /* HEADER */ .days-header{ background:linear-gradient(135deg,#065f46,#064e3b); color:#fff; text-align:center; padding:14px; font-size:15px; font-weight:600; } /* TABLE */ .days-table{ width:100%; border-collapse:collapse; } /* ROW STYLE */ .days-table tr{ border-bottom:1px solid #f1f5f9; transition:0.2s; } .days-table tr:hover{ background:#f9fafb; } /* CELLS */ .days-table td{ padding:12px 16px; font-size:13px; } /* DAY NAME */ .day-eng{ font-weight:600; color:#111827; } /* PUNJABI */ .day-pun{ color:#059669; font-weight:500; text-align:right; } /* ACTIVE DAY */ .active-row{ background:#ecfdf5; } .active-row .day-eng{ color:#065f46; } .active-row .day-pun{ color:#047857; } /* MOBILE */ @media(max-width:480px){ .days-table td{ padding:10px 12px; font-size:12px; } } Punjabi Days Name (ਦਿਨਾਂ ਦੇ ਨਾਮ) function updatePunjabiDaysTable() { const days = [ { eng: "Sunday", pun: "ਐਤਵਾਰ (Aitwar)" }, { eng: "Monday", pun: "ਸੋਮਵਾਰ (Somwar)" }, { eng: "Tuesday", pun: "ਮੰਗਲਵਾਰ (Mangalwar)" }, { eng: "Wednesday", pun: "ਬੁੱਧਵਾਰ (Budhwar)" }, { eng: "Thursday", pun: "ਵੀਰਵਾਰ (Veerwar)" }, { eng: "Friday", pun: "ਸ਼ੁੱਕਰਵਾਰ (Shukarwar)" }, { eng: "Saturday", pun: "ਸ਼ਨੀਵਾਰ (Shaniwar)" } ]; const todayIndex = new Date().getDay(); const table = document.getElementById("days-table"); let html = ""; days.forEach((day, index) => { const activeClass = index === todayIndex ? "active-row" : ""; html += ` <tr class="${activeClass}"> <td class="day-eng">${day.eng}</td> <td class="day-pun">${day.pun}</td> </tr> `; }); table.innerHTML = html; } updatePunjabiDaysTable(); // refresh every hour setInterval(updatePunjabiDaysTable, 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; } /* PUNJABI NAME */ .month-punjabi{ color:#059669; font-weight:500; margin-left:6px; } /* DATE */ .month-date{ font-size:12px; color:#6b7280; text-align:right; } /* ACTIVE */ .active-month{ background:#ecfdf5; } .active-month .month-name{ color:#065f46; } .active-month .month-punjabi{ color:#047857; } /* MOBILE */ @media(max-width:480px){ .months-table td{ padding:10px 12px; font-size:12px; } .month-date{ font-size:11px; } } Punjabi Months (ਮਹੀਨੇ) function getCurrentPunjabiMonth() { const today = new Date(); const year = today.getFullYear(); const monthStarts = [ new Date(year, 2, 14), // Chet new Date(year, 3, 14), // Vaisakh new Date(year, 4, 15), // Jeth new Date(year, 5, 15), // Harh new Date(year, 6, 16), // Sawan new Date(year, 7, 16), // Bhadon new Date(year, 8, 15), // Assu new Date(year, 9, 15), // Kattak new Date(year,10, 14), // Maghar new Date(year,11, 14), // Poh new Date(year+1,0,13), // Magh new Date(year+1,1,12) // Phagun ]; for (let i = monthStarts.length - 1; i >= 0; i--) { if (today >= monthStarts[i]) { return i; } } return 11; // before Mar 14 = Phagun } function updatePunjabiMonths() { const months = [ ["Chet", "ਚੇਤ", "Mar 14 - Apr 13"], ["Vaisakh", "ਵੈਸਾਖ", "Apr 14 - May 14"], ["Jeth", "ਜੇਠ", "May 15 - Jun 14"], ["Harh", "ਹਾੜ", "Jun 15 - Jul 15"], ["Sawan", "ਸਾਵਣ", "Jul 16 - Aug 15"], ["Bhadon", "ਭਾਦੋਂ", "Aug 16 - Sep 14"], ["Assu", "ਅੱਸੂ", "Sep 15 - Oct 14"], ["Kattak", "ਕੱਤਕ", "Oct 15 - Nov 13"], ["Maghar", "ਮੱਘਰ", "Nov 14 - Dec 13"], ["Poh", "ਪੋਹ", "Dec 14 - Jan 12"], ["Magh", "ਮਾਘ", "Jan 13 - Feb 11"], ["Phagun", "ਫੱਗਣ", "Feb 12 - Mar 13"] ]; const activeIndex = getCurrentPunjabiMonth(); const table = document.getElementById("months-table"); let html = ""; months.forEach((month, index) => { const activeClass = index === activeIndex ? "active-month" : ""; html += ` <tr class="${activeClass}"> <td> <span class="month-name">${month[0]}</span> <span class="month-punjabi">${month[1]}</span> </td> <td class="month-date">${month[2]}</td> </tr> `; }); table.innerHTML = html; } updatePunjabiMonths(); // refresh every hour setInterval(updatePunjabiMonths, 3600000); Punjabi 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:#f59e0b; } Prev Next Mon Tue Wed Thu Fri Sat Sun let displayDate = new Date(); let today = new Date(); const nanakshahiMonths=[ {name:"Chet",m:2,d:14}, {name:"Vaisakh",m:3,d:14}, {name:"Jeth",m:4,d:15}, {name:"Harh",m:5,d:15}, {name:"Sawan",m:6,d:16}, {name:"Bhadon",m:7,d:16}, {name:"Assu",m:8,d:15}, {name:"Katak",m:9,d:15}, {name:"Maghar",m:10,d:14}, {name:"Poh",m:11,d:14}, {name:"Magh",m:0,d:13}, {name:"Phagun",m:1,d:12} ]; function getPunjabiDetails(date){ let y=date.getFullYear(); let monthIdx=nanakshahiMonths.findIndex((pm,i)=>{ let start=new Date(y,pm.m,pm.d); let next=nanakshahiMonths[(i+1)%12]; let nextStart=new Date(y,next.m,next.d); return date>=start && date<nextStart; }); if(monthIdx==-1)monthIdx=11; let pm=nanakshahiMonths[monthIdx]; let start=new Date(y,pm.m,pm.d); if(date<start){ start.setFullYear(y-1); } let diff=Math.floor((date-start)/86400000)+1; return{ day:diff, month:pm.name }; } 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<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 p=getPunjabiDetails(curr); let div=document.createElement("div"); div.className="day"; if(curr.toDateString()==today.toDateString()){ div.classList.add("today"); } div.innerHTML=` <div class="g-date">${i}</div> <div class="p-date">${p.day} ${p.month}</div> `; body.appendChild(div); } } function moveMonth(dir){ displayDate.setMonth(displayDate.getMonth()+dir); renderCalendar(); } renderCalendar();
