[swift] FSCalendar에서 특정 날짜의 이벤트 리스트 스크롤 가능 설정

15 Nov 2023

swift

FSCalendar은 iOS용으로 많이 사용되는 캘린더 라이브러리입니다. 이 라이브러리를 사용하여 특정 날짜에 이벤트를 표시하고 해당 날짜의 이벤트 리스트를 스크롤 가능하도록 설정하는 방법을 알아보겠습니다.

FSCalendar 설정

먼저 FSCalendar을 설정해야 합니다. calendar 인스턴스를 생성하고, 델리게이트와 데이터소스를 설정합니다. 이때, 데이터소스에서는 이벤트를 표시할 날짜들을 반환해야 합니다.

import FSCalendar

class ViewController: UIViewController, FSCalendarDataSource, FSCalendarDelegate {
    
    @IBOutlet weak var calendar: FSCalendar!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        calendar.dataSource = self
        calendar.delegate = self
    }

    // 이벤트를 표시할 날짜 반환
    func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
        // 이벤트를 표시할 날짜에 해당하는 데이터를 가져와서 이벤트 개수를 반환
        // 예시: events[date]라는 딕셔너리에서 해당 날짜에 해당하는 이벤트 개수를 가져와 반환
        return events[date] ?? 0
    }
}

이벤트 리스트 스크롤 가능 설정

이제 특정 날짜에 이벤트 리스트를 스크롤 가능하도록 설정해야 합니다. 이를 위해 FSCalendarDelegate 프로토콜의 didSelect 메서드에서 해당 날짜의 이벤트 리스트를 표시하고 스크롤 가능하도록 설정합니다.

import FSCalendar

class ViewController: UIViewController, FSCalendarDataSource, FSCalendarDelegate {
    
    @IBOutlet weak var calendar: FSCalendar!
    @IBOutlet weak var eventTableView: UITableView!
    
    var selectedDate: Date?
    var events: [Date: [Event]] = [:] // 이벤트 데이터

    override func viewDidLoad() {
        super.viewDidLoad()
        
        calendar.dataSource = self
        calendar.delegate = self
        eventTableView.dataSource = self
    }

    // 이벤트를 표시할 날짜 반환
    func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
        // 이벤트를 표시할 날짜에 해당하는 데이터를 가져와서 이벤트 개수를 반환
        // 예시: events[date]라는 딕셔너리에서 해당 날짜에 해당하는 이벤트 개수를 가져와 반환
        return events[date] ?? 0
    }
    
    // 캘린더에서 날짜를 선택했을 때 호출되는 메서드
    func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
        selectedDate = date
        eventTableView.reloadData() // 이벤트 리스트 테이블 뷰를 새로고침하여 선택 날짜의 이벤트 표시
        eventTableView.scrollToRow(at: IndexPath(row: 0, section: 0), at: .top, animated: true) // 이벤트 리스트를 맨 위로 스크롤
    }

    // ...
}

이제 해당 날짜를 선택하면 이벤트 리스트가 표시되고, 이벤트 리스트를 스크롤하여 추가적인 이벤트를 확인할 수 있습니다.

이와 같이 FSCalendar을 사용하여 특정 날짜의 이벤트 리스트를 스크롤 가능하도록 설정할 수 있습니다.

더 자세한 정보는 FSCalendar GitHub 페이지를 참고하세요.