HTML Calendar

by Imri Paloja

HTML

<div id="calendar">
  <div id="calendar-header">
    <button id="prev-month">&lt;</button>
    <span id="month-year"></span>
    <button id="next-month">&gt;</button>
  </div>
  <div id="days-of-week">
    <span>Sun</span>
    <span>Mon</span>
    <span>Tue</span>
    <span>Wed</span>
    <span>Thu</span>
    <span>Fri</span>
    <span>Sat</span>
  </div>
  <div id="calendar-days"></div>
</div>

CSS

/* styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

#calendar {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

#calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #4caf50;
  color: white;
}

#prev-month,
#next-month {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

#prev-month:hover,
#next-month:hover {
  color: #ddd;
}

#month-year {
  font-size: 18px;
  font-weight: bold;
}

#days-of-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f5f5f5;
  padding: 5px;
  text-align: center;
  font-weight: bold;
}

#days-of-week span {
  padding: 5px;
}

#calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px;
}

.day {
  padding: 15px;
  text-align: center;
  cursor: pointer;
}

.day:hover {
  background-color: #f1f1f1;
  border-radius: 5px;
}

.day.disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

JavaScript

// script.js
const prevMonthButton = document.getElementById('prev-month')
const nextMonthButton = document.getElementById('next-month')
const monthYearDisplay = document.getElementById('month-year')
const calendarDays = document.getElementById('calendar-days')

let currentDate = new Date()

function renderCalendar(date) {
  const year = date.getFullYear()
  const month = date.getMonth()

  // Set month and year in the header
  const monthNames = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ]
  monthYearDisplay.textContent = `${monthNames[month]} ${year}`

  // Clear previous days
  calendarDays.innerHTML = ''

  // Get first day of the month and number of days in the month
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const firstDayOfWeek = firstDay.getDay()
  const totalDays = lastDay.getDate()

  // Add empty spaces for the first row if the month does not start on Sunday
  for (let i = 0; i < firstDayOfWeek; i++) {
    const emptyCell = document.createElement('div')
    emptyCell.classList.add('day', 'disabled')
    calendarDays.appendChild(emptyCell)
  }

  // Add actual days to the calendar
  for (let day = 1; day <= totalDays; day++) {
    const dayCell = document.createElement('div')
    dayCell.classList.add('day')
    dayCell.textContent = day

    // Set today's date to have a special style
    if (
      day === currentDate.getDate() &&
      month === currentDate.getMonth() &&
      year === currentDate.getFullYear()
    ) {
      dayCell.style.backgroundColor = '#4CAF50'
      dayCell.style.color = 'white'
    }

    // Add event listener for clicking a day (optional)
    dayCell.addEventListener('click', () => {
      alert(`You clicked on ${monthNames[month]} ${day}, ${year}`)
    })

   ...