캘린더는 사용자가 이벤트를 조직, 일정을 관리하고 추적할 수 있도록 하는 현대 웹 응용 프로그램의 필수적인 부분이 되었습니다. 프로젝트 관리 도구, 이벤트 일정 앱 또는 개인 생산성 스위트를 구축하고 있다면 사용자 경험을 크게 향상시킬 수 있는 사용자 정의 캘린더 구성 요소를 만들 수 있습니다. 다양한 미리 만들어진 캘린더 라이브러리가 존재하지만, 자체 구성 요소를 만드는 것은 특정 디자인 및 기능 요구 사항을 충족시키는 유연성을 제공할 수 있습니다.
이 튜토리얼에서는 JavaScript를 사용하여 Google 캘린더와 유사한 구성 요소를 만드는 방법을 살펴볼 것입니다. 이 안내서를 마치면 상호 작용 가능한 기능이 있는 완전한 기능을 갖춘 캘린더와 웹 응용 프로그램을 위한 재사용 가능한 구성 요소를 구축하는 방법에 대한 더 깊은 이해를 얻게 될 것입니다. 프로젝트에 독특한 터치를 추가하려는 개발자이거나 캘린더 기능의 내부 작동을 배우고 싶어하는 사람이라면이 단계별 안내서가 가치 있을 것입니다. 시작합시다!
개요
다음 기능을 갖춘 캘린더 구성 요소를 만들 것입니다:
- 시간 축: 오전 12시부터 오후 11시까지의 수직 타임 라인.
- 이벤트 블록: 시작 및 종료 시간을 기반으로 적절한 위치와 높이로 동적으로 렌더링된 이벤트.
- 중첩 처리: 시간이 겹치는 이벤트는 나란히 표시됩니다.
다음은 단계별로이 구성 요소를 만드는 방법입니다.
단계별 안내서
1. HTML 및 기본 스타일 설정
캘린더를 위한 최소한의 HTML 구조를 만들며 시작합니다. 레이아웃에는 타임라인과 이벤트용 컨테이너가 포함됩니다.
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
캘린더에 대한 기본 CSS를 추가합니다.
.calendar {
display: flex;
width: 500px;
margin: 20px auto;
position: relative;
}
.event {
background: #039be5;
border: 1px solid white;
border-radius: 5px;
position: absolute;
box-sizing: border-box;
color: white;
overflow: hidden;
padding: 3px;
}
.calendar-time {
border-right: 1px solid #ccc;
width: 100px;
}
.calendar-timelist {
list-style: none;
padding: 0;
margin: 0;
text-align: right;
padding-right: 20px;
}
.calendar-timelist li {
height: 60px;
box-sizing: border-box;
width: 100%;
}
.calendar-events {
flex-grow: 1;
position: relative;
}
2. 캘린더를 위한 JavaScript 클래스 생성
Calendar 클래스를 정의하여 모든 기능을 캡슐화합니다.
생성자
생성자는 타임라인과 이벤트를 렌더링하여 캘린더를 초기화합니다.
class Calendar {
constructor(data) {
// Render the timeline on the Y-axis
this.renderTime();
// Render the event blocks
this.renderEvents(data);
}
renderTime() {
let timeHTML = Array.from({ length: 24 }, (_, i) => `<li>${this.to12HourFormat(i)}</li>`).join("");
document.getElementById("timelist").innerHTML = timeHTML;
}
renderEvents(data) {
let groupedEvents = this.groupEvents(data);
let eventData = this.calculateEventStyles(groupedEvents);
let eventHTML = eventData
.map(
(e) =>
`<div class="event" style="top: ${e.top}px; height: ${e.height}px; width: ${e.width}%; left: ${e.left}%; z-index: ${e.zIndex};">
<strong>${e.title}</strong><br>${e.time}
</div>`
)
.join("");
document.getElementById("events").innerHTML = eventHTML;
}
to12HourFormat(hour) {
if (hour === 0) return "12 AM";
if (hour < 12) return `${hour} AM`;
if (hour === 12) return "12 PM";
return `${hour - 12} PM`;
}
}
3. 이벤트 중첩 및 위치 처리
이벤트 중첩을 처리하는 논리가 필요합니다. 이는 그룹화하고 적절한 위치를 계산하여 달성됩니다.
시작 시간별 이벤트 그룹화
groupEvents(data) {
let groups = [];
data.forEach((event) => {
let hour = parseInt(event.start.split(":")[0], 10);
if (!groups[hour]) groups[hour] = [];
groups[hour].push(event);
});
return groups;
}
이벤트 스타일 계산
각 그룹에 대해 이벤트의 top, height, width, left를 시간과 중첩에 따라 계산합니다.
calculateEventStyles(groups) {
let eventData = [];
groups.forEach((group) => {
let columns = [];
group.forEach((event) => {
let { start, end } = event;
let [sh, sm] = start.split(":").map(Number);
let [eh, em] = end.split(":").map(Number);
let top = sh * 60 + sm; // Convert start time to minutes
let height = (eh * 60 + em) - top; // Calculate duration in minutes
let left = columns.findIndex((col) => col.end <= start);
if (left === -1) {
left = columns.length;
columns.push({ end });
} else {
columns[left].end = end;
}
eventData.push({
title: event.name,
time: `${this.to12HourFormat(sh)} - ${this.to12HourFormat(eh)}`,
top,
height,
left: (left * 100) / columns.length,
width: 100 / columns.length,
zIndex: left,
});
});
});
return eventData;
}
4. 예시 데이터 및 초기화
이벤트 데이터를 정의하고 Calendar를 초기화합니다:
const events = [
{ name: "Meeting with Donna", start: "09:00", end: "10:30" },
{ name: "Project Sync", start: "10:00", end: "11:00" },
{ name: "Lunch Break", start: "12:00", end: "13:00" },
{ name: "Client Call", start: "11:30", end: "12:30" },
];
new Calendar(events);
5. 전체 코드 예시
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Calendar Component</title>
</head>
<body>
<div class="calendar">
<div class="calendar-time">
<ul id="timelist" class="calendar-timelist"></ul>
</div>
<div id="events" class="calendar-events"></div>
</div>
<script src="script.js"></script>
</body>
</html>
결론
이 방법은 일반 JavaScript를 사용하여 Google 캘린더와 유사한 구성 요소를 동적으로 생성합니다. 렌더링 시간, 이벤트 그룹화, 스타일 계산의 문제를 분해하여 확장 가능하고 인터랙티브한 구성 요소를 구축할 수 있습니다. 드래그 앤 드롭 가능한 이벤트나 추가적인 스타일링과 같은 기능을 추가하기 위해 코드를 실험할 수 있습니다!
Source:
https://dzone.com/articles/building-a-google-calendar-like-component-using-javascript