[SwiftUI] UIKit 활용하여 달력 넣고 사용하기 (UICalendarView)

swift 를 활용하면서 좀 아쉬운 부분이 달력 아니던가?! 달력을 구현할 수 있지만 아주 간단하고 깔끔하게 달력을 만드는 방법이 iOS 16.0 버전 이후로 UICalendarView 를 지원한다. 😀 내가 만드는 프로젝트에도 달력이 들어가기 때문에 간단하게 활용해보면 좋겠다고 생각하여 UICalendarView 를 사용해보기로 했다.

UICalendarView | Apple Developer Documentation

 

UICalendarView 만들기

우선 내가 즐겨쓰는 UIViewRepresentable 부터 소개해보자면 SwiftUI 에서 UIKit 을 좀더 편하게 쓸수있게 만들어주는 고마운 프로토콜이라고 할 수 있겠다. UICalendarView 를 UIViewRepresentable 을 사용하여 SwiftUI 에서 사용해볼 것이다.

UIViewRepresentable | Apple Developer Documentation

 

1. UICalendarView 만들기

우선 아래처럼 struct 이름은 자유롭게 하고 UIViewRepresentable 을 입력해주면 아래와 같은 문구가 뜬다.

Fix 를 눌러본다면... 타입을 입력해달라는데 여기서 UICalendarView 를 입력해준다.

입력해준다면... 아래와 같이 어쩌구 어쩌구 나오면 Fix 를 다시한번 눌러주면....

아래와 같이 다해주는 멋진 Xcode 를 마주할 수 있다. 오류문구가 뜨는 이유는 아래와 같이 makeUIView, updateUIView 는 무조건 있어야 하기 때문에 오류가 뜬 것이다. 이제 typealias 는 빼줘도 된다.

 

그리고 아래의 코드를 완성시켜주면 된다.

import SwiftUI

struct UICalendar: UIViewRepresentable {
    let interval: DateInterval
    
    func makeUIView(context: Context) -> UICalendarView {
        let view = UICalendarView()
        view.calendar = Calendar(identifier: .gregorian)
        view.availableDateRange = interval
        return view
    }
    
    func updateUIView(_ uiView: UICalendarView, context: Context) {
        
    }
}

 

 

2. SwiftUI 에 넣기

이제 만든 UICalendar 라는 친구를 사용해보자. 아래와 같이 그냥 interval 을 맞춰서 넣어주면 된다. 나는 달력이 오늘까지만 표시되길 원했기 때문에 아래와 같이 입력했다.

import SwiftUI

struct CalendarView: View {
    var body: some View {
        UICalendar(interval: DateInterval(start: .distantPast, end: .now))
    }
}

#Preview {
    CalendarView()
}

 

그렇게 된다면 아래와 같이 멋진 달력이 나온것을 확인할 수 있다. 아직 아무런 기능은 없지만 아주아주 인터렉션도 깔끔하고 멋진 달력을 넣을 수 있게 되었다.