[Javascript] FullCalendar(풀 캘린더) 사용 시 Google Calendar API (구글 캘린더 API) 연동하기

■ Javascript FullCalendar(풀 캘린더) 사용 시 Google Calendar API (구글 캘린더 API) 연동하기

Fullcalendar (풀캘린더) 이미 설정된 일정 외 구글 캘린더 API를 이용해 공휴일 추가하는 방법

Google Calendar API (구글 캘린더 API) - 캡처 이미지

---

■ Google Calendar API 키 발급

1. 구글 계정으로 로그인 후 Google Calendar API (구글 캘린더 API) "ENABLE" 사용하게 설정

https://console.developers.google.com

Google Cloud Platform

Google Calendar API (구글 캘린더 API) - 캡처 이미지

 

2. 사용자 인증 정보 - 사용자 인증 정보 만들기 - API 키 생성함 (Google API KEY)

API Key - 캡처 이미지

 

3. 구글 캘린더 - 내 캘린더 - 사용한 캘린더의 "설정 및 공유 (or Setting)" - 캘린더 ID 확인 (Google Calendar ID)

구글 캘린더 ID 체크 - 캡처 이미지

---

■ Fullcalendar (풀캘린더)에 구글 캘린더 일정 추가

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    googleCalendarApiKey : "Google API KEY",
    eventSources :[ 
        {
            googleCalendarId : 'Google Calendar ID'
            , color: 'white'   // an option!
            , textColor: 'red' // an option!
        } 
    ],
    ....

---

■ 결과

실제 구현 결과 - 캡처 이미지

---

■ 옵션 참고

https://fullcalendar.io/docs/event-source-object

Event Source Object - Docs | FullCalendar