JavaScript - 달력 구현 [개인 블로그에 캘린더 넣기]

개인 블로그 작성중 캘린더가 한개 들어가면 좋을것 같아서 로직을 구현 및 작성해보았다.

Date() 객체란?

Date는 javaScript의 내장 객체로, 날짜와 시간을 나타내고 조작할 수 있다.

1970년 1월 1일  UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것으로, 날짜와 시간의 컴퓨터 기록물을 대부분 차지하고 있는 UNIX 시간과는 다르다.

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

중요하게 봐야할 메서드

 

let date = new Date(); // 생성자
const year = date.getFullYear(); // 년도
const month = date.getMonth(); // 월 (0월부터 시작 0월 = 1월)
const day = date.getDate(); // 일

const firstWeekDay = new Date(year, month, 0).getDay(); // 값의 범위 0~6 (0=일요일, 1=월요일, ...)
const firstDay = new Date(year, month, 1).getDate(); // 값의 범위 1~31 (1일,2일, ... ,31일)
const lastDay = new Date(year, month + 1, 0).getDate(); // 월의 마지막 날
const prevLastDay = new Date(year, month, 0).getDate(); // 이전달의 마지막 날
// 이렇게 응용들이 가능하다.

여기서 getDate()와 getDay()의 차이를 조심하자.

 

다음으로는 달력을 구현한 코드들이다.

---

HTML

 <!--달력-->
<div class="flex flex-col justify-center items-center">
    <div class="border rounded-xl w-90 p-2 bg-gray-100 dark:bg-gray-700">
        <div class="relative flex w-full">
            <button id="prevMonthBtn" class="border rounded-xl w-10 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600"> &lt; </button>
            <div class="ml-auto flex gap-3">
                <span id="calendar_Year"></span><span id="calendar_Month"></span>
            </div>
            <button id="nextMonthBtn"class="border rounded-xl w-10 cursor-pointer justify-end ml-auto hover:bg-gray-300 dark:hover:bg-gray-600"> &gt; </button>
        </div>
        <div class="border w-full flex-col mt-2">
        	<div class="grid grid-cols-7 text-center mt-2 border-b border-gray-300 dark:border-gray-600 pb-2">
            	<div class="text-red-500 dark:text-red-400">일</div><div>월</div><div>화</div><div>수</div><div>목</div><div>금</div><div class="text-blue-500 dark:text-blue-400">토</div>
            </div>
            	<div id="calendar_day" class="grid grid-cols-7 text-center gap-y-3 mt-2 mb-2">
                <div class="text-gray-400"><!--PrevDay, NextDay 색상--></div>
                <!--날짜 들어가는 곳-->
            </div>
        </div>
    </div>
</div>

---

 JavaScript

let date = new Date();

function renderCalendar() {
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();

  const calendar_Year = document.getElementById("calendar_Year");
  const calendar_Month = document.getElementById("calendar_Month");
  const calendar_day = document.getElementById("calendar_day");
  calendar_day.innerHTML = "";

  const firstDay = new Date(year, month, 1).getDay();
  const lastDay = new Date(year, month + 1, 0).getDate();
  const prevLastDay = new Date(year, month, 0).getDate();
  const nextFirstDay = new Date(year, month + 2, 0).getDate();

  calendar_Year.textContent = year;
  calendar_Month.textContent = month + 1;

  createPrevMonthDay(calendar_day,firstDay, prevLastDay);
  createCurrentDay(calendar_day, lastDay);
  createNextMonthDay(calendar_day);
}

function createCurrentDay(calendar_day, lastDay) {
  for (let i = 1; i <= lastDay; i++) {
    const newDay = document.createElement("div");
    newDay.textContent = i;
    calendar_day.appendChild(newDay);
  }
}

function createPrevMonthDay(calendar_day, firstDay, prevLastDay) {
  for(let i = firstDay - 1; i >= 0; i--){
    const day = document.createElement('div');
    day.textContent = prevLastDay - i;
    day.classList.add("text-gray-400");
    calendar_day.appendChild(day);
  }
}

function createNextMonthDay(calendar_day){
  const weekCells = calendar_day.children.length;
  const nextDay = ( 7 - (weekCells % 7)) % 7;

  for(let i = 1; i <= nextDay; i++){
    const nextDay = document.createElement('div');
    nextDay.textContent = i;
    nextDay.classList.add("text-gray-400");
    calendar_day.appendChild(nextDay);
  }
}

function calendarControler(){
    const prevMonth_Btn = document.getElementById("prevMonthBtn");
    const nextMonth_Btn = document.getElementById("nextMonthBtn");

    prevMonth_Btn.addEventListener("click", e => {
        date.setMonth(date.getMonth() - 1);
        renderCalendar();
        console.log("이전달");
    })

    nextMonth_Btn.addEventListener("click", e => {
        date.setMonth(date.getMonth() + 1);
        renderCalendar();
        console.log("다음달");
    })

}

renderCalendar();
calendarControler();

 

다음 포스팅에선 해당 캘린더들에 공휴일엔 빨간색으로 변형되는 포스팅을 다루어 볼 예정이다.

또한, 캘린더의 이전달 또는 다음달의 날짜를 클릭하면 해당월로 이동하는 로직을 구축하고, 캘린더에 내 일정을 추가하는 기능을 구현하도록 하겠다.