비전공자 개발일기

Javascript - Calendar2 본문

Javascript

Javascript - Calendar2

HiroDaegu 2021. 10. 31. 01:45
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" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <h1>Calendar</h1>
    <div id="calendar_wrap">
      <table id="calendar">
        <caption>
          <a href="#" id="prev">이전 달</a>
          <span class="year"></span>년
          <span class="month"></span>월
          <a href="#" id="next">다음 달</a>
        </caption>
        <tr>
          <th>일</th>
          <th>월</th>
          <th>화</th>
          <th>수</th>
          <th>목</th>
          <th>금</th>
          <th>토</th>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </body>
</html>
* {
  text-align: center;
  margin: 10px auto;
}

#calendar_wrap {
  background: #333;
  width: 350px;
}

caption {
  font-size: 1.5em;
  color: #ffa500;
  padding: 10px;
}

caption #prev, caption #next {
  display: inline-block;
  font-size: 5px;
  text-decoration: none;
  color: #fff;
  padding: 5px;
  margin: 10px;
}

table, th, td {
  color: #fff;
  border: 1px solid #666;
  border-collapse: collapse;
}

th, td {
  width: 30px;
  padding: 10px;
}

th:first-child, td:first-child {
  color: #ff0000;
}

th:last-child, td:last-child {
  color: #0000ff;
}
// calendar 함수
function calendar(new_year, new_month) {
  // 특정 연월을 시작일로부터 조회(year, month, date)
  let d = new Date(new_year, new_month-1, 1)
  // 월별 일 수 구하기
  let d_length = 32 - new Date(new_year, new_month - 1, 32).getDate()
  let year = d.getFullYear()
  let month = d.getMonth()
  let date = d.getDate()
  let day = d.getDay();

  // caption 영역 날짜 표시 객체
  const caption_year = document.querySelector(".year");
  const caption_month = document.querySelector(".month");

  let start_day = document.querySelectorAll("tr td");

  // 테이블 초기화
  for (let i = 0; i < start_day.length; i++) {
    start_day[i].innerHTML = "&nbsp;";
  }

  // 한 달 치 날짜를 테이블에 시작 요일부터 순서대로 표시
  for (let i = day; i < day + d_length; i++) {
    start_day[i].innerHTML = date;
    date++;
  }

  // caption 날짜 표시
  caption_year.innerHTML = year;
  caption_month.innerHTML = month + 1;
}

(function() {
  let prev = document.getElementById("prev");
  let next = document.getElementById("next");
  let year = new Date().getFullYear();
  let month = new Date().getMonth() + 1;
  calendar(year, month);
  prev.onclick = function() {
    calendar(year, --month);
  };
  next.onclick = function() {
    calendar(year, ++month);
  };
}) ();
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - list  (0) 2021.11.02
Javascript - lightBox  (0) 2021.11.01
Javascript - Theme Clock  (0) 2021.10.30
Javascript - Sticky Navbar  (0) 2021.10.29
Javascript - Random Choice Picker  (0) 2021.10.28
'Javascript' Related Articles more