TimeTable

타임라인순서로 예약하는 기능이 필요하다면 TimeTable을 사용할 수 있습니다.

컨트롤 설명

CalendarNavigator 와 함께 사용할 수 있는 시간표 형태의 컨트롤 입니다.

디자인(Design) 모드

영역별 디자인 설정

1. 기간(년,월,주)

기간(년, 월, 주) 영역의 디자인을 설정할 수 있습니다.

2. 날짜 배경 영역

날짜 배경 영역에 높이, 배경색, 패딩을 설정 할 수 있습니다.

3. 날짜 아이템 영역

날짜 아이템 영역에 높이, 텍스트, 배경, 보더, 패딩을 설정 할 수 있으며 설정 내용이 모든 날짜 아이템에 반영됩니다.

4. 선택한 날짜 아이템

선택한 날짜 아이템의 텍스트, 배경, 보더를 설정 할 수 있습니다.

5. 카테고리 영역

날짜 아래에 영역을 카테고리 영역이라고 합니다. 카테고리 영역에서는 텍스트 디자인을 설정 할 수 있습니다.

공통 디자인 속성

개발(Dev) 모드

캘린더 네비게이터 사용하기

버튼을 활성화 하면 캘린더 네비게이터 기능을 사용하고 속성을 설정할 수 있습니다. CalendarNavigator 페이지를 참고 해주세요.

타임테이블 시간 범위 설정

타임테이블의 시간시간과 종료시간 타임라인 간격을 설정할 수 있습니다. 기본 값은 8시부터 19시까지 30분 간격으로 설정되어 있습니다. 타임라인 시간 간격은 5분, 10분, 15분, 30분, 1시간 간격으로 설정할 수 있습니다.

예약 항목

타임테이블 시간 범위 설정 에 보여지는 항목들 입니다. 항목을 만들기 위해서는 데이터소스를 생성해서 연결을 해주어야합니다.

  • 데이터소스 명 예약 항목으로 사용할 데이터로 구성된 데이터소스명을 연결합니다.

  • 항목명 키 표시될 예약 항목 이름으로 사용할 데이터를 연결합니다. 위의 예시를 보면 항목명 키는 MRName입니다. 디버거 실행후 화면에 MRName의 데이터들이 조회된 것을 확인할 수 있습니다.

  • 항목데이터 키 데이터소스의 유니크한 키값을 입력합니다. MeetingRoom_DS 에서 데이터를 구분할 수 있는 값인 MRSeq로 연결하였습니다.

  • 항목정렬 기준 키 카테고리 정렬에 사용할 데이터소스 키 값을 입력합니다.

이벤트 데이터

타임테이블에 등록된 이벤트를 표시하기 위해 데이터 소스를 설정합니다.

선택된 시간 데이터 저장

사용자가 지정한 이벤트의 시작과 종료시간을 저장할 컬렉션키를 설정합니다.

시작시간 - 종료시간 간격을 설정하면 이벤트를 선택할때 시작시간에 간격 값을 더한 시간이 종료시간이 됩니다.

설정하지 않으면 종료시간은 컬렉션-데이터소스 키 연결의 종료시간 값 입니다.

컬렉션-데이터소스 키 연결

  • 컬렉션 키 : 데이터소스 키의 value를 컬렉션에 저장할 때 사용할 키 명칭

  • 데이터소스 키 : 데이터소스를 통해 받아온 값 중 저장하고 싶은 키 명칭

조회된 이벤트아이템 키

이벤트를 조회했을 때 현재 사용자가 작성자인지 조회된 이벤트의 블럭색상으로 구분할 수 있습니다. 컬렉션-데이터소스에 설정한 데이터소스 키인 fBaseUserID를 현재 접속한 사용자의 정보를 알 수 있는 _base.User.fBaseUserID 값과 비교하는 예시 입니다. ( 대체 텍스트 사용하기 페이지를 참고해주세요)

사용자의 fBaseUserID 값은 디버거의 콘솔창에서 _base.User에서 확인할 수 있습니다. _base.User.fBaseUserID로 접근할 수 있습니다. 디버거 콘솔창에서 _base.User.fBaseUserID 값이 1이라는 것을 확인할 수 있습니다.

조회한 날짜의 회의실을 등록한 fBaseUserID 값이 1이라는 것을 확인 할 수 있습니다.

내가 속한 이벤트

이벤트에 참석자인지 체크하고 싶을 때 사용할 수 있습니다. 예들 들어 회의실 예약 시스템으로 사용중이라면 회의에 초대된 참석자인지 아닌지 확인 할 수 있습니다. 아래는 IsAttend의 값이 1이면 참석자로 체크하는 예시입니다.

클릭 이벤트 연결하기

데이터를 클릭했을 때 실행시키고 싶은 이벤트를 연결할 수 있습니다.

  • 조회 된 데이터 클릭 이벤트 연결하기 타임테이블에 조회된 데이터가 있을 때 이 데이터에 이벤트를 연결 시키고 싶을 때 사용할 수 있습니다. 클릭 시 스텝을 이동하는 기능도 함께 사용할 수 있습니다.

  • 추가 버튼 클릭 이벤트 연결하기 타임라인에 빈공간을 눌렀을 때 추가 버튼처럼 작동하여 이벤트를 연결 할 수 있습니다.

이벤트 유형별 색상 지정

특정 유형의 이벤트에서만 색상을 지정해 줄 수 있습니다. 이벤트 데이터 속성의 이벤트 종류 항목키에 특정 유형을 구분할 수 있는 키를 입력합니다. 이벤트 유형별 색상 지정에서는 이벤트 종류 항목키의 데이터 값을 입력해줍니다.

( 내가 속한 이벤트 를 보시면 조회된 데이터 중 "회의" 이벤트만 IsAttend 값이 1인 것을 확인할 수 있습니다.)

Last updated