자바스크립트에서 JSON 데이터를 이용하여 캘린더 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 캘린더를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 준비

먼저, 캘린더에 표시할 데이터를 JSON 형식으로 준비해야 합니다. 예를 들어, 다음과 같은 JSON 데이터를 사용해볼 수 있습니다.

[
    {
        "date": "2022-01-01",
        "event": "New Year's Day"
    },
    {
        "date": "2022-02-14",
        "event": "Valentine's Day"
    },
    {
        "date": "2022-03-17",
        "event": "St. Patrick's Day"
    }
]

각 객체는 날짜와 이벤트 이름을 포함하고 있습니다.

캘린더 생성

이제 캘린더를 생성하는 자바스크립트 코드를 작성해보겠습니다.

// JSON 데이터 가져오기
const events = [
    {
        "date": "2022-01-01",
        "event": "New Year's Day"
    },
    {
        "date": "2022-02-14",
        "event": "Valentine's Day"
    },
    {
        "date": "2022-03-17",
        "event": "St. Patrick's Day"
    }
];

// 캘린더 요소 선택
const calendar = document.getElementById("calendar");

// JSON 데이터를 순회하며 캘린더에 이벤트 추가
events.forEach(event => {
    const date = new Date(event.date);
    const day = date.getDate();
    
    // 이벤트 요소 생성
    const eventElement = document.createElement("div");
    eventElement.classList.add("event");
    eventElement.innerText = event.event;
    
    // 해당 날짜의 셀 선택
    const cell = calendar.querySelector(`[data-day="${day}"]`);
    
    // 이벤트 추가
    cell.appendChild(eventElement);
});

위 코드는 events라는 변수에 JSON 데이터를 저장하고, calendar라는 요소를 선택한 후 JSON 데이터를 순회하면서 이벤트를 캘린더에 추가합니다.

CSS 스타일링

마지막으로 캘린더를 예쁘게 스타일링하기 위해 CSS를 적용해야 합니다. 스타일링은 각자의 취향에 맞게 변경하면 됩니다. 아래는 간단한 예시입니다.

#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day {
  border: 1px solid #ccc;
  padding: 10px;
}

.event {
  background-color: #fcf876;
  padding: 5px;
}

위 CSS 코드를 적용하면, 캘린더의 각 날짜는 day 클래스를 가지고 있으며, 이벤트는 event 클래스를 가지게 됩니다. 이를 통해 각각의 스타일을 지정할 수 있습니다.

이제 캘린더를 출력하는 HTML 파일에 자바스크립트 코드와 CSS 코드를 포함시키면 됩니다.

마무리

이렇게 JSON 데이터를 이용하여 자바스크립트로 캘린더를 생성하는 방법에 대해 알아보았습니다. JSON 데이터를 사용하면 쉽게 캘린더에 이벤트를 추가할 수 있으며, 자바스크립트와 CSS를 사용하여 원하는 스타일링을 적용할 수 있습니다.

#javascript #json #캘린더