Whiteship's Note

구글 캘린더 정보 가져오기

모하니?/Coding : 2007. 10. 6. 20:38


구글 캘린더 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. 캘린더 정보 가져오기.
function loadCalendarByAddress(calendarAddress) {
  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. 화면에 보여주기

function listEvents(feedRoot) {
  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를 가진 엘리먼트에 데이터를 채워넣고 있습니다.

이렇게 간단하게 구글 캘린더 정보를 가져와서 보여줄 수 있습니다.
사용자 삽입 이미지

top

Write a comment.




: 1 : ··· : 233 : 234 : 235 : 236 : 237 : 238 : 239 : 240 : 241 : ··· : 299 :