[iOS] About FSCalendar - 1

이번 게시물의 주인공은..!

 

바로 

FSCalendar입니다!

 

이 라이브러리를 사용하는 데 있어

제가 원하는 상황 먼저 소개해드리자면

 

 

 

많은 기능은 아니고

영상과 같이

 

1. 캘린더 날짜 클릭 시, 해당일에 저장된 ToDo 보여주기

2. ToDo에 지정된 날짜는 점으로 이벤트 표시하기

3. 좌우 Swipe : Month 넘기기

4. 상하 Swipe : 주간 달력, 월간달력 교체

5. 주간 달력, 월간 달력 교체 시, 테이블뷰 Layout 수정

 

이 정도 구현해보려고 합니다!! 

(참고로 2,4번이 제일 어려웠습니다;; 🤣)

 

★ 저는 MVVM 모델로 코드를 구성했기 때문에 VC와 viewModel을 왔다 갔다 할 예정입니다.

 

사실 라이브러리를 사용하는 것이기 때문에, 달력을 불러오고 클릭하는 기능은 너무 편리합니다.

 

import FSCalendar

  private lazy var calendarView = { 
        let calendar = FSCalendar()
        calendar.delegate = self
        calendar.dataSource = self
        calendar.scope = .month
        calendar.appearance.headerDateFormat = "YYYY년 MM월"
        return calendar
    }()

 

위와 같이 구성해 주면

FSCalendar

 

짠~ 쉽죠?

여기서 기능 몇 개만 추가해 주면 제법 쓸만한 친구가 될 것 같습니다.

+ 이렇게 불러온 순간.. 3번 해결이 됩니다 ㅎㅎ 쉽죠?

(물론 상하 스와이프로 월을 바꿔줄 수 있답니다.)

---

자 그럼 1번!!

코드부터 보여드리겠습니다.

In CalendarViewController	In CalendarViewModel

 

inputDate.bind 클로저 구문과 selectDate 메서드부터 확인해 보겠습니다.

 

A. 뷰모델이 init 되었을 때 inputDate.bind 클로저 구문이 실행됩니다.

- inputDate.value 값이 Date()로 초기화되어 있기 때문에 기본적으로는 오늘 날짜로 들어갑니다.

 

B. 이 값을 그대로 selectDate의 매개변수로 넣어주고

제가 따로 만들어둔 RealmRepository의  getToDoTable메서드에 넣어 실행시켜 줍니다.

 

- 각 날짜에 해당하는 ToDo 불러주는 메서드입니다.

- RealmRepository : RealmSwift에 저장, 수정 등을 실행시킬 메서드들을 모아놓았습니다.

 

 

C. 그날에 해당하는 ToDo를 데려오고 OuputSelectedDateList에 넣어줍니다.

그럼, OuputSelectedDateList가 바뀌고, VC의 bindData 메서드 안의

OuputSelectedDateList.bind 클로저가 실행되고

그에 따라 tableView에 ToDo 사항들이 입력되게 됩니다.

---

여기까지가 Calendar화면을 로드했을 때의 과정입니다.

처음부터 오늘날짜로 초기화시켰기 때문에, 오늘날짜에 표시가 되어있죠?

 

이제는 다른 날짜를 클릭해 봅시다!

클릭 날짜 date 값 전달

 

위와 같은 코드로 실행해 주면 위의 B, C 번 과정을 거쳐 해당일에 대한 ToDo 리스트를 보여준답니다!!

 

---

그럼 이제 첫 영상처럼 이벤트가 있을 경우, 달력에 표시를 하려고 합니다.

이 역시 캘린더 View가 로드될 때

 

init() {
	transform()
}

private func transform() {
    inputEventTrigger.bind { [weak self]_ in
                self?.getEvent()
     }
 }
            
 private func getEvent() {
   outputEventTrigger.value = repository.fetchRealmTable()
        
    if let event = outputEventTrigger.value,
           !event.isEmpty {
            outputDates.value = event.compactMap { $0.date }
        }
}

 

위의 코드가 실행됩니다.

> repository.fetchRealmTable() : Realm에 저장된 모든 요소 불러오는 메서드

 outputDates.value 에 event에 저장된 date를 넣어주는 코드가 주요 코드입니다.

 

이러면 등록해 놓은 날짜들만 outputDates.value에 들어가게 되겠죠??

 

이제 이 친구들을

이벤트 생성 코드

 

위의 코드로 구현해 주면 되는데, return 되는 정수는 이벤트의 개수를 뜻합니다.

여러 개여도 좋지만 달력에 표시할 때는,

1개일 때가 가장 깔끔하더라고요.

 

처음에는 viewModel에서 date를 받아올 때마다 DateFormatter를 사용하여 형식을 바꿔줬습니다.

그런데 날짜 비교에 대한 자료를 계속 찾아보다가 새로운 메서드,

isDate(_:inSameDayAs) 라는 메서드를 발견했습니다.

Apple 공식문서

 

 어려워 보이지만 어렵지 않습니다!

두 개의 날짜, date1과 date2를 같은 날짜인지 아닌지 비교해 주는 메서드입니다.

하나하나 데이터 변형하기 귀찮잖아요..?

결과는 True or False!

쉽죠?

 

그런데 잘 사용하지 않는 메서드인가 봐요.. 한글로 검색했을 때 잘 안나오고 영어로 검색하니 사용법이 좀 나오더군요

아마 결과값이 Bool값으로 나와 이용이 제한적이서 그런가봅니다.

 저도 날짜를 사용해야한다면 그냥 하나하나 변형해서 사용할겁니다 ㅎ

 

지금은 필요없으니까!

좀 더 정확한 내용은 아래 링크 들어가 보시면 나옵니다

https://developermemos.com/posts/checking-same-day-calendar-insamedayas

Checking for the Same Day using Calendar and inSameDayAs

 

 

 

아.. 아직 4, 5번이 남았지만 4번도 내용이 굉장히 많기에..

이후의 블로그에 꼭 내용 담아보도록 하겠습니다.!!

 

 

 

그럼

.

.

.