Javascript - 할 일 추가하는 캘린더 만들기

자바스크립트를 이용한 할 일을 추가할 수 있는 캘린더 구현이다

날짜를 클릭하고 할 일을 추가하면 달력 밑에 메모에서 적은 내용을 볼 수 있고

해당 날짜에 동그라미로 할 일이 추가된 것을 확인할 수 있다.

또 메모가 입력 된 날짜를 클릭하면 내용을 수정 할 수 있다.

See the Pen Untitled by pronambin (@kimnambin) on CodePen.

 

 

 

html / css

 

  <div class='rap'>
        <div class="header">
            <div class="btn prevDay"></div>
            <h2 class='dateTitle'></h2>
            <div class="btn nextDay"></div>
        </div>

        <div class="grid dateHead">
            <div>일</div>
            <div>월</div>
            <div>화</div>
            <div>수</div>
            <div>목</div>
            <div>금</div>
            <div>토</div>
        </div>

        <div class="grid dateBoard" id='day'></div>
    </div>

    <!-- 여기가 메모 부분 -->
    <div class="memoContainer">
        <div class="memoTitle">📝메모</div>
        <div class="memoList" id="memoList"></div>
    </div>

전체적으로 rap을 이용해서 감싸고 header / dateHead / dateBoard /memoContainer 이 들어가 있다

header  ->  버튼과 타이틀 / dateHead  -> 요일 / dateBoard  -> 일 (day) / memoContainer  -> 추가한 메모

 

.dateHead div {
        background: bluesky;
        color: black;
        text-align: center;
        border-radius: 5px;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;
        background-color: lightyellow;
    }

    .grid div {
        padding: .6rem;
        font-size: .9rem;
        cursor: pointer;
    }

    .dateBoard div {
        color: #222;
        font-weight: bold;
        min-height: 6rem;
        padding: .6rem .8rem;
        border-radius: 5px;
        border: 1px solid #eee;
    }

    .header {
        display: flex;
        justify-content: space-between;
        padding: 1rem 2rem;
    }

    /* 좌우 버튼 */
    .btn {
        display: block;
        width: 20px;
        height: 20px;
        border: 3px solid #000;
        border-width: 3px 3px 0 0;
        cursor: pointer;
    }

    .prevDay {
        transform: rotate(-135deg);
    }

    .nextDay {
        transform: rotate(45deg);
    }

    .memoContainer {
        max-width: 820px;
        padding: 0 1.4rem;
        margin-top: 1.4rem;
    }

    .memoTitle {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .memoList {
        display: flex;
        flex-direction: column;
    }

    .memo {
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .memoContent {
        margin-right: 1rem;
    }

    .editButton,
    .deleteButton {
        cursor: pointer;
        border: none;
        background-color: #007bff;
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 3px;
        margin-right: 0.5rem;
    }

    .editButton:hover,
    .deleteButton:hover {
        background-color: #0056b3;
    }

    /* 여기가 동그라미 나타내는 부분 */
    .hasMemo {
        position: relative;
    }

    .hasMemo::before {
    content: '';
    position: absolute;
    
   
    width: 20px;
    height: 20px;
    background-color: transparent; 
    border: 1px solid red; 
    border-radius: 50%;
    display: block;
}

 

https://gurtn.tistory.com/54

[JS] 달력 만들기

☝️☝️달력 만드는 것은 위의 사이트를 참고해서 만들었다.

 

 

---

JS

 

해당 날짜에 메모 추가 + 수정 -> handelDateClick

function handleDateClick(day) {
    const clickedMonth = new Date(date).getMonth() + 1; //pc는 0부터 읽어가지고 +1을 해줌 + 달을 나타냄
    const formattedDate = `${currentYear}-${clickedMonth.pad()}-${day.pad()}`; // 년-월-일로 나타내기 위함

    showMemo(formattedDate); // 메모 보여주기(showMemo) + 해당 날짜를 알기 위해 (formattedDate)

    //이건 메모를 여러개 입력할 수 있게 해주는 부분
    const isDayInList = calendarList[formattedDate] && calendarList[formattedDate].length > 0;

    //메모 수정 부분
    if (isDayInList) { 
        const memoIndex = prompt('수정할 메모의 번호를 입력'); //메모를 여러개 입력할 수 있으니 정확하게 어느 메모인지 판별하기 위함
        const existingMemo = calendarList[formattedDate][memoIndex - 1]; // 수정 = existingMemo


         // 메모 수정
        if (existingMemo) {
            const updatedMemo = prompt('수정할 내용을 입력', existingMemo);

            
            calendarList[formattedDate][memoIndex - 1] = updatedMemo;

            // 화면 갱신
            showMemo(formattedDate);
        } else { //번호를 잘못 입력했을 시
            alert('해당 메모가 존재x');
        }
    } else {
        addMemo(formattedDate); // 메모 입력 가능한 부분 보여주기
    }
}

메모를 수정 할 때 추가된 메모가 여러개 일때를 생각해서

정확하게 어떤 메모를 수정할 지 확인하기 위해 몇번째 메모를 수정할 건지 묻고 해당 메모를 수정하게 했다.

 

 

 

해당 날짜에 추가된 메모 확인 -> showMemo

function showMemo(date) {
        const memoContent = calendarList[date] || []; //메모내용 = memoContent임 만약 메모가 있으면 해당 내용을 보여주고 없으면 빈칸
        const memoHTML = memoContent.map(content => `<p style="color: aqua;">${content}</p>`).join(''); //메모 내용을 보여주기 map은 배열을 위함

        // 메모 보여주는 곳(memoContainer) 갱신 부분
        const memoContainer = document.querySelector('.memoContainer .memoList');
        memoContainer.innerHTML = memoHTML;
    }

 

메모 입력 및 추가 -> addMemo

 

function addMemo(date) {
        const memoContent = prompt('메모 입력');

        // 메모 데이터에 추가
        calendarList[date] = calendarList[date] || []; //여기도 위의 const memoContent여기랑 동일
        calendarList[date].push(memoContent); // 입력한 내용  -> memoContent 여기로 푸시

        // 메모가 있는 날짜에 동그라미로 표시
        const dateBoardDivs = document.querySelectorAll('.dateBoard div'); //위치 dateBoard
        const day = new Date(date).getDate(); //날짜 date
        const isDayInList = calendarList[date] && calendarList[date].length > 0; //0보다 커야 있다는 것으로 의미
        dateBoardDivs[day].classList.toggle('hasMemo', isDayInList); // 해당하는 곳에 hasMemo(동그라미)표시를 위함
    }

 

 

해당 날짜에 메모를 입력하면 달력에 동그라미로 표시하는 부분이 젤 어려웠다

hasMemo를 사용했는데 얘가 자꾸 해당 날짜 -1 (ex -> 01월 20일에 입력하면 01월19일에 동그라미 )에 표시되서

어떻게 해결할까 하다가 css에서 위치를 변경해줬다