Untitled

<!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="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="calendar">
        <div class="month">
          <p class="prev">Previous</i>
          <div class="date">
            <h1></h1>
            <p></p>
          </div>
          <p class="next">Next</i>
        </div>
        <div class="weekdays">
          <div>Sun</div>
          <div>Mon</div>
          <div>Tue</div>
          <div>Wed</div>
          <div>Thu</div>
          <div>Fri</div>
          <div>Sat</div>
        </div>
        <div class="days"></div>
      </div>
    </div>

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













* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  sans-serif;
  }
  
  html {
    font-size: 62.5%;
  }
  
  .container {
    width: 100%;
    height: 100vh;
    background-color:#85e7a4;
    color: #0d0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .calendar {
    width: 45rem;
    height: 47rem;
    background-color: #f3f3f6;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
    border-radius: 20px;
  }
  
  .month {
    width: 100%;
    height: 12rem;
    background-color: #5ec3d3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  
  .month p {
    font-size: 2.5rem;
    cursor: pointer;
  }
  
  .month h1 {
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 1rem;
  }
  
  .month p {
    font-size: 1.6rem;
  }
  
  .weekdays {
    width: 100%;
    height: 5rem;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
  }
  
  .weekdays div {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    width: calc(44.2rem / 7);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem;
  }
  
  .days div {
    font-size: 1.4rem;
    margin: 0.3rem;
    width: calc(40.2rem / 7);
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
  }
  
  .days div:hover:not(.today) {
    background-color: #dedbdb;
    border: 0.1rem solid #777;
    cursor: pointer;
  }
  
  .prev-date,.next-date {
    opacity: 0.5;
  }
  
  .today {
    background-color: #f3933b;
    border-radius: 50%;
  }



const date = new Date();

const displayCalendar = () => {

  date.setDate(1);
  console.log(date);

  const monthDays = document.querySelector(".days");

  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1,0).getDate();
  console.log(lastDay);

  const prevLastDay = new Date(date.getFullYear(),date.getMonth(), 0).getDate();
  console.log(prevLastDay);

  const firstDayIndex = date.getDay();
  console.log(firstDayIndex);

  const lastDayIndex = new Date(date.getFullYear(),date.getMonth() + 1,0).getDay();
  console.log(lastDayIndex);

  const nextDays = 7 - lastDayIndex - 1;

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

  document.querySelector(".date h1").innerHTML = months[date.getMonth()] +"-"+date.getFullYear();
  document.querySelector(".date p").innerHTML = new Date().toDateString();

  let days = "";

  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
  }

  for (let i = 1; i <= lastDay; i++) {
    if (i === new Date().getDate() &&date.getMonth() === new Date().getMonth()) {
      days += `<div class="today">${i}</div>`; 
    }
    else {
      days += `<div class="current-month">${i}</div>`;
    }
  }

  for (let j = 1; j <= nextDays; j++) {
    days += `<div class="next-date">${j}</div>`;
  }

  monthDays.innerHTML = days;

  const currentMonthDays = document.querySelectorAll(".current-month");
  currentMonthDays.forEach((day) => {
    day.addEventListener("click", (e) => {
      const selectedDay = e.target.innerText;
      console.log(`Selected Date: ${selectedDay}-${months[date.getMonth()]}-${date.getFullYear()}`);
    });
  });
};

document.querySelector(".prev").addEventListener("click", () => {
  date.setMonth(date.getMonth() - 1);
  displayCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
  date.setMonth(date.getMonth() + 1);
  displayCalendar();
});

displayCalendar();
Editor is loading...