작업실

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

우성군 3 7711 1

 

 

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

 

 

1. 소스 생성하기

 

 

 

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

 


 

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

 

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

 


 

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

 

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

 

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

 

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

 

예를 들어 

 

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

 

위와 같은 형식이죠.

 

 

2. php 문서 생성하기

 

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

 

<?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번에서 추출한 주소를 구글달력주소에 넣으면 됩니다.

 

 

3. 문서 등록하기

 

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

 

위와 같이 등록이 됩니다.

 

 

4. 메뉴 순서 설정하기

 

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

 

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

 

 

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

 

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

 

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

, , , , , , , , , ,

3 Comments
선구자 2017.05.30 22:05  
스크랩 합니다.
감사합니다.
선구자 2017.05.30 22:06  
요즘 아미나도 되련지 모르겠습니다.
생각이 나서 구글에 검색했는데 우성군님 홈피로 연결되네요
우성군 2017.06.04 01:49  
[@선구자] 아하 그렇군요

지금은 되는지 모르겠네요 ㅜ ㅜ