[iOS] FSCalendar를 사용해보자.

 디자이너가 요청한 달력 디자인을 구현하려고 했다. 처음에는 iOS에서 기본으로 제공하는 달력을 사용하고자 했지만, 커스텀에 한계가 있어 직접 커스텀 캘린더 뷰를 구현해서 사용하고자 했다. 그러나 커스텀 캘린더 뷰를 구현하는 것이 생각보다 복잡했고, 구현하는 데 드는 코스트에 비해 리턴이 적다고 판단했다. 그래서 대안으로 FSCalendar를 사용하기로 결정했다.

 

FSCalendar

 FSCalendar는 강력하고 유연한 캘린더 컴포넌트로, iOS 개발에서 손쉽게 사용할 수 있도록 설계되었다. 다양한 커스터마이징 옵션을 제공해 개발자와 디자이너의 요구 사항을 충족할 수 있으며, 구현 시간과 노력을 크게 절감할 수 있다. 

 

📚 FSCalendar 주요 컴포넌트

1. FSCalendar

- calendar: FSCalendar의 인스턴스 자체입니다. 캘린더의 전반적인 속성과 동작을 제어합니다.

- dataSource: 캘린더의 데이터 소스 역할을 하는 객체로, FSCalendarDataSource 프로토콜을 준수합니다.

- delegate: 캘린더의 이벤트를 처리하는 객체로, FSCalendarDelegate 프로토콜을 준수합니다.

 

2. FSCalendarDataSource:

- minimumDate(for:): 캘린더에서 표시할 수 있는 최소 날짜를 반환합니다.

- maximumDate(for:): 캘린더에서 표시할 수 있는 최대 날짜를 반환합니다.

- calendar(_:numberOfEventsFor:): 특정 날짜에 표시할 이벤트의 개수를 반환합니다.

- calendar(_:appearance:titleFor:): 특정 날짜에 표시할 타이틀을 반환합니다.

 

3. FSCalendarDelegate:

- calendar(_:didSelect:): 날짜를 선택했을 때 호출됩니다.

- calendar(_:didDeselect:): 선택한 날짜를 해제했을 때 호출됩니다.

- calendar(_:boundingRectWillChange:animated:): 캘린더의 크기가 변경될 때 호출됩니다.

- calendarCurrentPageDidChange(_:): 현재 페이지가 변경되었을 때 호출됩니다.

 

4. FSCalendarAppearance:

- titleFont: 날짜 타이틀의 폰트를 설정합니다.

- titleDefaultColor: 기본 날짜 타이틀의 색상을 설정합니다.

- titleSelectionColor: 선택된 날짜 타이틀의 색상을 설정합니다.

- headerTitleFont: 헤더 타이틀의 폰트를 설정합니다.

- headerTitleColor: 헤더 타이틀의 색상을 설정합니다.

- weekdayTextColor: 요일 타이틀의 색상을 설정합니다.

- todayColor: 오늘 날짜의 배경 색상을 설정합니다.

- selectionColor: 선택된 날짜의 배경 색상을 설정합니다.

 

5. FSCalendarCell:

- titleLabel: 날짜 타이틀을 표시하는 UILabel입니다.

- subtitleLabel: 날짜 아래의 서브 타이틀을 표시하는 UILabel입니다.

- eventIndicator: 이벤트를 표시하는 뷰입니다.

- shapeLayer: 셀의 모양을 정의하는 CAShapeLayer입니다.

 

6. FSCalendarHeaderView:

- titleLabel: 헤더 타이틀을 표시하는 UILabel입니다.

- nextButton: 다음 페이지로 이동하는 버튼입니다.

- previousButton: 이전 페이지로 이동하는 버튼입니다.

 

7. FSCalendarWeekdayView:

- weekdayLabels: 요일 타이틀을 표시하는 UILabel 배열입니다.

 

8. FSCalendarDelegateAppearance:

- calendar(_:appearance:fillDefaultColorFor:): 기본 상태의 날짜 배경 색상을 반환합니다.

- calendar(_:appearance:fillSelectionColorFor:): 선택된 날짜의 배경 색상을 반환합니다.

- calendar(_:appearance:fillTodayColorFor:): 오늘 날짜의 배경 색상을 반환합니다.

- calendar(_:appearance:titleDefaultColorFor:): 기본 상태의 날짜 타이틀 색상을 반환합니다.

- calendar(_:appearance:titleSelectionColorFor:): 선택된 날짜 타이틀 색상을 반환합니다.

- calendar(_:appearance:titleTodayColorFor:): 오늘 날짜 타이틀 색상을 반환합니다.

 

적용하기

 아직 디자인이 확정되지 않아 최대한 간단하게 목업만 만들어 보았다. FSCalendar를 사용하여 커스텀 캘린더 뷰를 구현하는 과정은 전반적으로 수월했지만, 특정 기능을 구현하는 데는 어려움이 있었다. 현재 날짜 선택 여부나 날짜 선택 시 배경 색칠 등 간단한 기능들은 FSCalendar가 제공하는 기본 컴포넌트를 활용하여 쉽게 커스터마이징할 수 있었다.

 

 그러나, 범위 선택 기능을 구현하는 것은 상당히 도전적이었다. 이를 위해 FSCalendarCell을 커스터마이징하고, UIBezierPath와 CALayer를 사용하여 선택된 범위를 색칠하는 등의 작업을 해야 했다. 이러한 작업은 복잡하고 시간이 많이 소요되었다. 만약 FSCalendar가 없었다면, 커스텀 캘린더를 처음부터 직접 구현하는 일은 더욱 어려웠을 것이다.

 

 FSCalendar는 주간 달력, 월간 달력 등 다양한 달력 뷰를 지원하며, 이들을 쉽게 커스터마이징할 수 있다. 이러한 유연성과 강력함 덕분에 다른 기능들을 구현하는 것은 비교적 수월했다. FSCalendar는 정말 강력한 달력 라이브러리로, 사용자에게 맞춤형 달력 경험을 제공할 수 있도록 많은 기능을 지원한다.

 

 개발자라면 한 번쯤 FSCalendar를 사용해보길 추천한다. 이를 통해 얼마나 강력하고 유연한 라이브러리인지 직접 체험해볼 수 있을 것이다. FSCalendar 덕분에 복잡한 달력 기능을 보다 쉽게 구현할 수 있었고, 이 경험을 통해 많은 것을 배울 수 있었다.