아보카도 에디션 개인 홈페이지에
구글 캘린더를 예쁘게 넣어보자!
1. 구글캘린더 API
1-2. [+사용자 인증 정보 만들기 > API 키] 선택
1-3. 그렇게 만들어진 API키를 복사해둡니다.
1-4. API키 제한
우측의 메뉴 클릭 후 [키 수정] 선택
1-5. [키 제한] 선택 후 [Google Calendar API] 를 선택하고 저장.
2. 구글 캘린더 설정
2-1. 갠홈에 넣을 캘린더 클릭 후 [설정 및 공유] 클릭해서 들어가기
2-2. 액세스 권한 이하 이미지와 같이 변경
2-3. 캘린더 ID 복사해두기
3. 풀캘린더 사용하기
3-2. 다운받은 파일에서 이하 파일을 개인 홈페이지 [css]와 [js] 안에 삽입하기
1) main.js > [js] 폴더로2) main.css > [css] 폴더로
삽입 후 이름은 calmain.js, calmain.css 등으로 변경한다.
3-3. 개인 홈페이지의 [head.sub.php] 파일을 열어서 </head>위에 이하를 추가한다.
<link href='css/calmain.css' rel='stylesheet' />
<script src='js/calmain.js'></script>
3-4. 개인 홈페이지 main 하단 적당한 곳에 이하 스크립트 추가
<!-- 구글캘린더 -->
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'API 키',
eventSources: [
{
googleCalendarId: '구글캘린더 ID 1',
className: '캘린더 이름 1',
color: '#ff0000', //원하는 색 지정
textColor: 'white' //원하는 텍스트 색 지정
},
{
googleCalendarId: '구글캘린더 ID 2,
className: '캘린더 이름 2',
color: '#0000ff', //원하는 색 지정
textColor: 'black' //원하는 텍스트 색 지정
}
]
});
calendar.render();
});
</script>
설명:
해당 부분에는 1-3의 API 키를 기입
해당 부분에는 2-3의 캘린더 아이디를 기입
해당 부분에는 2-1에서 확인할 수 있는 캘린더 이름 기입
해당 부분은 원하는 색상으로 지정할 것
구글 캘린더 여러개를 지정할 수 있기 때문에 다른 캘린더도 이하에 추가하면 다른 색으로 표시되도록 설정할 수 있다.
3-5. 구글캘린더를 넣고 싶은 위치에 이하의 내용 추가
<div id='calendar'></div>
끝입니다.