C# Winforms 직접 만든 달력 (커스텀 달력)

Winforms 기본 도구에 있는 MonthCalendar나 DevExpress의 CalenarControl를 사용하기에는 요즘 트렌드에는 맞지 않는 UX가 있다. 만약 기간에 제한이 있다면 사용자는 한 번 클릭하면 앞 뒤로 가능한 날짜만 선택할 수 있게 하는 것이라던가 한번 클릭 후 다른 날을 클릭 하면 기간 선택이 되게 하는 기능이 기본적으로는 없기 때문이다.

숙박시설 예약이나 항공권 예약할 때 사용는 달력처럼 만들기 위해서 기존 것을 가지고 조금씩 수정하는게 나을 수도 있지만 수정하다보니 한도 끝도 없이 수정을 해야 할 판이어서 아예 직접 만들었다.

직접만든 것이니만큼 버그가 있을 수 있다. 이는 실사용에서 수정해나가면 될 것이다.

참고로 이 달력 코드에는 UserControl를 팝업하는 기능을 License LGPL 3에 따라 Łukasz Świątkowski 라는 사람이 제공한 코드를 그대로 라이브러리로 만들어서 참조하였다.

 

폼에는 버튼이 존재한다. 이 버튼 또한 직접 만든 달력과 상호 작용하는 커스텀 버튼이다.

 

커스텀 버튼을 클릭하면 직접 만든 달력이 팝업 된다.

해당 달력에는 마지막 날짜와 기본값 날짜를 동일하게 lastDateTime 하나로 사용했는데 상황에 따라 기본값 날짜와 마지막 날짜는 분리하는 코드를 추가하면 된다.

 

기본 상태에서는 기본값이 기본적으로 선택된 상태이므로 다른 날짜를 클릭하면 바로 기간 선택이 된 것이다.

 

선택 완료 버튼을 따로 두지 않아서, 두 번 클릭 시 선택완료 되는 기능 또한 만들어 두지 않았기 때문에 달력이 아닌 다른 곳을 클릭할 때 팝업이 닫히면서 버튼의 텍스트가 선택한 기간으로 변경된다.

 

그리고 이 예제에는 maxCount를 100으로 하여서 날짜를 한 번 클릭 하면  

 

앞 뒤 100미만, 100초과는 선택 불가 상태가 된다.

maxCount가 0일 때는 제한을 두지 않는다.

 

이제 막 만든 것이어서 수정할 부분도 버그도 있긴 한데 이것을 참고 해서 여러 윈폼 프로젝트에 활용하면 좋을 것 같다.

소스 코드는 깃허브에 올려뒀다.

https://github.com/yoosple/Winforms/tree/main/Calendar

GitHub - yoosple/Winforms

 

추가로 시간이 날 때, WPF나 Vue.js로도 만들어봐야겠다.