[Mendix] Calendar (DateRangePicker, ColorPicker)

Calendar기능을 사용해보고싶어서 찾아보다가 MarketPlace에 있는 것을 확인했다.

Calendar예시사진

 

캘린더에서 사용될 DomainModel이다. 캘린더 데이터의 타이틀, 색상, 시작날짜, 끝날짜 이렇게만 생성해주면 모델도 끝났다. 이제는 연동을 해주면된다.

 

연동에 필요한 페이지는 Model을 통해서 Generate Overview를 해주었다. New와 View를 나눠주었는데 이유는 한페이지에서 만들기 때문에 같은 파라미터를 사용하는 것이아니라 New할때는 새로운 객체를 생성한것을 사용하고 Edit일때는 기존에 데이터를 사용하기때문에 나누었다.

본론으로 돌아와서 Home에서 Dataview에 Calendar을 넣어주고, 아까 생성한 Entity를 설정해준다.

이렇게 되면 기본적인 설정은 끝났고 new, edit의 nanoflow를 볼 차례다.

Edit은 파라미터를 받아서 Edit페이지를 보여주고, New는 Object Create를 해서 New페이지를 보여준다

 

기본적인 화면을 수정하는 페이지를 볼 수 있다. 추가적으로 rbg, date 부분의 입력을 좀더 자연스럽게 하기위해서 MarketPlace의 widget을 한번 사용해볼 것이다. 색상을 선택할 수 있는 ColorPicker, Date를 선택할 수 있는 DateRange Picker 이두개를 사용하겠다.

사용방법은 간단하다. 두개의 위젯을 끌어다가 사용할 위치에 아래처럼 놓고 데이터만 연결해주면 끝난다!

 

ColorPicker rgb값선택 과 DateRangePicker date값 선택

 

그리고 테스트를 해보면 잘되는 것을 확인해볼 수 있다.