[Javascript] 캘린더 만들기 (1)

은비·2023년 8월 8일

JS_Project

목록 보기

7/8

이번엔 Javascript를 이용하여 캘린더 만들기를 해보았다.
현재 달의 날짜를 보여주는 간단한 월별 캘린더를 만들어 주었고 CSS로 스타일을 지정하고,
JavaScript로 달력을 동적으로 생성하며 이전달과 다음달로 이동하는 기능을 추가했다.

index.html 파일을 브라우저에서 열면 캘린더를 볼 수 있으며,
이전 달과 다음 달로 이동하는 버튼을 눌러서 달력을 변경할 수 있다.

✍ 만들고 싶었던 기능

월별 캘린더 표시 : 현재 월의 달력을 표시한다.
일요일부터 토요일까지의 요일을 각각 "일"부터 "토"로 표시한다.

이전 월과 다음 월로 이동 : "이전"과 "다음" 버튼을 클릭하여 이전 월과 다음 월로 이동할 수 있다. 이를 통해 다른 월의 캘린더를 확인할 수 있다.

현재 월과 연도 표시 : 캘린더 상단에 현재 월과 연도를 표시한다.

📌 index.html

<html>
  <head>
    <title>Calendar</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="calendar-container">
      <div class="calendar-header">
        <button id="prevBtn">이전</button>
        <h2 id="currentMonth"></h2>
        <button id="nextBtn">다음</button>
      </div>
      <div class="calendar-days">
        <div class="day">일</div>
        <div class="day">월</div>
        <div class="day">화</div>
        <div class="day">수</div>
        <div class="day">목</div>
        <div class="day">금</div>
        <div class="day">토</div>
      </div>
      <div class="calendar-dates" id="calendarDates"></div>
    </div>
    <script src="./calendar.js"></script>
  </body>
</html>

📌 style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 
1) Arial: 이 값은 웹페이지에서 텍스트를 표시할 때 사용할 글꼴 중 첫 번째로 지정한 글꼴 이름이다. 
웹 브라우저는 컴퓨터에 설치된 해당 글꼴을 찾아서 사용하려고 시도한다. 
만약 컴퓨터에 Arial 글꼴이 설치되어 있지 않다면, 다음에 오는 글꼴 이름(두 번째 값)로 대체되어 텍스트가 표시된다.
2) sans-serif: 이 값은 웹 브라우저가 Arial 글꼴을 찾을 수 없는 경우 대체할 기본 sans-serif 글꼴을 지정한다. 
"sans-serif"는 비행기체(serif) 없이 깔끔하게 디자인된 글꼴을 의미한다. 
보통 Arial이나 Helvetica, Verdana 등과 같은 글꼴이 이에 해당한다. 

따라서 font-family: Arial, sans-serif;는 웹페이지에서 텍스트를 Arial 글꼴로 표시하려고 시도하고, 
만약 Arial 글꼴이 없으면 기본적으로 sans-serif 글꼴을 사용하도록 지정하는 CSS 속성이다. 
이렇게 함으로써 모든 사용자들이 비슷한 형태의 텍스트를 보게 된다. 
*/

.calendar-container {
  width: 300px;
  margin: 30px auto;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
  background-color: #fdefde;
}

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

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* 
  grid-template-columns : CSS의 Grid 레이아웃에서 사용되는 속성(property) 중 하나로, 
  그리드 컨테이너(grid container)의 열(column) 크기를 지정하는 것을 말한다.
  repeat(7, 1fr) : 1행에 7개의 열이 있으며, 
  각 열의 크기를 동일하게 1분의 1(fractional unit, fr)로 설정하라는 의미한다. */
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
/* grid-template-columns 속성을 사용하여 그리드 컨테이너의 열 크기를 유연하게 조정할 수 있으며, 
반응형 웹 디자인에서 유용하게 활용된다. 
이렇게 함으로써 웹페이지의 레이아웃을 다양한 화면 크기와 장치에 맞추는데 도움이 된다. */

.day {
  padding: 5px;
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
}

.date {
  cursor: pointer;
  padding: 5px;
}

.date:hover {
  background-color: #f5f5f5;
}

📌 calender.js

const calendarDates = document.getElementById("calendarDates");
const currentMonthElement = document.getElementById("currentMonth");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

const today = new Date(); // 현재 날짜를 나타내는 Date 객체를 저장한다.
let currentMonth = today.getMonth();
/* 현재 월을 나타내는 값을 저장한다. getMonth() 메서드는 0부터 시작하는 월을 반환하므로
1월이면 0, 2월이면 1을 반환한다. */
let currentYear = today.getFullYear(); // 변수에 현재 연도를 나타내는 값을 저장한다.

function renderCalendar() {
  /* renderCalendar 함수는 월별 캘랜더를 생성하고 표시하는 함수이다. */
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
  /* firstDayOfMonth 변수에 현재 월의 첫 번째 날짜를 나타내는 Date 객체를 저장한다.
해당 월의 첫 번째 날짜에 대한 정보를 얻는다. */
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  /* daysInMonth 변수에 현재 월의 총 일 수를 나타내는 값을 저장한다. 
  해당 월이 몇 일까지 있는지 알 수 있다. */
  const startDayOfWeek = firstDayOfMonth.getDay();
  /* 변수에 현재 월의 첫 번째 날짜의 요일을 나타내는 값을 저장한다.
  해당 월의 첫 번째 날짜가 무슨 요일인지 알 수 있다. */
  currentMonthElement.textContent = `${currentYear}년 ${currentMonth + 1}월`;
  // 월을 나타내는 요소에 현재 월과 연도를 설정하여 표시한다.

  calendarDates.innerHTML = ""; // 일자를 표시하는 그리드 컨테이너를 비운다.

  // 빈 날짜(이전 달)
  for (let i = 0; i < startDayOfWeek; i++) {
    const emptyDate = document.createElement("div");
    //  빈 날짜를 나타내는 div 요소를 생성한다.
    emptyDate.classList.add("date", "empty");
    // 생성한 div 요소에 "date"와 "empty" 클래스를 추가한다.
    calendarDates.appendChild(emptyDate);
    // 생성한 빈 날짜 요소를 캘린더 그리드에 추가한다.
  }

  // 현재 달의 날짜
  for (let i = 1; i <= daysInMonth; i++) {
    const dateElement = document.createElement("div");
    dateElement.classList.add("date");
    dateElement.textContent = i;
    calendarDates.appendChild(dateElement);
  }
  /* 
  1. for 문을 이용하여 현재 월의 총 일 수만큼 반복하여 월의 날짜를 순서대로 표시한다.
  2. const dateElement = document.createElement("div");를 통해 날짜를 나타내는 div 요소를 생성한다.
  3. dateElement.classList.add("date");를 통해 생성한 div 요소에 "date" 클래스를 추가한다.
  4. dateElement.textContent = i;를 통해 해당 날짜 값을 div 요소의 텍스트로 설정한다.
  5. calendarDates.appendChild(dateElement);를 통해 생성한 날짜 요소를 캘린더 그리드에 추가한다.
  */
}

renderCalendar();
// 페이지가 로드되면 renderCalendar 함수를 실행하여 초기 캘린더를 표시한다.

prevBtn.addEventListener("click", () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
});
/* 
1. 이전 버튼(prevBtn)을 클릭하면 현재 월을 이전 월로 변경하고, 연도가 바뀌어야 한다면 연도를 변경한다.
2. 변경된 월과 연도를 바탕으로 renderCalendar 함수를 호출하여 이전 월의 캘린더를 표시한다.
*/

nextBtn.addEventListener("click", () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
});
/* 
1. 다음 버튼(nextBtn)을 클릭하면 현재 월을 다음 월로 변경하고, 연도가 바뀌어야 한다면 연도를 변경한다.
2. 변경된 월과 연도를 바탕으로 renderCalendar 함수를 호출하여 다음 월의 캘린더를 표시한다.
*/