📌 FullCalendar + Google Calendar 연동

My Pale Blue Dot·2025년 5월 14일

FullCalendar Spring Springboot calendar google

SPRING BOOT

목록 보기

30/40

📅 2025-05-14

📝 학습 내용

✅ 1. 목표

HTML 페이지에 FullCalendar를 띄우고
Google Calendar에서 공개한 일정을 불러와 연동
일정 클릭 시 사용자 정의 동작 실행

✅ 2. 전체 흐름

FullCalendar 공식 문서 참고
GCP(Google Cloud Platform)에서 새 프로젝트 생성
Google Calendar API 사용 설정
API Key 발급 + 제한 설정
- 애플리케이션 제한: 웹사이트 (http://localhost:8090/*)
- API 제한: Google Calendar API
Google Calendar에서 테스트용 캘린더 생성
- “공개로 설정” 체크
- 캘린더 ID 복사
HTML 코드에서 FullCalendar와 Google Calendar 플러그인 연결

✅ 💡 팁: 공식 데모처럼 구성하는 법

🔗 공식 데모 페이지

페이지 우클릭 → "검사" (F12)
<head> 안 <link>와 <script> 태그 복사
동일한 리소스를 내 프로젝트에 붙여넣기

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.17/index.global.min.js"></script>

✅ 3. 전체 HTML 코드 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FullCalendar + Google Calendar 연동</title>

    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.css" rel="stylesheet" />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.17/index.global.min.js'></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
          var calendarEl = document.getElementById('calendar');
          var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            googleCalendarApiKey: 'AIzaSyA***********************wDw', // ← 실제 API 키
            events: {
              googleCalendarId: '64a6...f5229f@group.calendar.google.com' //  ← 공개 캘린더 ID
            },
            eventClick: function(info) {
              info.jsEvent.preventDefault(); // 기본 이동 동작 방지
              console.log(info); // 전체 이벤트 정보 출력
              console.log(info.event._def.title); // 이벤트 제목 출력
              info.el.style.borderColor = 'red'; // 클릭 시 테두리 색상 변경
            }
          });
          calendar.render();
        });
    </script>
</head>
<body>
  <h1>FULLCALENDAR + GOOGLE CALENDAR 연동</h1>
  <div id='calendar'></div>
</body>
</html>

🔗 참고 자료

느낀 점

구글 캘린더 연동 자체는 비교적 간단하지만 API 키 보안 설정, 공개 설정, 캘린더 ID 관리 등이 중요하다.
eventClick을 활용하면 사용자의 인터랙션을 세밀하게 처리할 수 있어 실무 활용도가 높다.
콘솔 로그나 스타일 조작 외에도 클릭 시 상세페이지로 이동, 모달 열기 등 다양한 확장이 가능하다.

요약 (Summary)

항목	내용
API 플랫폼	Google Calendar API
프론트 라이브러리	FullCalendar v6
연동 방식	API 키 + 공개 캘린더 ID
주요 기능	일정 표시, 클릭 이벤트 처리
결과	HTML에서 Google Calendar 일정 출력 + 클릭 기능 구현 완료