[swift] FSCalendar에서 주간/월간/연간 보기 전환 기능

15 Nov 2023

swift

FSCalendar는 iOS 앱에서 달력 기능을 쉽게 구현할 수 있는 오픈 소스 라이브러리입니다. 이 라이브러리를 사용하여 달력을 표시하고, 사용자가 주간, 월간, 연간 보기로 전환할 수 있는 기능을 구현해보겠습니다.

전환 버튼 추가하기

먼저, FSCalendar에 주간/월간/연간 전환을 위한 버튼을 추가해야 합니다. UIViewController나 UIView 클래스에서 작업을 수행할 수 있습니다. 아래는 버튼을 추가하는 예제 코드입니다.

class ViewController: UIViewController {
    private let calendarView = FSCalendar()
    private let weekButton = UIButton()
    private let monthButton = UIButton()
    private let yearButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 달력 뷰 설정
        calendarView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 300)
        view.addSubview(calendarView)
        
        // 주간 보기 버튼 설정
        weekButton.setTitle("주간", for: .normal)
        weekButton.addTarget(self, action: #selector(switchToWeekView), for: .touchUpInside)
        view.addSubview(weekButton)
        
        // 월간 보기 버튼 설정
        monthButton.setTitle("월간", for: .normal)
        monthButton.addTarget(self, action: #selector(switchToMonthView), for: .touchUpInside)
        view.addSubview(monthButton)
        
        // 연간 보기 버튼 설정
        yearButton.setTitle("연간", for: .normal)
        yearButton.addTarget(self, action: #selector(switchToYearView), for: .touchUpInside)
        view.addSubview(yearButton)
    }
    
    @objc private func switchToWeekView() {
        // 주간 보기로 전환하는 기능 구현
    }
    
    @objc private func switchToMonthView() {
        // 월간 보기로 전환하는 기능 구현
    }
    
    @objc private func switchToYearView() {
        // 연간 보기로 전환하는 기능 구현
    }
}

주간/월간/연간 모드로 전환하기

주간/월간/연간 모드로 전환하기 위해서는 FSCalendar의 scope 속성을 변경하면 됩니다. 이 속성을 통해 달력의 표시 범위를 변경할 수 있습니다. 아래는 버튼 클릭 시 주간/월간/연간 모드로 전환하는 코드입니다.

@objc private func switchToWeekView() {
    calendarView.scope = .week
}

@objc private func switchToMonthView() {
    calendarView.scope = .month
}

@objc private func switchToYearView() {
    calendarView.scope = .year
}

주간/월간/연간 모드로 전환할 때 달력이 자연스럽게 애니메이션이 적용되길 원한다면, FSCalendar의 setScope:animated: 메서드를 사용할 수도 있습니다.

@objc private func switchToWeekView() {
    calendarView.setScope(.week, animated: true)
}

@objc private func switchToMonthView() {
    calendarView.setScope(.month, animated: true)
}

@objc private func switchToYearView() {
    calendarView.setScope(.year, animated: true)
}

위와 같이 구현하면, 사용자가 주간/월간/연간 보기 전환 버튼을 클릭할 때마다 달력이 해당 모드로 자연스럽게 전환됩니다.

참고 자료

FSCalendar GitHub 저장소

FSCalendar 문서