작업실

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

컨텐츠 정보

본문

 

 

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

 

 

1. 소스 생성하기

 

 

 

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

 


 

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

 

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

 


 

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

 

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

 

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

 

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

 

예를 들어 

 

https://www.google.com/calendar/embed?src=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx@group.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개 / 1페이지

선구자님의 댓글

요즘 아미나도 되련지 모르겠습니다.
생각이 나서 구글에 검색했는데 우성군님 홈피로 연결되네요
Total 157 / 1 Page
RSS
그누보드 SMTP 외부메일 설정하는 방법 댓글 14

그누보드 예전에우분투 20.04에서 구글 SMTP메일서버를 활용한 postfix 메일 보내기(https://www.wsgvet.com/home/594)를…

그누보드5에 실시간 채팅 구축하기 댓글 6

서버 현재 제 홈페이지에 있는 실시간 채팅 기능 적용방법을 알려드리겠습니다.원래 기능이 더 업그레이드되면 올리려고 했는데, 언제 업그레이드가 될지 몰…

메일 서버를 Docker로 구축하여 그누보드, 라이믹스, 워드프레스와 연결하기 댓글 15

서버 들어가며도커로 메일서버 구축하기( https://www.wsgvet.com/home/673 )엊그제 윗 글을 올렸습니다.기존에 올렸던 글은 모든…

도커로 메일서버 구축하기

서버 도커 메일서버란?도커에서 메일서버를 직접 운영할 수 있게 해줍니다.SMTP, ESMTP, POP3, IMAP 방식을 사용할 수 있습니다.자신의 …

그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

나리야 현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.우선 적용 전 이미지입니다.위와 같이 사…

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기 댓글 4

나리야 그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.https://sir.kr/g…

최근글


새댓글


알림 0