Javascript 및 Local Storage로 Custom Calendar 앱 만들기

사용자 정의 캘린더 응용 프로그램은 JavaScript, 브라우저 문서 개체 모델 (DOM) 및 클라이언트 측면 데이터 지속의 이해를 깊숙히하는 우수한 방법입니다. Web Storage API를 레버리지로 - 특히 로컬 스토리지 - 당신은 backend 서버 또는 데이터베이스가 필요없이 브라우저에서 완전히 실행되는 완전히 기능, 이벤트 중심 캘린더를 만들 수 있습니다. 이 튜토리얼은 드래그 앤 드롭 이벤트 관리와 같은 고급 기능을 구현하기 위해 HTML을 통해 모든 단계를 수행 할 수 있습니다.

왜 주문 캘린더를 구축합니까?

Pre-built 캘린더 라이브러리 (FullCalendar 또는 DayPilot과 같은) 빠른 솔루션을 제공하지만, 처음부터 하나의 기능을 사용하면 사용자 인터페이스, 데이터 처리 및 성능에 대한 완벽한 제어를 제공합니다. 또한 ] 객체, 이벤트 위임 및 API와 같은 핵심 JavaScript 개념과 함께 핸즈에 경험을 얻을 수 있습니다. 결과는 해당 응용 프로그램은 프로젝트 관리 도구, 예약 시스템, 또는 개인 저널로 확장 할 수 있습니다.

HTML 구조 설정

HTML 스켈레톤을 사용하여 시작하십시오. 달력은 3 가지 주요 구성 요소가 필요합니다. 탐색 바 (변경 개월), 그리드 컨테이너 (일 셀 용) 및 이벤트 입력 양식. 사용 [[FLT : 2]] 쉬운 스타일링 및 스크립트에 대한 세마틱 클래스 이름과 요소.

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

]은 자바스크립트가 동적으로 변환됩니다. 모바일 친화적 인 레이아웃을 위해, 7‐column CSS 그리드를 사용하는 것을 고려하십시오 (주당 일당 1 개). 일명 이름 (일 - 토요일)의 첫 번째 행을 예약하십시오.

CSS로 캘린더 스타일링

깨끗한 반응형 CSS는 원시 HTML을 사용 가능한 인터페이스로 변환합니다. 캘린더 그리드에 CSS Grid를 사용하여 를 설정합니다. 한 달의 첫 번째 전에 일 동안 우주선을 추가하십시오. 접근성을 위해 충분한 색상 대비를 보장하고 ] 스타일의 상호 작용 요소가 있습니다. 최소 스타일 시트는 아래 (inline 또는 연결)를 나타냅니다.

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

좁고 화면에 셀 크기를 줄이기 위해 미디어 쿼리를 사용하고 이벤트 텍스트를 숨기고 계산 만 표시합니다.

Core JavaScript: 캘린더 그리드 생성

JavaScript에서 모든 동적 렌더링 생활. 중앙 기능, , 월의 첫날을 계산하고 총 일 수. 사용 주일 지수를 얻기 위해 (0 = 일요일). 그런 다음 월의 마지막 날에 1에서 반복에서 세포를 생성합니다.

Date Object로 작업

객체는 달력 논리의 백본입니다. 달의 마지막 날을 얻으려면 를 사용하십시오 (다음 달의 일 0은 현재 달의 마지막 날을 제공합니다). 글로벌 변수의 현재 달과 년을 저장하므로 탐색을 업데이트 할 수 있습니다.

그리드 구축

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

헤더에 월/년 표시 업데이트: ]

달 사이 항법

이전과 다음 버튼으로 이벤트 리리스를 클릭 합니다. 증후 또는 결정 , 필요한 경우 년 조정 (예: 12 월 이후 다음 해 1 월). 변수를 업데이트 한 후, ] 다시 호출.

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

추가 사용성에 대해서는 Today 버튼을 추가하여 현재 달에 대한 전망과 현재 날을 강조합니다.

Storing & 지역 스토리지와 이벤트 검색

Local Storage는 브라우저가 다시 시작되는 간단한 키값 저장소를 제공합니다. 일관된 키 패턴을 사용하여, 예를 들어, , 이벤트 객체의 JSON 배열을 저장합니다. , ], , 와 같은 속성을 포함하십시오.

새로운 이벤트 저장

사용자가 "Save"버튼을 클릭하면 입력 값과 현재 선택한 날짜를 캡처합니다. (일 셀이 클릭되는 날짜를 추가하거나 감지 할 수 있습니다.) 로컬 저장소에서 해당 날짜에 대한 기존 이벤트를 검색하고 새로운 이벤트를 푸시하고 다시 저장하십시오.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

Day Cells에 대한 평가

내부 , 각 비 ‐ empty day cell, 그 날짜 키에 대한 로컬 저장소 기능을 호출. 이벤트가 존재하는 경우, 그들을 통해 반복 및 셀에 요소.

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

삭제 및 편집 이벤트

삭제하려면 각 이벤트 요소 (또는 이벤트 위임을 사용)에 클릭 이벤트를 첨부하십시오. 해당 날짜에 대한 배열을 검색하고 ]로 이벤트를 필터링하고 로컬 저장소로 업데이트 된 배열을 저장하십시오. 편집은 새로운 텍스트를 위해 이벤트를 더블 클릭하고 배열을 업데이트 할 수 있습니다.

기능 향상을 위한 고급 기능

기본 캘린더가 작동되면, 사용자 경험을 크게 향상시킬 수있는 기능을 추가 할 수 있습니다.

Color‐Coding 이벤트 by Type

사용자를 지정할 수 있는 범주(예, 일, 개인, 건강). 로컬 저장소의 필드를 저장합니다. CSS에서, ], ]과 같은 클래스를 정의하고 동적으로 적용하십시오.

Drag ‐Drop 재조합

HTML5 드래그와 드롭 API를 사용하여 하루 셀 사이의 이벤트를 이동하십시오. 이벤트가 다른 날에 떨어질 때 로컬 저장소의 날짜 키를 업데이트하십시오. 원래 날짜 배열에서 이벤트를 제거하고 새로운 날짜의 배열에 밀어.

재회 이벤트 (주간 / 월)

이벤트를 저장 할 때 "Repeat"옵션을 추가하십시오. 로딩 기능에서 현재 날짜가 재발성 규칙 (예, 매주 월요일)과 이벤트를 표시하는 경우 계산합니다. 중복을 피하기 위해 별도의 로컬 저장소 키에 저장소 규칙을 저장하십시오.

주간보기 및 미니 캘린더

달과 주 전망 사이 토글. 일주일에 한 번의 전망은 더 수평한 공간을 가진 현재 주일의 일만 보여줍니다. 작은 달 보기 소형 달력은 사용자가 어떤 날짜든지 빨리 뛰어납니다.

일정 책임과 접근 가능

다양한 화면 크기에 캘린더를 테스트합니다. queries를 사용하여 매우 작은 화면에 수직으로 겹쳐 쌓이거나 패딩을 줄이기 위해. 모든 상호 작용 요소가 키보드에 액세스 할 수 있습니다. 입력 및 탈출을위한 이벤트를 첨부하십시오. ] 버튼을 사용하여 스크린 리더를위한 속성과 월간 변경 및 이벤트 추가를 발표합니다.

성능 및 데이터 관리 팁

Batched Storage Writes: 각 이벤트 작업에 대한 읽기/ 쓰기 로컬 저장소 대신, JavaScript 객체의 전체 달의 이벤트를 캐시하고, 오류가 발생하게 됩니다.
Limit Event Size: 이벤트 객체를 작은 상태로 유지하십시오. 큰 문자열 또는 바이너리 데이터를 저장하지 마십시오.
스토리지 제한: 로컬 스토리지는 일반적으로 5~10MB에 캡핑됩니다. 저장이 거의 풀 때 Warn 사용자.
대형 Datasets: 귀하의 캘린더가 수천 개의 이벤트를 보유할 경우 IndexedDB를 고려하여 성능과 쿼리 기능을 제공합니다.