HorizonCalendar를 SwiftUI에서 사용해보자

이 글은 AirBnB에서 만든 HorizonCalendar를 SwiftUI에서 사용해보는 포스트입니다

*이 글에서 사용한 개발환경은 iOS 16.0 타겟, Xcode 15.0.1, 시뮬레이터 iPhone 15 Pro (iOS 17.0) 입니다

순서 정리

1. Swift Package Manager에 추가하기
2. UIViewRepresentable를 이용해서 UIView로 되어있는 캘린더를 SwiftUI View 만들기
3. 이 때 CalendarViewContent를 위의 뷰에 주입시켜줘야 함
4. CalendarViewContent는 선언형 방식으로 .~ItemProvider을 사용해서 커스텀이 가능

1. Swift Package Manager에 추가하기

2. UIViewRepresentable를 이용해서 UIView로 되어있는 캘린더를 SwiftUI View 만들기

import SwiftUI
import UIKit

import HorizonCalendar

struct HorizonCalendarView: UIViewRepresentable {
    typealias UIViewType = CalendarView
    
    private let initialContent: CalendarViewContent
    
    init(initialContent: CalendarViewContent) {
        self.initialContent = initialContent
    }
    
    func makeUIView(context: Context) -> HorizonCalendar.CalendarView {
        return CalendarView(initialContent: initialContent)
    }
    
    func updateUIView(_ uiView: HorizonCalendar.CalendarView, context: Context) {
        // 현재로서는 따로 필요하지 않아서 구현하지 않았음
    }
}

3. 이 때 CalendarViewContent를 위의 뷰에 주입시켜줘야 함

import SwiftUI

import HorizonCalendar

struct TestView: View {
    var body: some View {
        HorizonCalendarView(initialContent: makeContent())
    }
    
    func makeContent() -> CalendarViewContent {
        let startDate = Calendar.current.date(byAdding: .year, value: -2, to: Date())!
        let endDate = Calendar.current.date(byAdding: .year, value: 2, to: Date())!
        
        return CalendarViewContent(
            calendar: Calendar.current,
            visibleDateRange: startDate...endDate, // 캘린더에 보여줄 날짜 범위
            monthsLayout: .horizontal(options: .init()) // 또는 .vertical사용 가능
        )
    }
}

#Preview {
    TestView()
}

4. CalendarViewContent는 선언형 방식으로 .~ItemProvider을 사용해서 커스텀이 가능

.~ItemProvider는 아래와 같은 종류가 있음

ItemProvider의 클로저에 SwiftUI의 View를 return하면 되는데, 마지막에 꼭 calendarItemModel을 붙어주자!

func makeContent() -> CalendarViewContent {
    let startDate = Calendar.current.date(byAdding: .year, value: -2, to: Date())!
    let endDate = Calendar.current.date(byAdding: .year, value: 2, to: Date())!
    
    return CalendarViewContent(
        calendar: Calendar.current,
        visibleDateRange: startDate...endDate,
        monthsLayout: .horizontal(options: .init())
    )
    .dayItemProvider { day in
        Text("\(day.day)")
            .font(.system(size: 18))
            .foregroundColor(Color(UIColor.green))
            .calendarItemModel // 끝에 붙여주기
    }
    .monthHeaderItemProvider { month in
        Text("\(month.month)월")
            .padding()
            .background(.blue)
            .calendarItemModel // 끝에 붙여주기
    }
}

위 코드 실행사진

여기까지가 기본적인 뷰 생성, 추가 방법이다.