라이프팟 OpenAPI - UI 문서^#

라이프팟(Lifepod)을 모듈로 서비스를 개발하는 데에 도움을 드리기 위해 만들어진 문서입니다.

http://www.lifepod.co.kr/

1. 개요^#

라이프팟 UI API는 캘린더 UI를 제공합니다.
JavaScript로 작성되어 있으며 XHTML 문서에서 사용할 수 있습니다. (추후 HTML 표준과도 호환됩니다.)
지원되는 웹브라우저
- MS Internet Explorer 6/7
- Mozilla Firefox 2/3
- Apple Safari 2/3

UI API 프로그램 파일(http://www.lifepod.co.kr/api/calendar.js)을 문서에 삽입해야 사용할 수 있습니다.
다양한 이벤트 콜백을 이용하여 외부 프로그램을 다양하게 연동할 수 있습니다.

2. 이용약관^#

요약
- 캘린더를 표시해주는 용도로 사용할 수 있습니다. 데이터는 포함하지 않습니다. 데이터는 OpenAPI - Data 를 사용하세요.
- UI API를 이용하거나 UI API 프로그램 파일의 호출 횟수나 트래픽의 제한은 없습니다. 단 잘못된 용도 또는 방법으로 다른 사용자에게 피해를 주는 경우 통보없이 이용에 제한이 가해질 수 있습니다.
- 상업적인 용도로 활용할 수 있습니다.
- UI API의 프로그램 파일을 임의로 복사하거나 배포, 역분해 할 수 없습니다.

3. UI API 의 종류^#

3-1. 캘린더^#

캘린더를 API 형태로 제공합니다.
라이프팟의 캘린더 서비스(http://www.lifepod.co.kr/calendar/)와 동일한 UI를 제공합니다.

3-2. 캘린더 미니^#

위젯 형태의 작은 크기의 캘린더를 API 형태로 제공합니다.
예제: http://www.lifepod.co.kr/api/test/mini.htm

3-3. 캘린더 나노^#

배너 형태의 작은 크기의 캘린더를 API 형태로 제공합니다.
예제: http://www.lifepod.co.kr/api/test/nano.htm

4. Calendar^#

4-1. Constructor^#

Calendar(container_id [, view, date, options])
새로운 캘린더를 생성합니다.
- container_id (String) : 캘린더가 표시될 HTML 엘리먼트의 ID
- view (String) : 기본으로 표시할 형태
  1. day: 일
  2. 4day: 4일
  3. week: 주(그리드 뷰)
  4. 1week: 주
  5. 2week: 2주
  6. month: 월
- date (String) : 기본으로 표시할 날짜(2007-01-01)
- options (Object) : 추가 옵션
  - noGrid (Boolean): 그리드 뷰(일, 4일, 주)를 사용하지 않을때 설정하면 속도 향상이 있음

4-2. Method^#

메쏘드 이름	설명	인자	사용 가능한 API
attachEvent(event, callback)	이벤트(아래에서 설명) 발생시 동작할 콜백 함수를 등록한다.	이벤트 타입과 함수 event: String (이벤트의 목록은 아래 이벤트 목록 참조) callback: Function	Calendar CalendarMini CalendarNano
dettachEvent(event)	이벤트 발생시 동작할 콜백 함수를 제거한다.	이벤트 타입 event: String (이벤트의 목록은 아래 이벤트 목록 참조)	Calendar CalendarMini CalendarNano
moveToday()	오늘 날짜로 이동한다.	없음	Calendar CalendarMini CalendarNano
draw()	캘린더를 (다시) 그린다. 최초에 캘린더 인스턴스가 생성되면 draw가 호출되어야 캘린더가 그려진다. 그 후에 기간의 이동, 뷰의 변경이 있을 때 내부적으로 호출되며 draw 메쏘드 종료시에 drawFinish 이벤트가 동작한다	없음	Calendar CalendarMini CalendarNano
addEntry(entry)	일정 엔트리를 추가한다. 일정 엔트리는 new Calendar.Entry(...) 을 통해 인스턴스를 생성할 수 있다.	일정 엔트리 entry: Calendar.Entry 인스턴스	Calendar CalendarMini CalendarNano
addEntries(entry)	일정 엔트리들을 추가한다. 일정 엔트리는 new Calendar.Entry(...) 을 통해 인스턴스를 생성할 수 있다.	일정 엔트리 배열 entry: [Calendar.Entry 인스턴스, ...]	Calendar CalendarMini CalendarNano
go(year, month, date)	기간을 이동한다.	연, 월, 일 year: Integer month: Integer date: Integer	Calendar CalendarMini CalendarNano
movePrev()	이전 기간으로 이동한다. 이동할 기간은 현재의 뷰(일, 4일, 주, 2주, 월)에 따라 다르다	없음	Calendar CalendarMini CalendarNano
moveNext()	다음 기간으로 이동한다. 이동할 기간은 현재의 뷰(일, 4일, 주, 2주, 월)에 따라 다르다	없음	Calendar CalendarMini CalendarNano
addControl(obj)	콘트롤을 추가한다. 기본으로 포함되는 콘트롤을 2가지이다. Calendar.Control.View: 보기 방식 변경 Calendar.Control.Move: 기간 이동	콘트롤 객체 인스턴스 obj: Calendar.Control.* 인스턴스	Calendar
setWorkingTime(start, end)	그리드 뷰(일, 4일, 주)에서 워킹 타임으로 표시할 시간을 설정한다.	시작과 끝 시간 (0부터 24) start: Integer end: Integer	Calendar
changeView(view)	보기 방식을 변경한다. 사용 가능한 보기 방식: day, 4day, week, 1week, 2week, month	보기 방식 view: String	Calendar
removeEntry(id)	표시중인 엔트리를 삭제한다. 삭제할 엔트리의 ID(엔트리 인스턴스를 생성할 때 첫번째 인자로 넘겼던 값)을 인자로 넘긴다.	삭제할 엔트리의 ID id: String	Calendar
removeEntryAll()	표시중인 모든 엔트리를 삭제한다. CalendarMini, CalendarNano의 경우 draw()가 호출되면 모든 엔트리가 사라진다.	없음	Calendar
alignEntry()	표시중인 엔트리를 재정렬 한다. 화면이 리사이즈 되거나 화면 표시가 비정상 적일때 호출하면 엔트리가 정렬된다.	없음	Calendar

4-3. Event^#

이벤트 이름	설명	전달받는 인자	사용 가능한 API
drawFinish	캘린더가 화면에 표시되거나 갱신될 때 발생함. 보통 이 이벤트에서 캘린더 인스턴스에 엔트리를 추가하게 됨. 엔트리를 추가하는 방법은 new Calendar.Entry(...) 로 생성 후 캘린더_인스턴스.addEntry(엔트리_인스턴스) 캘린더_인스턴스.addEntries(엔트리_인스턴스_배열) // 속도가 더 빠름 위의 두 메쏘드를 통해 캘린더에 표시할 수 있음	현재 표시중인 기간의 시작과 종료 시간을 인자로 받는다 start: Date end: Date	Calendar CalendarMini CalendarNano
entryOver	화면에 표시된 엔트리에 마우스가 오버되었을 때 발생 이 이벤트가 비어있으면 UI API의 기본 엔트리 뷰어가 표시됨	엔트리의 HTML 엘리먼트와 엔트리 인스턴스, 마우스 좌표 srcElement: DIV ELEMENT (화면에 표시중인 DIV 객체) entry: Calendar.Entry 인스턴스 X: 마우스의 X좌표 Y: 마우스의 Y좌표	Calendar
entryOut	화면에 표시된 엔트리에서 마우스가 롤 아웃 되었을 때 발생	entryOver와 동일한 인자가 전달됨	Calendar
entryClick	화면에 표시된 엔트리가 클릭되었을 때 발생	엔트리 인스턴스, 마우스 좌표 entry: Calendar.Entry 인스턴스 X: 마우스의 X좌표 Y: 마우스의 Y좌표	Calendar
entryMove	화면에 표시된 엔트리가 이동하거나 리사이즈 될 때 발생 드래그&드롭에 의해서 발생됨	엔트리 인스턴스, 시작과 종료 시간이 전달됨 entry: Calendar.Entry 인스턴스 start: Date end: Date	Calendar
entryMenu	화면에 표시된 엔트리를 마우스 우클릭 했을 때 발생	entryOver와 동일한 인자가 전달됨	Calendar
timeSelect	그리드 뷰(일, 4일, 주)에서 마우스 드래그로 시간이 선택되었을 때 발생	선택된 영역 시간의 처음과 종료 시간이 전달됨 start: Date end: Date	Calendar

5. CalendarMini, CalendarNano^#

5-1. Constructor^#

CalendarMini(container_id [, date, options])
CalendarNano(container_id [, date, options])
새로운 캘린더를 생성합니다.
- container_id (String) : 캘린더가 표시될 HTML 엘리먼트의 ID
- date (String) : 기본으로 표시할 날짜(2007-01-01)
- options (Object) : 추가 옵션
  - btnToday (Boolean) : 오늘로 이동 버튼 표시
  - btnMaximize (Boolean) : 크게 보기 버튼 표시

5-2. Method^#

메쏘드 이름	설명	인자	사용 가능한 API
attachEvent(event, callback)	이벤트(아래에서 설명) 발생시 동작할 콜백 함수를 등록한다.	이벤트 타입과 함수 event: String (이벤트의 목록은 아래 이벤트 목록 참조) callback: Function	Calendar CalendarMini CalendarNano
dettachEvent(event)	이벤트 발생시 동작할 콜백 함수를 제거한다.	이벤트 타입 event: String (이벤트의 목록은 아래 이벤트 목록 참조)	Calendar CalendarMini CalendarNano
moveToday()	오늘 날짜로 이동한다.	없음	Calendar CalendarMini CalendarNano
draw()	캘린더를 (다시) 그린다. 최초에 캘린더 인스턴스가 생성되면 draw가 호출되어야 캘린더가 그려진다. 그 후에 기간의 이동, 뷰의 변경이 있을 때 내부적으로 호출되며 draw 메쏘드 종료시에 drawFinish 이벤트가 동작한다	없음	Calendar CalendarMini CalendarNano
addEntry(entry)	일정 엔트리를 추가한다. 일정 엔트리는 new Calendar.Entry(...) 을 통해 인스턴스를 생성할 수 있다.	일정 엔트리 entry: Calendar.Entry 인스턴스	Calendar CalendarMini CalendarNano
addEntries(entry)	일정 엔트리들을 추가한다. 일정 엔트리는 new Calendar.Entry(...) 을 통해 인스턴스를 생성할 수 있다.	일정 엔트리 배열 entry: [Calendar.Entry 인스턴스, ...]	Calendar CalendarMini CalendarNano
go(year, month, date)	기간을 이동한다.	연, 월, 일 year: Integer month: Integer date: Integer	Calendar CalendarMini CalendarNano
movePrev()	이전 기간으로 이동한다. 이동할 기간은 현재의 뷰(일, 4일, 주, 2주, 월)에 따라 다르다	없음	Calendar CalendarMini CalendarNano
moveNext()	다음 기간으로 이동한다. 이동할 기간은 현재의 뷰(일, 4일, 주, 2주, 월)에 따라 다르다	없음	Calendar CalendarMini CalendarNano

5-3. Event^#

이벤트 이름

설명

전달받는 인자

사용 가능한 API

drawFinish

캘린더가 화면에 표시되거나 갱신될 때 발생함.

보통 이 이벤트에서 캘린더 인스턴스에 엔트리를 추가하게 됨.

엔트리를 추가하는 방법은 new Calendar.Entry(...) 로 생성 후

캘린더_인스턴스.addEntry(엔트리_인스턴스)

캘린더_인스턴스.addEntries(엔트리_인스턴스_배열) // 속도가 더 빠름

위의 두 메쏘드를 통해 캘린더에 표시할 수 있음

현재 표시중인 기간의 시작과 종료 시간을 인자로 받는다

start: Date

end: Date

Calendar

CalendarMini

CalendarNano

6. Calendar.Entry^#

6-1. Constructor^#

Calendar.Entry(id, category, start, end, type, subject, ...)
아래의 인자를 인스턴스 생성 시 넘길 수 있다. 굵은 글자는 꼭 넘겨야 하는 항목임.

Property	타입	설명
id	String	엔트리의 고유 ID
category	String	엔트리의 범주. 큰 의미가 있는 것은 아니고 엔트리 미리보기 시 제목의 위에 표시됨
start	Date	시작 시간. 문자열을 Date로 쉽게 만들기 위해서는 Calendar.str2date(문자열)을 이용
end	Date	종료 시간. 문자열을 Date로 쉽게 만들기 위해서는 Calendar.str2date(문자열)을 이용
type	String	종류(daylong: 종일일정, anniversary: 기념일, schedule: 일정)
subject	String	제목
description	String	내용
color	String	글자색(종일일정, 기념일의 경우 반전된다)
bg	String	배경색(종일일정, 기념일의 경우 반전된다)
icon	String	아이콘
allowTag	Boolean	제목에 태그를 허용할 것인지
userData	Any	사용자가 담을 수 있는 공간

사용 가능하지만 생성 시 인자로 설정할 수 없는 프로퍼티

Property	타입	설명
movable	Boolean	true로 설정될 경우 캘린더 UI 위에서 마우스로 드래그 할 수 있다. mini, nano API에서는 제외

7. 이용 방법^#

7-1. 예제^#

UI 프로그램 파일의 URL은 http://www.lifepod.co.kr/api/calendar.js 입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mashup test</title>
<script type="text/javascript" src="http://www.lifepod.co.kr/api/calendar.js"></script>
<script type="text/javascript">
var _calendar;
window.onload=function() {
   //초기화
   //Calendar.Language='en'; //영어버전
   //객체를 생성, 인자는 캘린더로 변할 DIV의 ID
   _calendar=new Calendar('div_calendar');
   //콘트롤 추가(보기 방식, 기간 이동)
   _calendar.addControl(new Calendar.Control.View);
   _calendar.addControl(new Calendar.Control.Move);
   //이벤트 추가
   _calendar.attachEvent('drawFinish', entryDraw); //캘린더가 그려지면 호출할 함수, 주로 엔트리 추가시 사용된다
   _calendar.attachEvent('entryMove', entryMove); // 엔트리를 이동할 때 호출할 함수
   //그리기
   _calendar.draw();
}
function entryDraw(start, end) {
   var entry=new Calendar.Entry(
      1,                                              //ID
      'Test',                                         //category
      Calendar.str2date('2007-06-19 19:00:00'),       //start
      Calendar.str2date('2007-06-19 22:00:00'),       //end
      'schedule',                                     //type
      'Seminar',                                      //subject
      'K-mobile',                                     //description
      'red'                                           //color
   );
   //엔트리가 이동 가능하다
   entry.movable=true;
   //생성한 엔트리를 추가
   _calendar.addEntry(entry);
//간단하게 엔트리를 추가
_calendar.addEntry(new Calendar.Entry(
1, //ID
'Test', //category
Calendar.str2date('2007-06-19 19:00:00'), //start
Calendar.str2date('2007-06-19 22:00:00'), //end
'all day', //type
'Seminar', //subject
'K-mobile', //description
'red' //color
));
}
function entryMove() {
//true를 리턴하면 엔트리가 이동이 됨, false를 리턴하면 엔트리 이동이 취소됨
return true;
}
</script>
</head>
<body>

<div id="div_calendar" style="width:600px;height:400px;">
</div>
</body>
</html>

7-2. Util^#

라이브러리처럼 사용 가능한 유틸 목록

메쏘드 이름	설명	인자
Calendar.getElement(id)	프로토타입의 $() 와 같은 역할, document.getElementById의 alias	찾을 HTML 엘리먼트의 ID id: String
Calendar.addEvent(element, event, callback)	HTML 엘리먼트에 이벤트 걸기	HTML 엘리먼트, 이벤트 종류, 콜백 함수 element: HTML Element event: String 앞에 on 을 붙이지 않는다. 예: onload(X), load(O) callback: Function
Calendar.removeEvent(element, event, callback)	HTML 엘리먼트에 걸려있는 이벤트 제거	Calendar.addEvent 와 동일
Calendar.eventCancel(e)	이벤트 취소	이벤트 객체 e: Event
Calendar.setCookie(name, value[, expires, path, domain)	쿠키를 생성한다.	쿠키 이름, 값, expire, 경로, 도메인 name: String (필수) value: String (필수) expires: Date path: String domain: String
Calendar.intervalToDate(interval)	쿠키를 생성하기 위해 사용되는 interval 문자열을 Date타입으로 바꿔줌 사용 가능한 형식: "3 years", "5 days" 등	interval: String
Calendar.getCookie(name[, alt])	쿠키를 가져온다.	가져올 쿠키의 이름과 없을 시의 대체값 name: String alt: Any
Calendar.deleteCookie(name[, path, domain])	쿠키를 삭제한다.	삭제할 쿠키의 이름과 경로, 도메인 name: String (필수) path: String domain: String
Calendar.innerText(element[, text])	HTML 엘리먼트의 텍스트 내용을 가져오거나 변경한다. text가 전달되지 않을 경우 해당 엘리먼트의 innerText를 가져온다. 예) Calendar.innerText(div, 'Test'); // div 의 내용을 Test 로 변경 var tmp=Calendar.innerText(div); // tmp 의 값은 Test	HTML 엘리먼트와 설정할 값 element: HTML Element (필수) text: String
Calendar.number(str)	인자를 숫자로 변형한다. 변형하지 못하거나 에러 발생 시 0을 리턴한다.	문자열 str: String
Calendar.Date(date)	Date 타입을 복제한다. Date 타입의 경우 객체이기 때문에 함수를 통해 전달할 경우 원 값이 변할 수 있다. 새로운 Date 타입을 만들고 내용을 복사한다.	복사할 Date date: Date
Calendar.str2date(str)	문자열로 된 시간을 Date 타입으로 바꾼다. 변환 가능한 형식 YYYY-MM-DD HH:II:SS YYYY/MM/DD H:I:S YYYYMMDDTHHIISSZ	시간 문자열 str: String
Calendar.printTime(hour, min)	시간을 출력한다. 시와 분을 넘기면 "오전 12:00" 형식으로 바꿔준다.	hour: Int min: Int
Calendar.eventSrc(e)	이벤트가 발생한 엘리먼트를 리턴한다.	e: Event (이벤트)

OpenAPI - UI

라이프팟 OpenAPI - UI 문서#

1. 개요#

2. 이용약관#

3. UI API 의 종류#

3-1. 캘린더#

3-2. 캘린더 미니#

3-3. 캘린더 나노#

4. Calendar#

4-1. Constructor#

4-2. Method#

4-3. Event#

5. CalendarMini, CalendarNano#

5-1. Constructor#

5-2. Method#

5-3. Event#

6. Calendar.Entry#

6-1. Constructor#

7. 이용 방법#

7-1. 예제#

7-2. Util#