Untitled

unknown
plain_text
16 days ago
5.2 kB
Indexable
Never
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="calendar-container">
        <div class="calendar-header">
            <button id="prevMonth"><</button>
            <div id="monthandyear"></div>
            <button id="nextMonth">></button>
        </div>
        <div class="calendar-body">
            <div class="calendar-days">
                <span>Sunday</span>
                <span>Monday</span>
                <span>Tuesday</span>
                <span>Wednesday</span>
                <span>Thursday</span>
                <span>Friday</span>
                <span>Saturday</span>
            </div>
            <div id="calendarDates" class="calendar-dates"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>




body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calendar-container {
    width: 1200px;
    height: max-content;
    border: 5px solid #000000;
    /* border-radius: 20px; */
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#monthandyear {
    font-weight: bold;
    font-size: xx-large;
    color: rgb(255, 0, 0);
    text-transform: uppercase;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bolder;
    font-size: x-large;
    text-transform: uppercase;
}

.calendar-dates {
    display: grid;
    padding: 10px;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-top: 20px;
    border: 5px solid black;
    /* border-radius: 20px; */
}

.calendar-dates div {
    padding: 20px;
    margin: 5px;
    border: 5px solid black;
    /* border-radius: 20px; */
    background-color: rgb(127, 199, 199);
    cursor: pointer;
    font-size: x-large;
    font-weight: 600;
}

.calendar-dates div.disabled {
    background-color: #c9c9c9;
    cursor: not-allowed;
}

button {
    padding: 20px;
    border: 5px solid black;
    /* border-radius: 20px; */
    font-size: x-large;
    font-weight: 600;
    cursor: pointer;
}




// Get references to the DOM elements
const monthandyear = document.getElementById("monthandyear");
const calendarDates = document.getElementById("calendarDates");
const prevMonthButton = document.getElementById("prevMonth");
const nextMonthButton = document.getElementById("nextMonth");

// Set current date to today's date
let currentDate = new Date();

function renderCalendar(date) {
  calendarDates.innerHTML = ""; // Clear the calendar dates

  const year = date.getFullYear();
  const month = date.getMonth();
  const firstDayOfMonth = new Date(year, month, 1).getDay(); // Get the first day (0=Sunday)
  const daysInMonth = new Date(year, month + 1, 0).getDate(); // Get the number of days in the month

  // Update the calendar header with current month and year
  monthandyear.textContent = date.toLocaleDateString("en-US", {
    month: "long",
    year: "numeric",
  });

  // Fill in previous month's leftover dates
  let lastDayPrevMonth = new Date(year, month, 0).getDate();
  for (let i = 1; i <= firstDayOfMonth; i++) {
    let prevDate = document.createElement("div");
    prevDate.classList.add("disabled");
    prevDate.textContent = lastDayPrevMonth - firstDayOfMonth + i;
    calendarDates.appendChild(prevDate);
  }

  // Fill in the current month's dates
  for (let day = 1; day <= daysInMonth; day++) {
    let dateBox = document.createElement("div");
    dateBox.textContent = day;

    // Highlight today's date
    if (
      day === currentDate.getDate() &&
      month === currentDate.getMonth() &&
      year === currentDate.getFullYear()
    ) {
      dateBox.classList.add("current");
    }

    // Add click event to show selected date in console
    dateBox.onclick = function () {
      console.log(new Date(year, month, day));
    };

    calendarDates.appendChild(dateBox);
  }

  // Fill in next month's dates to make 6 rows (42 total cells)
  let totalCells = 35; // 6 rows x 7 days
  let filledCells = firstDayOfMonth + daysInMonth;
  for (let i = 1; i <= totalCells - filledCells; i++) {
    let nextDate = document.createElement("div");
    nextDate.classList.add("disabled");
    nextDate.textContent = i;
    calendarDates.appendChild(nextDate);
  }
}

// Previous and Next month button actions
prevMonthButton.onclick = function () {
  currentDate.setMonth(currentDate.getMonth() - 1); // Go to previous month
  renderCalendar(currentDate);
};

nextMonthButton.onclick = function () {
  currentDate.setMonth(currentDate.getMonth() + 1); // Go to next month
  renderCalendar(currentDate);
};

// Initial render of the calendar
renderCalendar(currentDate);