CalVis: Google Calendar용 맞춤 AJAX UI 만들기

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

참고 - 이 프로젝트는 Google 직원이 시작한 오픈소스 프로젝트이며 공식적으로 지원되는 라이브러리가 아닙니다. 관심 있는 분들은 누구나 참여하여 의견을 제시하실 수 있습니다.

소개

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

이 도움말에서는 이 문제를 완화하기 위해 작성한 샘플 라이브러리를 보여드리겠습니다. Google Calendar 계정의 데이터를 표시하는 쉽고 맞춤설정 가능한 사용자 인터페이스 (UI)를 제공하는 것을 목표로 하는 오픈소스 프로젝트인 Calendar Visualization (CalVis)를 시작했습니다. CalVis는 Google Calendar Data API를 통해 Google Calendar 계정에서 직접 데이터를 가져옵니다. (편집자 참고: v3부터 Google 캘린더는 더 이상 Google 데이터 형식을 사용하지 않습니다.) 이 라이브러리는 Google Calendar와 통신하기 위해 내부적으로 Google Data JavaScript 클라이언트 라이브러리를 사용하며, 맞춤설정의 유연성을 극대화하도록 설계되었습니다.

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

CalVis 사용

다음 단계에 따라 개발에 CalVis를 사용할 수 있습니다.

1단계 - Calendar 시각화 라이브러리 로드

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

<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 Body
    실제 캘린더를 렌더링하는 HTML 구성요소입니다. 개별 날짜 셀을 지정하는 그리드
  • 이벤트 표시
    이벤트가 트리거될 때 이벤트 세부정보를 렌더링하는 HTML 구성요소입니다. 이 출시에서는 '클릭' 및 '마우스 오버' 이벤트 트리거만 지원됩니다.

기본 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단계 - JavaScript로 CalVis 초기화 및 구성

JavaScript를 사용하여 동작이나 모양을 맞춤설정할 수 있습니다. JavaScript에서 객체를 수정하려면 먼저 브라우저에서 객체를 로드해야 하므로 먼저 모든 종속 라이브러리가 CalVis 로더로 로드될 때까지 기다려야 합니다. 이는 calvis.ready() 메서드를 사용하여 실행됩니다. 이 메서드는 모든 라이브러리가 로드되고 CalVis를 사용할 준비가 되었을 때 호출될 콜백 메서드를 사용합니다. 

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

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

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');

이벤트 세부정보를 표시하려면 캘린더의 이벤트 목록이 '클릭' 또는 '마우스 오버' 이벤트로 트리거될 때 콜백이 호출되어 이벤트 세부정보를 표시하도록 콜백 메서드를 제공해야 합니다. 이벤트 디스플레이 콜백의 예 

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 Project Hosting에서 Subversion을 통해 다운로드할 수 있습니다.

리소스