웹 컴포넌트(lit element)로 캘린더 만들기

요새 회사에서는 lit Element를 이용한 웹 컴포넌트 기반 솔루션 개발이 한창이다.

기존 회사 제품의 샘플 화면을 클론 코딩하거나, 기존 제이쿼리 기반 위젯을 전환하거나

뭐 이러한 방향으로 나아가고 있다.

 

사실상 우리팀의 역할은 초기단계에서 딱히 없고 공부하라고 놔두는 느낌이 강하기 때문에

최대한 많은 것을 건드려보고 배우는 것이 현재 일이라 할 수 있다.

 

그런데 최근에

 

과거에 쓰던 캘린더는 도저히 새 제품에 넣을 퀄리티가 아니니 웹컴포넌트 기반으로 새로 만들라는 요청이 들어왔다.

 

퀄리티 있는 웹 컴포넌트를 만들어보고 싶은 욕심이 생겨 내가 만들어보기로 했다.

(이때는 이렇게 오래걸릴줄 몰랐다)

 

 

캘린더 컴포넌트의 기능 명세다.

 

기본적인 기능은 단순하다.

 

사용자가 컴포넌트에 2021-01-10을 전달하면 캘린더는 2021-01-10을 달력에 표시하는 것이다.

 

하지만 세부적인 기능을 파고들어가면 끝이없다.

1. 달력과 Input을 연결하여 변경될때마다 달력 또는 input을 변경할 수 있다.

2. 날짜 선택 또한 단일 날짜 선택, fromTo 날짜 선택이 가능하다.

3. 타이틀 위치에 년,월을 클릭하면년, 월을 이동할 수 있는 별개의 영역이 표시된다.

4. 용도에 따라 타이틀 영역을 input type으로 대체할 수 있다.

5. 타이틀 영역 좌우에 월 이동 버튼으로 +-1월씩 이동할 수 있다.

6. input button type으로 사용할 경우 input 우측에 버튼을 클릭하면 작은 크기의 dialog가 표시되도록 한다.

 

 

 

 

 

See the Pen YzNGpBJ by thekanon (@thekanon) on CodePen.

 

 

이것이 그 컴포넌트다.

 

현재 스케줄링 기능빼고 다 구현해놓은 것이다.

전체 샘플은 

 

codepen.io/thekanon/project/editor/ZMOkQY

ZMOkQY

 

 

여기서 확인할 수 있다.

 

 

별다른 추가 기능 없이 순수 자바스크립트 + lit element만으로 구현했다.