CalVis: Google Calendar를 위한 맞춤설정된 AJAX UI 만들기

오스틴 차우, Google 개발자 프로그램
2008년 6월

참고 - Google 직원이 시작한 오픈소스 프로젝트로, 공식 지원되지 않는 라이브러리입니다. 여러분의 참여에 관심 있는 모든 분께 감사드립니다. :)

소개

Google Calendar 데이터를 사용하여 웹사이트에서 맞춤설정된 캘린더 환경을 만들고 싶지만 캘린더 데이터를 시각적으로 표시하는 방법을 잘 모르는 적이 있으신가요? 이러한 딜레마를 공유하는 개발자가 많은 것 같습니다. Google Calendar Data API는 모든 Google Calendar 데이터의 풍부함을 활용할 수 있는 강력한 웹 서비스 API이지만, 데이터 시각화를 위한 프로비저닝 없이 순수한 읽기/쓰기 데이터 API로 남아 있습니다.

이 문서에서는 이 문제를 완화하기 위해 작성한 샘플 라이브러리를 보여줍니다. Google Calendar 계정에서 데이터를 발표할 수 있는 맞춤설정 가능한 UI(사용자 인터페이스)를 제공하는 오픈소스 프로젝트인 Calendar 시각화 (CalVis)를 시작했습니다. CalVis는 Google Calendar Data API를 통해 Google Calendar 계정에서 직접 데이터를 가져옵니다. (편집자 주: v3부터 Google Calendar에서는 Google 데이터 형식을 사용하지 않습니다.) 아래에 있는 Google 데이터 자바스크립트 클라이언트 라이브러리를 사용하여 Google 캘린더와 통신하며 유연하게 맞춤설정할 수 있도록 설계되었습니다.

CalVis는 개발자가 풍부한 캘린더 UI 환경을 다시 만들지 않아도 되도록 설계되었습니다. 개발자는 이를 맞춤 템플릿 컨테이너로 사용하여 Google Calendar 데이터를 오버레이할 수 있습니다. 개발자는 CalVis를 사용하여 캘린더 데이터를 렌더링하고 사이트와의 심도 있는 맞춤 통합을 달성할 수 있습니다. 학습한 바와 같이, CalVis를 기반으로 빌드된 인터페이스는 자바스크립트, HTML 및 CSS를 통해 완전히 맞춤설정할 수 있습니다. 개발자는 캘린더 데이터를 렌더링하는 데 필수적인 일련의 캘린더 제어 구성요소가 포함된 맞춤설정된 캘린더 인터페이스를 쉽고 빠르게 배포할 수 있습니다.

CalVis 사용

다음 단계는 개발에 CalVis를 시작하는 데 도움이 됩니다.

1단계 - 캘린더 시각화 라이브러리 로드

먼저 HTML 파일에 로더를 포함해야 합니다. 이 로더는 CalVis의 핵심 클래스와 종속 라이브러리 (예: Google 데이터 자바스크립트 클라이언트 라이브러리)를 동적으로 로드합니다. 

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

2단계 - CSS 스타일시트를 사용하여 스타일 속성을 설명합니다.

기본 CSS 파일은 이 예와 같이 기본 디자인과 분위기를 생성합니다. 이 CSS 파일을 다운로드하여 완전히 새로운 디자인과 분위기를 맞춤설정할 수 있습니다. 

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

3단계 - HTML을 사용하여 캘린더 인터페이스의 시각적 구조 배치

CalVis에는 캘린더 인터페이스를 구성하는 사전 정의된 여러 시각적 구성요소가 있습니다. 이러한 인터페이스 구성요소의 구조는 HTML 레이아웃에 의해 정의됩니다.

CalVis의 UI 구성요소는 다음과 같습니다.

  • 로그인 제어(비공개 캘린더만 해당)
    로그인/로그아웃 링크를 제공하는 HTML 구성요소입니다.
  • 상태 제어
    상태 정보나 오류를 제공하는 HTML 구성요소입니다.
  • 탐색 컨트롤
    현재 보기를 기준으로 캘린더 탐색을 렌더링하는 HTML 구성요소입니다.
  • 보기 제어
    캘린더 보기 선택을 렌더링하는 HTML 구성요소입니다. 이번 버전에서는 월 보기 또는 주 보기만 사용할 수 있습니다.
  • Calendar 본문
    실제 캘린더를 렌더링하는 HTML 구성요소입니다. 그리드를 사용하여 개별 날짜 셀을 지정합니다.
  • 이벤트 표시
    이벤트 트리거 시 이벤트 세부정보를 렌더링하는 HTML 구성요소입니다. 이 출시 버전에서는 'click' 및 'mouseover' 이벤트 트리거만 지원됩니다.

기본 HTML 표 구조를 사용하여 이러한 구성요소를 시각적으로 정렬하는 방법 예시 

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

4단계 - 자바스크립트로 CalVis 초기화 및 구성

자바스크립트를 사용하여 동작이나 모양을 맞춤설정할 수 있습니다. 자바스크립트에서 객체를 수정하려면 먼저 브라우저에서 로드해야 합니다. 따라서 모든 종속 라이브러리가 CalVis 로더로 로드될 때까지 기다려야 하며, 이 작업은 calvis.ready() 메서드를 통해 처리됩니다. 이 메서드는 모든 라이브러리가 로드되고 CalVis를 사용할 준비가 되면 호출되는 콜백 메서드를 사용합니다. 

window.onload = function() {
  calvis.ready(callback);
}

콜백 함수 내에서 calvis.Calendar 객체의 인스턴스를 인스턴스화합니다. 이제 해당하는 CSS UI 구성요소에 매핑할 다양한 CSS ID (3단계의 HTML 레이아웃에서 정의됨)를 할당해야 합니다. 

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

이제 CalVis에서 데이터를 가져올 Google Calendar 계정을 지정할 수 있습니다. 공개 캘린더를 지정하려면 다음 안내를 따르세요. 

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

비공개 캘린더를 지정하려면 로그인 버튼에 해당하는 HTML 구성요소도 지정해야 합니다. 

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

이벤트 세부정보를 표시하려면 'click' 또는 'mouseover' 이벤트를 통해 캘린더의 이벤트 목록이 트리거될 때 이벤트 세부정보를 표시하는 콜백이 호출되도록 콜백 메서드를 제공해야 합니다. 이벤트 표시 콜백의 예 

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}
마지막으로 캘린더의 기본 보기('월' 또는 '주' 보기)를 설정하고 render() 메서드를 호출하여 캘린더 UI를 표시할 수 있습니다. 
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

스타일 맞춤설정

개별 날짜 셀의 크기, 색상 또는 스타일을 맞춤설정하려면 사전 정의된 CSS 클래스의 CSS 스타일링 속성을 수정하면 됩니다. 예를 들어 기본 CSS 클래스 monthViewCell 및 contentCell을 재정의하여 월간 보기에서 각 날짜 셀의 너비와 높이를 수정할 수 있습니다.

데모

이 데모에서는 기본 스타일로 CalVis를 사용하는 방법을 보여줍니다.

이 데모에서는 CalVis를 맞춤설정하여 Google 지도와 YouTube API로 매시업하는 방법을 보여줍니다.

참여

CalVis는 오픈소스 프로젝트이며 이 프로젝트의 소스 코드는 Google Code 프로젝트 호스팅에서 Subversion을 통해 다운로드할 수 있습니다.

자료