Toast UI Calendar 를 사용하면서, 부딪히는 부분들이 있어 정리하기로 했다.
1. 다른 부분을 기본값이 잘 되어있어 별다른 설정 없이 사용했지만, 일정을 내가 원하는 정보만 볼 수 있도록 하는 필터링 기능이 예상과 달랐다.
Calendar option 객체에는 eventFilter 가 있다.
| https://github.com/nhn/tui.calendar/blob/react-calendar%402.1.3/docs/ko/apis/options.md#eventfilter | (event) => !!event.isVisible | 캘린더 전체의 이벤트 필터링 조건 |
|---|
eventFilter
- 타입:
(event: EventObject) => boolean - 기본값:
(event) => !!event.isVisible
캘린더의 일정 필터링 조건을 지정한다. 기본값은 (event) => !!event.isVisible로 일정의 isVisible 속성이 true인 일정만 렌더링한다.
커스텀 이벤트 필터를 적용할 때 isVisible을 필터링하지 않을 경우 isVisible: false인 이벤트가 캘린더에 나타날 수 있다.
const calendar = new Calendar('#container', {
eventFilter: (event) => event.isVisible && event.isAllday,
});위처럼 문서에 나와있어서 한번 적용해 봤으나, 예상처럼 되지 않았다.
eventFilter 내부에 조건을 걸어봤는데 조건이 왜 적용이 안될까? 해서 렌더링 문젠가 싶어 처음부터 바로 필터되게 했더니 결과가 나왔다. 예상과는 다르게 eventFilter 는 첫 렌더링 시에만 적용되는 듯 했다.
일정 이벤트 발생 시 마다 Calendar 를 렌더링 시켜주기위해 정보를 찾다가 인스턴스 메서드에서 사용할 만한 것을 찾았다.
Calendar 인스턴스 메서드에는 setCalendarVisibility 가 있다.
| https://github.com/nhn/tui.calendar/blob/main/docs/ko/apis/calendar.md#setcalendarvisibility | 지정된 이벤트 그룹에 포함되는 모든 이벤트를 숨기거나 표시한다. |
|---|
setCalendarVisibility
- 타입:
setCalendarVisibility(calendarId: string | string[], isVisible: boolean): void - 파라미터
calendarId- 보이기/숨기기를 적용할 캘린더의 고유 아이디. 한 개 혹은 배열로 여러 개를 전달할 수 있다.isVisible- 해당 캘린더에 속한 모든 이벤트를 보이거나 숨기기 위한 값.true이면 모두 보이게 하고,false이면 모두 보이지 않게 한다.
특정 캘린더에 포함된 모든 이벤트를 보이게 하거나 숨긴다.
위의 문서 내용대로 적용해보기로 했다.
eventFilter 대신 setCalendarVisibility 를 이용했고, 필터링에 사용할 selector 의 handle 함수 내부에서 선택한 값이 바뀔 때마다 setCalendarVisibility 가 적용되도록 했다.
2. popup 창을 활성화 했을 때, 일정을 클릭하면 popup 창이 내 예상과는 다른 곳에 나타났다.
https://ui.toast.com/tui-calendar 에서 확인을 해보면 popup 창이 올바르게 활성화되지만, 직접 작업을 했을 때는 전혀 다른곳에 나타나거나, 보이지 않았다.
개발자도구로 확인했을 때 left, top 이 px 단위로 들어가 있었고 그 부분을 수정하니 움직이긴 했으나 이렇게 접근하면 안될 것 같았다.
혹시나 내가 잘못 적용한게 있을까 싶어서 예제코드라던지, 구글에서 다른 작업물들을 찾아봤지만 모두 별다를게 없었다.
심지어 popup 위치 관련해서는 기본값으로만 그대로 사용하는 듯했다.
그런데 좀 더 살펴보니 그 예제들은 하나같이 1.x 버전이었고, 2.x 버전은 예제가 많이 없었다.
github repo 에 issue 탭에서 찾아보니 나와 비슷한 질문을 한 사람이 있었고, 결론은 '지금은 안된다' 였다.
답변을 정리하자면 아래와 같다.
팝업의 위치는 컨테이너가 아닌 뷰포트 크기로 계산된다.
팝업은 절대 위치를 사용하지만 그 위에 상대 컨테이너가 없다.
현재로선 직접 팝업의 위치를 계산해서 생성하는게 최선이다.그래서 popup 관련 이슈는 잠시 덮어두고 모두 비활성화 시킨 뒤,
- 팝업을 직접만들고 인스턴스 메서드로 팝업창을 연동
- 아예 새로 만들고 다른 이벤트로 연동
을 고려해야겠다고 결론지었다.
