[Fullcalendar] fullcalendar API사용하여 구글 캘린더 연동하기

1.

fullcalendar 다운로드 + 연결 

이곳에서 다운받기

- fullcalendar.min.css

- fullcalendar.min.js

- moment.min.js (날짜 작업을 위한 js 라이브러리)

- gcal.js (구글 캘린더 자바스크립트)

 

 

 

2-1.

구글 캘린더  >  ⚙️설정  > 내 캘린더의 설정   > 해당 캘린더 선택

 

 - 캘린더 ID 확인

* 엑세스 권한을 꼭 공개 사용 설정으로 해주세요!

 

 

2-2.

구글 API에서 새 프로젝트 생성

 

2-3.

라이브러리 > Google Calendar API 사용 선택

 

2-4.

사용자 인증 정보 > ➕ 사용자 인증 정보 만들기 > API 키 선택 

 

인증키 생성 완료

 

3.

코드 삽입

- googleCalendarApiKey : (2-4)에서 생성받은 KEY 입력

- eventSources : (2-1)에 있는 캘린더 ID입력, 추가하려는 달력이 더 있으면 하단 ko.south_korea 처럼 넣어주세요.

<div id="calendar"></div>
<script>
        $('#calendar'). fullCalendar ({
            googleCalendarApiKey : 'API Key 입력',
          header: {
               left: '',
               center: 'prev, title, next',
                // right: 'month, basicWeek, agendaDay'
                right: ''
           },
           monthYearFormat: 'MMMM YYYY',
           ventLimit: true,
           fixedWeekCount: false,
           defaultView: 'month',
            dayNamesShort: ["S","M","T","W","T","F","S"],
            buttonText: {
               today : "오늘",
               month : "월별",
               week : "주별",
               day : "일별",
             },
            eventSources : // 한국 기념일 ko.south_korea 추가
                [ { googleCalendarId : '구글 캘린더 아이디 입력' }
                    , { googleCalendarId : 'ko.south_korea#holiday@group.v.calendar.google.com'
                    , className : 'ko_event' } ]
        });
 </script>

 

완료시 하단 이미지들 처럼 CSS 커스텀해서 사용하면 됩니다 😀😀😀

레이아웃01

 

레이아웃02