[SwiftUI] 커스텀 달력 만들기

커스텀 달력

내가 직접 만든 달력! 기존의 DatePicker 나 UICalendarView 는 제약되어 있는게 너무 많아서 하나하나 커스텀 하기 위해서 직접 달력을 만들었다.

 

넣은 기능

• TabView 로 만들어 page 형태로 드래그가 가능하다.
• 우측 상단의 < > 버튼을 통해서도 자연스럽게 이동이 가능하다.
• 오늘 버튼을 누르게 되면 이번달로 이동하면서 오늘이 선택된다.
• 날짜 선택이 가능하고 다시 선택하면 날짜 선택이 해제된다.
• 날짜마다 아래쪽에 내가 원하는 View를 넣을 수 있다.
• Frame 이 일정하다. 어느 달로 가더라도 4주, 5주를 계산하여 높이가 320 으로 일정하다.

코드

CalendarView, Date+Extension 두가지 파일로 구성했다. CalendarView 의 경우 172줄로 좀 긴 감이 있지만... 찢어놓는게 더 이해하기 힘들것 같아서 우선 붙여두었다.

CalendarView

생각보다 TabView 쪽이 까다로워서 좀 애를 먹었는데, 0, 1, 2 페이지가 있고 0 페이지로 간다면 0 페이지의 앞의 달을 생성해주고 2 페이지에 해당하는 달을 months 배열에서 빼준다. 그렇게 되면 이전달로 계속 스크롤이 가능해진다!

import SwiftUI

struct CalendarView: View {
    @State private var selectedDate: Date?
    @State private var months: [[Month]] = [[],[],[]]
    @State private var selection = 1
    
    private let dayOfWeek: [String] = ["일", "월", "화", "수", "목", "금", "토"]
    private let columns = Array(repeating: GridItem(.flexible()), count: 7)
    private let calendarHeight: CGFloat = 320
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    CalendarHeader()
                    CalendarBody()
                }
            }
            .onAppear {
                fetchMonths()
            }
            .navigationTitle("달력")
        }
    }
    
    @ViewBuilder
    private func CalendarHeader() -> some View {
        HStack(spacing: 16) {
            VStack(alignment: .leading) {
                if let date = months[1].first?.date {
                    Text(date.format("YYYY"))
                        .font(.footnote)
                        .fontWeight(.semibold)
                    Text(date.format("MMMM"))
                        .font(.title.bold())
                }
            }
            
            Spacer()
            
            Button("오늘") {
                fetchMonths()
                selectedDate = Date()
            }
            .font(.callout)
            .buttonStyle(.bordered)
            
            Button {
                selectedDate = nil
                withAnimation {
                    selection = 0
                }
            } label: {
                Image(systemName: "chevron.left")
                    .font(.title2)
            }
            
            Button {
                selectedDate = nil
                withAnimation {
                    selection = 2
                }
            } label: {
                Image(systemName: "chevron.right")
                    .font(.title2)
            }
        }
        .padding()
        
        HStack(spacing: 0) {
            ForEach(dayOfWeek, id: \.self) { day in
                Text(day)
                    .font(.callout)
                    .fontWeight(.semibold)
                    .frame(maxWidth: .infinity)
            }
        }
        .padding(.horizontal, -5)
    }
    
    @ViewBuilder
    private func CalendarBody() -> some View {
        TabView(selection: $selection) {
            ForEach(months.indices, id: \.self) { index in
                let month = months[index]
                DateGrid(month)
                    .tag(index)
                    .onDisappear {
                        paginateMonth()
                    }
                    .onAppear {
                        selection = 0
                        selection = 1
                    }
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .frame(height: calendarHeight)
    }
    
    @ViewBuilder
    private func DateGrid(_ month: [Month]) -> some View {
        LazyVGrid(columns: columns, spacing: 0) {
            ForEach(month) { value in
                DateCell(value: value)
                    .onTapGesture {
                        if selectedDate == value.date {
                            selectedDate = nil
                        } else {
                            selectedDate = value.date
                        }
                    }
            }
        }
    }
    
    @ViewBuilder
    private func DateCell(value: Month) -> some View {
        VStack(spacing: 0) {
            if value.day != -1 {
                VStack {
                    Text("\(value.day)")
                        .fontWeight(value.date.isToday ? .bold : .semibold)
                        .foregroundStyle(value.date.isToday ? .blue : .gray.opacity(0.8))
                    Circle()
                        .foregroundStyle(.clear)
                }
                .background {
                    if let selectedDate {
                        Capsule()
                            .foregroundStyle(.blue.opacity(0.2))
                            .opacity(value.date.isSameDay(selectedDate) ? 1 : 0)
                            .frame(width: 36)
                            .padding(.vertical, value.date.numberOfWeeks == 6 ? 1 : 2)
                            .offset(y: -2)
                    }
                }
            }
        }
        .frame(height: calendarHeight/value.date.numberOfWeeks, alignment: .top)
    }
    
        private func fetchMonths() {
        months[0] = Date().createPreviousMonth()
        months[1] = Date().createMonth()
        months[2] = Date().createNextMonth()
    }
    
    private func paginateMonth() {
        guard let date = months[selection].first?.date else { return }
        if selection == 0 {
            selectedDate = nil
            months.insert(date.createPreviousMonth(), at: 0)
            months.removeLast()
            selection = 1
        }
        
        if selection == 2 {
            selectedDate = nil
            months.append(date.createNextMonth())
            months.removeFirst()
            selection = 1
        }
    }
}

struct Month: Identifiable {
    var id = UUID().uuidString
    var day: Int
    var date: Date
}

Date+Extension

간단하게 사용하기 위해서 Extension 을 활용하였다. createMonth() 가 여기서의 메인 함수라고 볼 수 있는데, 날짜를 받아서 그 날짜에 해당되는 달의 날을 반환해주는 함수이다.

import SwiftUI

extension Date {
    func format(_ format: String) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = format
        
        return formatter.string(from: self)
    }
    
    func isSameDay(_ date: Date) -> Bool {
        Calendar.current.isDate(self, inSameDayAs: date)
    }
    
    var isToday: Bool {
        Calendar.current.isDateInToday(self)
    }
    
    var startOfDay: Date {
        Calendar.current.startOfDay(for: self)
    }
    
    var startOfMonth: Date {
        let calendar = Calendar.current
        
        return calendar.date(from: calendar.dateComponents([.year, .month], from: self)) ?? Date()
    }
    
    var numberOfWeeks: CGFloat {
        guard let range = Calendar.current.range(of: .weekOfMonth, in: .month, for: self) else { return 0 }
        
        return CGFloat(range.count)
    }
    
    func createMonth(_ date: Date = Date()) -> [Month] {
        let calendar = Calendar.current
        
        guard let startDate = calendar.date(from: calendar.dateComponents([.year, .month], from: date)) else { return [] }
        
        guard let range = calendar.range(of: .day, in: .month, for: startDate) else { return [] }
        
        var days = range.compactMap { day -> Month in
            let date = calendar.date(byAdding: .day, value: day - 1, to: startDate)!
            return Month(day: calendar.component(.day, from: date), date: date)
        }
        
        let firstWeekday = calendar.component(.weekday, from: days.first?.date ?? Date())
        
        for _ in 0..<(firstWeekday - calendar.firstWeekday) {
            days.insert(Month(day: -1, date: date), at: 0)
        }
        
        return days
    }
    
    func createPreviousMonth() -> [Month] {
        let calendar = Calendar.current
        let startOfMonth = calendar.date(from: calendar.dateComponents([.year, .month], from: self)) ?? Date()
        guard let startDate = calendar.date(byAdding: .month, value: -1, to: startOfMonth) else { return [] }
        
        return createMonth(startDate)
    }
    
    func createNextMonth() -> [Month] {
        let calendar = Calendar.current
        let startOfMonth = calendar.date(from: calendar.dateComponents([.year, .month], from: self)) ?? Date()
        guard let startDate = calendar.date(byAdding: .month, value: +1, to: startOfMonth) else { return [] }
        
        return createMonth(startDate)
    }
}