[FullCalendar] 풀캘린더 차근차근 달력 생성1 (주말 색 변경 / 시간 표시 제거)

 

 

* 개인 프로젝트

* FullCalendar는 cdn 사용

* DB는 Firebase 사용

* FullCalendar 라이브러리 문서 참고

Event Parsing - Docs | FullCalendar

 

---

 

1. 기본 캘린더 생성

 

*HTML

<!-- 캘린더 생성 위치 -->
<div id='calendar-container'>    
	<div id='calendar'></div>  
</div>

<!-- 모달 -->
<div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEventModalLabel">과제 추가</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="eventForm">
                    <div class="mb-3">
                        <label for="subject" class="form-label">과목</label>
                        <input type="text" class="form-control" id="subject" required>
                    </div>
                    <div class="mb-3">
                        <label for="title" class="form-label">과제</label>
                        <input type="text" class="form-control" id="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="start" class="form-label">시작 일자</label>
                        <input type="date" class="form-control" id="start" required>
                    </div>
                    <div class="mb-3">
                        <label for="end" class="form-label">종료 일자</label>
                        <input type="date" class="form-control" id="end" required>
                    </div>
                    <button type="submit" class="btn btn-primary">저장</button>
                </form>
            </div>
        </div>
    </div>
</div>

 

 

*JS

// fullcalendar 로드
document.addEventListener('DOMContentLoaded', function() {

    const calendarEl = document.getElementById('calendar');
    
    // FullCalendar 옵션 설정
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        selectable: true, // 달력 셀 선택 활성화
        select: function(info) {	// 달력 셀을 클릭할 때 모달 열기
            $('#addEventModal').modal('show'); 
            $('#start').val(info.startStr); 
            $('#end').val(info.endStr);
        },
        events: loadEvents // 일정 불러오기(loadEvents 함수 참조) 
    });
    
    calendar.render();
    
    
    // 과제 추가 폼 제출 시
    $('#eventForm').submit(function(e) {
        e.preventDefault(); // 폼의 기본 동작 방지

        // 입력된 정보 가져오기
        const subject = $('#subject').val();
        const title = $('#title').val();
        const start = $('#start').val();
        const end = $('#end').val();

        docTime(); // 고유번호 리셋(개인적으로 사용하는 고유번호임)
        
        // Firebase에 과제 추가
        db.collection("events").doc(docName).set({
            docName : docName,
            subject : subject,
            title: title,
            start: start,
            end: end
        })
        .then(function() {
            $('#addEventModal').modal('hide'); // 모달 닫기
            calendar.refetchEvents(); // 달력 갱신
            resetForm(); // form 초기화
        })
        .catch(function(error) {
            console.error("과제 추가 오류:", error);
        });
    });

    // Firebase에서 일정 가져오기
    function loadEvents(fetchInfo, successCallback, failureCallback) {
        db.collection("events").get().then((querySnapshot) => {
            let events = [];
            querySnapshot.forEach((doc) => {
                const eventData = doc.data();
                events.push({
                    title: eventData.subject,
                    start: eventData.start,
                    end: eventData.end
                });
            });
            successCallback(events); // 가져온 이벤트 배열 전달
        })
        .catch(function(error) {
            console.error("일정 불러오기 오류:", error);
            failureCallback(error); // 오류 발생 시 실패 콜백 호출
        });
    }
    
  });

 

 

 

---

 

 

2. 주말 색 변경

 

그냥 기본 캘린더 로드했더니 전체 파란색에 말도안되는 밑줄.

왜 다른사람들은 전체 검은색이던데 나는 파란색이지..? 했는데 부트스트랩을 사용해서 a태그에 부딪혔나봄ㅜ

 

 

*CSS

/* calendar.html */

.fc-col-header-cell-cushion, .fc-daygrid-day-number {
    text-decoration: none;
}

.fc-scrollgrid-sync-inner > .fc-col-header-cell-cushion,
.fc-day-mon .fc-daygrid-day-number,
.fc-day-tue .fc-daygrid-day-number,
.fc-day-wed .fc-daygrid-day-number,
.fc-day-thu .fc-daygrid-day-number,
.fc-day-fri .fc-daygrid-day-number {
    color: black;
}

.fc-day-sun .fc-col-header-cell-cushion,
.fc-day-sun a{
    color : red;
}

.fc-day-sat .fc-col-header-cell-cushion,
.fc-day-sat a {
    color : blue;
}

 

---

 

 

3. 일정 추가

 

 

일정 추가에 문제가 생겼다.

위처럼 2월 5일 ~ 2월 6일 에 일정을 추가하고 싶었는데 5일 하루에만 일정이 추가 된 것.

 

 

문서를 찾아보니

시간 설정이 되어 있지 않으면 2월 6일에 일정이 종료된다고 생각하고

2월 5일에만 일정이 추가되는 것 같았다.

 

 

 

 

실제로 input type을 'date'가 아니라 'datetime-local'로 설정해서 시간까지 넣어주면

제대로 일정이 추가되는 것을 볼 수 있다.

 

하지만 나는 일정추가할 때 귀찮게 시간을 넣고 싶지 않았다!

 

 

*JS

// Firebase에 과제 추가
db.collection("events").doc(docName).set({
    docName : docName,
    subject : subject,
    title: title,
    start: start+"T00:00",
    end: end+"T23:59"
})

 

그래서 데이터 추가 시 start + "T00:00", end + "T23:00" 으로 강제 시간 입력해줬다.

 

 

 

정상적으로 동작하는 것을 볼 수 있다.

 

---

 

4. 시간 표시 제거

 

일정 추가하는 건 해결 됐으나 저 못생긴 12a 라고 나오는 시간 표시 부분을 제거 하고 싶었다.

 

*JS

// FullCalendar 옵션 설정
const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    selectable: true, // 달력 셀 선택 활성화
    displayEventTime: false, // 시간 표시 제거
	eventColor: '#990e17',
    select: function(info) {	// 달력 셀을 클릭할 때 모달 열기
        $('#addEventModal').modal('show'); 
        $('#start').val(info.startStr); 
        $('#end').val(info.endStr);
    },
    events: loadEvents // 일정 불러오기(loadEvents 함수 참조) 
});

 

문서에 나와있는대로 displayEventTime을 false로 지정해주고

겸사 겸사 일정 컬러를 현재 사이트에 맞는 색으로 변경해주었다(= eventColor)

 

 

완성!