2026 Health Calendar

Public health calendar with important health observances and awareness dates throughout 2026.

2026 Health Calendar

💡 Health observance days are highlighted in green
Click on any highlighted date to learn more about that health awareness day

border: 1px solid #dee2e6; position: relative; cursor: pointer; transition: background-color 0.2s ease; }

.day-cell:hover { background-color: #f8f9fa; }

.day-cell.empty { background: #f8f9fa; }

.day-number { font-size: 0.9rem; font-weight: 500; color: #495057; margin-bottom: 0.25rem; }

.health-day { background: linear-gradient(135deg, #0d5c63 0%, #4CAF50 100%) !important; color: white; border: 2px solid #0d5c63; }

.health-day .day-number { color: white; font-weight: 700; }

.health-event { font-size: 0.7rem; line-height: 1.2; color: inherit; font-weight: 600; margin-top: 0.25rem; }

.health-day .health-event { color: white; }

.months-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 2.5rem; margin: 2rem 0; }

.calendar-note { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #0d5c63; border-radius: 0.8rem; padding: 1.5rem; margin: 2rem 0; text-align: center; font-style: italic; color: #495057; }

.calendar-note strong { color: #0d5c63; font-weight: 700; }


<div class="calendar-note">
<strong>💡 Health observance days are highlighted in green</strong><br>
Click on any highlighted date to learn more about that health awareness day
</div>

<div class="months-container">

```{=html}
<script>
// Health observances data for 2026
const healthEvents = {
  1: { // January
    12: "National Youth Day",
    24: "National Girl Child Day", 
    30: "World Leprosy Eradication Day"
  },
  2: { // February
    4: "World Cancer Day",
    6: "FGM Zero Tolerance Day",
    9: "International Epilepsy Day",
    10: "National Deworming Day",
    11: "Women in Science Day",
    20: "Social Justice Day",
    28: "National Science Day"
  },
  3: { // March
    3: "World Hearing Day",
    8: "International Women's Day",
    12: "World Kidney Day",
    16: "National Vaccination Day",
    20: "World Oral Health Day",
    21: "Down Syndrome Day",
    22: "World Water Day",
    24: "World Tuberculosis Day",
    25: "International Day for Unborn Child",
    26: "Epilepsy Awareness Day"
  },
  4: { // April
    1: "Prevention of Blindness Week",
    2: "World Autism Awareness Day",
    7: "World Health Day",
    11: "Safe Motherhood Day",
    25: "World Malaria Day"
  },
  5: { // May
    5: "World Asthma Day",
    12: "International Nurses Day",
    17: "Hypertension Day",
    28: "Menstrual Hygiene Day",
    31: "World No Tobacco Day"
  },
  6: { // June
    5: "World Environment Day",
    14: "World Blood Donor Day",
    21: "International Yoga Day",
    26: "Day Against Drug Abuse"
  },
  7: { // July
    1: "Doctor's Day",
    11: "World Population Day",
    28: "World Hepatitis Day"
  },
  8: { // August
    1: "World Breastfeeding Week",
    13: "Organ Donation Day",
    20: "Mosquito Day"
  },
  9: { // September
    1: "Nutrition Week",
    8: "Physiotherapy Day",
    10: "World Suicide Prevention Day",
    29: "World Heart Day"
  },
  10: { // October
    1: "Day of Older Persons",
    8: "World Sight Day",
    10: "World Mental Health Day",
    24: "World Polio Day",
    29: "World Stroke Day"
  },
  11: { // November
    12: "World Pneumonia Day",
    14: "World Diabetes Day",
    16: "World COPD Day",
    19: "World Toilet Day"
  },
  12: { // December
    1: "World AIDS Day",
    3: "Day of Persons with Disabilities",
    12: "Universal Health Coverage Day"
  }
};

const monthNames = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

function createCalendar(month, year) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const startDate = firstDay.getDay(); // 0 = Sunday, 1 = Monday, etc.
  const totalDays = lastDay.getDate();
  
  let calendarHTML = `
    <div class="month-calendar">
      <div class="month-header">${monthNames[month]} ${year}</div>
      <div class="calendar-grid">
        <div class="day-header">Sun</div>
        <div class="day-header">Mon</div>
        <div class="day-header">Tue</div>
        <div class="day-header">Wed</div>
        <div class="day-header">Thu</div>
        <div class="day-header">Fri</div>
        <div class="day-header">Sat</div>
  `;
  
  // Empty cells for days before the first day of the month
  for (let i = 0; i < startDate; i++) {
    calendarHTML += '<div class="day-cell empty"></div>';
  }
  
  // Days of the month
  for (let day = 1; day <= totalDays; day++) {
    const isHealthDay = healthEvents[month + 1] && healthEvents[month + 1][day];
    const eventName = isHealthDay ? healthEvents[month + 1][day] : '';
    
    calendarHTML += `
      <div class="day-cell ${isHealthDay ? 'health-day' : ''}">
        <div class="day-number">${day}</div>
        ${eventName ? `<div class="health-event">${eventName}</div>` : ''}
      </div>
    `;
  }
  
  calendarHTML += '</div></div>';
  return calendarHTML;
}

// Generate all months
document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.months-container');
  for (let month = 0; month < 12; month++) {
    container.innerHTML += createCalendar(month, 2026);
  }
});
</script>