📅 Calendar 만들기

📆 미션 : date 객체를 활용한 캘린더 만들기

📃 요구사항

• 달력을 만들고 좌우 화살표를 누르면 해당하는 월로 넘어간다.
• 일마다 선택이 가능해야 하며, 해당 일을 선택했을 경우 메모장이 노출된다.
• 메모장에는 메모를 입력할 수 있다.
• 메모를 입력한 후 다시 캘린더 화면으로 돌아오면
  해당 일에 작은 원으로 메모가 있음을 표시한다.
• 메모 기록이 있는 날짜를 클릭할 경우 기록 했던 메모장이 노출된다.
• 메모장에 기록한 내용을 수정할 수 있다.

🚗 달력 기본 틀 데려오기

gpt샘께 폭풍 질문 해서 받은 달력 틀을 넣고
내가 원하는 구성으로 쫌쫌따리 바꾸고 디테일한 부분과
메모장 기능을 가능하게 하는 것에 초점을 맞춰 보자.

오맛 .. 벨로그 쓰다 보면 실행 화면을 보여줄 때 gif 따서 첨부하거나
캡쳐 사샤삭 했었는데 이렇게 코드펜 화면을 넣어줄 수도 있다. 얏호 !

벨로그에 코드펜 사용하는 방법도 따로 글로 작성해두자요

달력 틀 생성

🛩️ 스타일 적용

• 그라디언트 배경 적용
• wrapper 영역 / calendar 영역 배치
• 화살표 아이콘 추가
• wrapper 영역 안에 calendar 영역 배치
• 달력 헤더는 calendar 영역에서 빼고 wrapper 영역에 배치

결과 화면 !

++ 현재 요일 표시해주기

++ 좀 더 씰룩
색상을 바꿔서 배경과 어울리게 맞추고 달력 table의 td에 padding 값을 추가하여
추후에 구현해야 할 메모 표시 여부를 생각해서 좀 더 면적을 넓혀 주었다.

---

01. 화살표를 누르면 해당하는 월로 넘어가기

📃 조건 : 달력을 만들고 좌우 화살표를 누르면 해당하는 월로 넘어간다.

• calendar.html
  

• cal.js

//현재 년도 및 월 변수 추가
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();

//달력을 생성하고 표시하는 함수
function generateCalendar() {
    // 달력의 헤더 생성
    var headerHTML = `<h2 style="color:#fff; text-align:center; position:relative; bottom: 55px;">${currentYear}년 ${currentMonth + 1}월</h2>`;

    // 달력 영역에 헤더 추가
    var headerContainer = document.createElement("div");
    headerContainer.classList.add("header");
    headerContainer.innerHTML = headerHTML;

    // wrapper에 헤더 추가
    var wrapper = document.querySelector(".header");
    wrapper.innerHTML = ''; // 헤더를 지우고 다시 추가
    wrapper.appendChild(headerContainer);
    
    // 달력의 본문 생성
    var calendarHTML = '<table>';
    // 요일 표시
    calendarHTML += '<tr>';
    const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토'];
    for (let day of daysOfWeek) {
        calendarHTML += `<th>${day}</th>`;
    }
    calendarHTML += '</tr>';

    // 각 주와 날짜 표시
    const totalDaysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();

    let dayCounter = 1;

    for (let i = 0; i < 6; i++) { // 최대 6주 (일주일이 6주일 경우도 있음)
        calendarHTML += '<tr>';

        for (let j = 0; j < 7; j++) { // 7일 (요일)
            let cellStyle = ''; // 셀에 적용할 스타일 초기화

            if (i === 0 && j < firstDayOfMonth) {
                // 첫 주의 시작일 이전은 빈 셀로 채움
                calendarHTML += '<td></td>';
            } else if (dayCounter > totalDaysInMonth) {
                // 마지막 날 이후는 빈 셀로 채움
                calendarHTML += '<td></td>';
            } else {
                // 유효한 날짜일 경우 날짜 표시
                if (j === 0) {
                    // 일요일은 빨간색
                    cellStyle = 'color: red;';
                } else if (j === 6) {
                    // 토요일은 파란색
                    cellStyle = 'color: blue;';
                }
                calendarHTML += `<td style="${cellStyle}">${dayCounter}</td>`;
                dayCounter++;
            }
        }

        calendarHTML += '</tr>';

        // 모든 날짜를 표시한 경우 종료
        if (dayCounter > totalDaysInMonth) {
            break;
        }
    }

    calendarHTML += '</table>';
    // 생성된 달력을 달력 컨테이너에 추가
    var calendarContainer = document.getElementById("calendar");
    calendarContainer.innerHTML = calendarHTML;
}

// 페이지 로드 시 현재 월에 해당하는 달력 표시
window.onload = function () {
    generateCalendar();
    // 현재 날짜에 스타일 추가
    highlightCurrentDate();
    
    // 좌우 화살표 아이콘에 클릭 이벤트 추가
    var prevMonthIcon = document.querySelector('.bxs-chevron-left');
    var nextMonthIcon = document.querySelector('.bxs-chevron-right');

    prevMonthIcon.addEventListener('click', function () {
        changeMonth(-1); // 이전 월로 이동
    });

    nextMonthIcon.addEventListener('click', function () {
        changeMonth(1); // 다음 월로 이동
    });
};

// 이전 월 또는 다음 월로 이동하는 함수
function changeMonth(direction) {
    currentMonth += direction;
    if (currentMonth < 0) {
        currentMonth = 11;
        currentYear--;
    } else if (currentMonth > 11) {
        currentMonth = 0;
        currentYear++;
    }
    generateCalendar();
    highlightCurrentDate();
}

• 결과
  

---

02. 메모 기능 추가

📃 조건 :

• 일마다 선택이 가능해야 하며, 해당 일을 선택했을 경우 메모장이 노출된다. ✔️
• 메모장에는 메모를 입력할 수 있다. ✔️
• 메모를 입력한 후 다시 캘린더 화면으로 돌아오면
  해당 일에 작은 원으로 메모가 있음을 표시한다. ✔️
• 메모 기록이 있는 날짜를 클릭할 경우 기록 했던 메모장이 노출된다. ✔️
• 메모장에 기록한 내용을 수정할 수 있다. ✔️

1차 헤딩 결과

2차 헤딩 결과

기능 자체는 구현을 했는데 문제는
동작 연결되는 부분 부분 디테일적인 거랑 요소끼리 부딪혀서 나타나지 않는 것 같은
부분들의 수정이 필요하다.

밤새면서 했는데도 온전히 구현을 해내진 못해서 답답했다.
자바스크립트는 함수 하나 구현 성공하면 좋아하다가
다른데 보면 다 동작이 망가져있다....
무한 굴레 하다 보면 내가 뭘 했는지조차 더 헷갈려지고
해결과정 쓰려다가도 오래 붙잡고 있어서 정리조차 쉽지 않다.

아으 !!!!!!! 이 사람아 정신 차려

gpt샘이랑도 무수히 많은 대화를 했지만
둘 다 지침 ...
다른 분들 한 프로젝트를 보면서
간단하면서도 되게 퀄리티있게 결과가 나왔는데
따라하지 않고 혼자 해보려고 도전정신 외쳤다가
오히려 시간을 아주 ... 효율적이게 못쓴 느낌이 들어
피곤함과 더불어 슬펐다.

뚝딱아... 그래도 하자. 다시 해보자요

<앞으로 남은 고칠 부분>

메모장에 잔뜩 독이 찬 글 그대로 .. 퍼왔다.

이럴수록 더 해결하고 싶은 마음이 커진다 !!!!

다시 하자 ᕙ(⇀_↼‵‵)ᕗ

++ css보단 기능을 구현하는데 집중해야겠다고 생각해서
기능이 작동하는것에 초점을 두고 다시 만들었다.

그런데 기능들은 구현됐지만 한 가지 계속 안 되던 부분이
메모를 저장하면 해당 메모가 저장된 날짜에는 원 모양의 표시를 해주는 걸
계속 시도했지만 원은 코빼기도 나타나지 않았다.

저장할 때 원이 추가되게까진 했지만 다른 날짜를 클릭하면 원이 사라지고 있다.