■ Javascript FullCalendar(풀 캘린더) 사용 시 Google Calendar API (구글 캘린더 API) 연동하기
Fullcalendar (풀캘린더) 이미 설정된 일정 외 구글 캘린더 API를 이용해 공휴일 추가하는 방법
■ Google Calendar API 키 발급
1. 구글 계정으로 로그인 후 Google Calendar API (구글 캘린더 API) "ENABLE" 사용하게 설정
https://console.developers.google.com
Google Cloud Platform
하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.
accounts.google.com
2. 사용자 인증 정보 - 사용자 인증 정보 만들기 - API 키 생성함 (Google API KEY)
3. 구글 캘린더 - 내 캘린더 - 사용한 캘린더의 "설정 및 공유 (or Setting)" - 캘린더 ID 확인 (Google Calendar 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
An “event source” is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options” associated wi
fullcalendar.io
'Javascript' 카테고리의 다른 글
| [Javascript] location.href 와 location.replace 페이지 이동 차이점 (0) | 2023.06.29 |
|---|---|
| [Javascript] 특정 원하는 길이만큼 문자열 자르기 substr() (0) | 2022.05.17 |
| [Javascript] window.open() 사용법 및 옵션 (0) | 2022.04.15 |
| [Javascript] 부모창에서 자식창으로 값 전달하기 opener (0) | 2022.03.29 |
| [Javascript] 배열 내 특정 값 삭제하기 splice(), filter() (0) | 2022.03.25 |