구글 캘린더 정보 가져오기
구글 캘린더 API를 사용하는 방법은 여러가지(Java, .Net, Protocol, Javascript)가 있는데 그 중에서 가장 간단한 것은 아마도 자바스크립트 입니다. 뷰에서 데이터를 읽어온 다음에 바로 보여주기 때문에 매우 간단합니다.
구글 캘린더 정보를 가져오는 방법을 크게 두 가지 방법으로 나눌 수 있는데, 나누는 기준은 인증입니다. 즉 로그인을 거친 다음에 정보를 가져오느냐, 아니면 인증 없이 공개된 일정만 가져오느냐 입니다. 당연히 인증을 거치는 방법이 쪼금 더 복잡하겠죠. 그래서 저는 인증을 사용하지 않고, 공개된 일정만 가져와서 뿌려주는 예제를 돌려봤습니다.
자바스크립트 코드는 여기서 참조하실 수 있습니다.
1. 구글 API 키 받기.
여타 다른 오픈 API를 제공하는 곳과 마찬가지로 구글도 여기서 key를 받아서 사용해야 합니다.
2. 외부 자바스크립트 파일 포함시키기.
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
요건 구글 API 키 인증작업에 해당하고, 실제 API를 가져오는 것은 다음과 같습니다.
google.load("gdata", "1");
3. 캘린더 정보 가져오기.
var calendarUrl = 'http://www.google.com/calendar/feeds/' +
calendarAddress +
'/public/full';
loadCalendar(calendarUrl);
}
function loadCalendar(calendarUrl) {
var service = new
google.gdata.calendar.CalendarService('gdata-js-client-samples-simple');
var query = new google.gdata.calendar.CalendarEventQuery(calendarUrl);
query.setOrderBy('starttime');
query.setSortOrder('ascending');
query.setFutureEvents(true);
query.setSingleEvents(true);
query.setMaxResults(10);
service.getEventsFeed(query, listEvents, handleGDError);
}
위의 코드는 전체 코드에서 캘린더 정보를 가져오는 부분에 해당합니다. 가장 핵심이 되는 부분은 맨 아래의 loadCalendar 함수 입니다. 이 함수에 calendarUrl을 넘겨주면 되는데 해당 URL 형식은 위에 있는 메소드에서 알 수 있습니다. calendarAddress에 자신의 구글 계정을 입력하면 자신의 캘린더 정보(자신이 가지고 있는 모든 캘린더 정보가 아니라 기본으로 만들어져 있는 한 개의 캘린더를 지칭합니다.)를 가져올 수 있습니다.
4. 화면에 보여주기
var entries = feedRoot.feed.getEntries();
var eventDiv = document.getElementById('events');
if (eventDiv.childNodes.length > 0) {
eventDiv.removeChild(eventDiv.childNodes[0]);
}
/* create a new unordered list */
var ul = document.createElement('ul');
/* set the calendarTitle div with the name of the calendar */
document.getElementById('calendarTitle').innerHTML =
"Calendar: " + feedRoot.feed.title.$t;
/* loop through each event in the feed */
var len = entries.length;
for (var i = 0; i < len; i++) {
var entry = entries[i];
var title = entry.getTitle().getText();
var startDateTime = null;
var startJSDate = null;
var times = entry.getTimes();
if (times.length > 0) {
startDateTime = times[0].getStartTime();
startJSDate = startDateTime.getDate();
}
var entryLinkHref = null;
if (entry.getHtmlLink() != null) {
entryLinkHref = entry.getHtmlLink().getHref();
}
var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate();
if (!startDateTime.isDateOnly()) {
dateString += " " + startJSDate.getHours() + ":" +
padNumber(startJSDate.getMinutes());
}
var li = document.createElement('li');
/* if we have a link to the event, create an 'a' element */
if (entryLinkHref != null) {
entryLink = document.createElement('a');
entryLink.setAttribute('href', entryLinkHref);
entryLink.appendChild(document.createTextNode(title));
li.appendChild(entryLink);
li.appendChild(document.createTextNode(' - ' + dateString));
} else {
li.appendChild(document.createTextNode(title + ' - ' + dateString));
}
/* append the list item onto the unordered list */
ul.appendChild(li);
}
eventDiv.appendChild(ul);
}
google.setOnLoadCallback(init);
<div id="calendarTitle"></div>
<div id="events"></div>
google.setOnLoadCallback(init); 까지는 <script> 태그로 묶여 있어야 하는 부분입니다. listEvents 함수 내부에서는 구글 캘린더 API와 DOM을 사용해서 특정 id를 가진 엘리먼트에 데이터를 채워넣고 있습니다.
이렇게 간단하게 구글 캘린더 정보를 가져와서 보여줄 수 있습니다.