비전공자 개발일기

Javascript Calendar 본문

Javascript

Javascript Calendar

HiroDaegu 2021. 9. 9. 18:27
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <script defer src="main.js"></script>
</head>

<body>
  <div class="container">
    <div class="calendar">
      <div class="month">
        <i class="fas fa-angle-left prev"></i>
        <div class="date">
          <h1></h1>
          <p></p>
        </div>
        <i class="fas fa-angle-right 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>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

html {
  font-size: 62.5%;
}

  .container {
    width: 100%;
    height: 100vh;
    background-color: #12121f;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .calendar {
    width: 45rem;
    height: 52rem;
    background-color: #222227;
    box-shadow: 0 .5rem 3rem rgba(0,0,0,.4) ;
  }

  .month {
    width: 100%;
    height: 12rem;
    background-color: #167e56;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
    text-shadow: 0 .3rem .5rem rgba(0,0,0, .5);
  }

  .month i {
    font-size: 2.5rem;
    cursor: pointer;
  }

  .month h1 {
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .2rem;
    margin-bottom: 1rem;
  }

  .month p {
    font-size: 1.6rem;
  }

  .weekdays {
    width: 100%;
    height: 5rem;
    padding: 0 .4rem;
    display: flex;
    align-items: cetner;
  }

  .weekdays div {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: .1rem;
    width: calc(44.2rem/7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .5);
  }

  .days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: .2rem;
  }

  .days div {
    font-size: 1.4rem;
    margin: .3rem;
    width: calc(40.2rem / 7);
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: .3rem .5rem rgba(0, 0, 0, .5);
    transition: background-color .2s;
  }

  .days div:hover:not(.today) {
    background-color: #262626;
    border: .2rem solid #777;
    cursor: pointer;
  }

  .prev-date, .next-date {
    opacity: .5;
  }

  .today {
    background-color: #167e56;
  }
const date = new Date();
const renderCalendar = () => {
  date.setDate(1);
  const monthDays = document.querySelector(".days")

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

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

  const firstDayIndex = date.getDay();

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

  const nextDays = 7 - lastDayIndex - 1;
  
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  
  document.querySelector(".date h1").innerHTML = `${date.getFullYear()}. ${months[date.getMonth()]}`;
  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>${i}</div>`
    }
  }

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

monthDays.innerHTML = days
}


document.querySelector('.prev').addEventListener('click', () => {
  date.setMonth(date.getMonth()-1);
  renderCalendar();
})
document.querySelector('.next').addEventListener('click', () => {
  date.setMonth(date.getMonth()+1);
  renderCalendar();
})
renderCalendar();
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript Simple update  (0) 2021.09.11
Javascript Clock  (0) 2021.09.10
Javascript Drum  (0) 2021.09.08
Javascript Convert Rank + Calculate score  (0) 2021.09.07
Javascript bubble & selection & insertion sort  (0) 2021.09.05
'Javascript' Related Articles more