그누보드5 아미나ASR 테마에 구글 캘린더 설치하기

위와 같이 그누보드5에 구글 캘린더를 넣는 방법입니다.

구글 캘런더에 들어가서 위와 같이 캘린더 설정에 들어갑니다.

위와 같이 '이 캘린더 추가하기' 오른쪽에 있는 색상, 크기 및 기타 옵션 사용자설정을 클릭합니다. 

밑에 있는 코드를 그대로 넣어도 되지만 커스텀할 여지가 많아 옵션 클릭을 추천합니다.

위와 같이 여러가지 설정을 할 수 있습니다. 

참고로 너비와 높이는 반응형으로 설정되어 큰 의미는 없습니다.

다 설정한 뒤에 오른쪽 위에 있는 HTML 업데이트를 클릭 후 소스를 긁습니다.

그 중에서 src="블라블라" 블라블라의 내용만 따옵니다.

예를 들어 

https://www.google.com/calendar/embed?src=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx@group.calendar.google.com&ctz=Asia/Seoul

위와 같은 형식이죠.

내용은 밑의 코드를 참조하시거나 첨부파일을 참고하시면 됩니다.

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 
?>
<style>
.embed-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container">
<object id="calendar_google" width="800px" height="600px" data="구글달력주소">
<iframe src="구글달력주소" width="800" height="600" frameborder="0"></iframe></object>
</div>
<br>

1번에서 추출한 주소를 구글달력주소에 넣으면 됩니다.

그누보드 관리자 모드 -> 아미나 스킨 -> 문서 설정 -> 일반문서 등록 -> 등록그룹(원하는 그룹 지정하기) -> 문서ID (calendar_google) -> 문서파일(calendar_google) -> 메뉴명(구글 캘린더) -> 등록

위와 같이 등록이 됩니다.

그누보드 관리자 모드 -> 아미나 스킨 -> 메뉴설정 -> 넣은 그룹의 오른쪽에 서브메뉴 클릭하여 순서 지정

위와 같이 그룹의 메뉴 순서를 설정할 수 있습니다.

이제 해당 메뉴를 눌러보면 정확하게 표현되는 것을 볼 수 있습니다.

저는 new-basic 테마라서 반응형 부트스트랩이지만 폰에서도 정확하게 반응형으로 나오는 것을 볼 수 있습니다.

모바일에서도 당연히 잘 나오구요 ^^