[Swift iOS] 캘린더 라이브러리 _FSCalendar 설치 및 사용하기

달력 기능이 필요해서 검색하다가 FSCalendar를 발견했는데, 나름 customizing 하기에도 좋아보이고 정보도 꽤 있는 것 같아서 이 라이브러리를 받아와 사용하기로 했다. 

참고 : FSCalendar Github

 

1. Cocoapods를 이용해 터미널에서 설치 

pod 'FSCalendar'

 

2. Calendar 추가

1) 스토리보드 혹은 xib 파일 사용 시 

View를 추가 후 Custom Class를 FSCalendar로 설정해준다. 

그리고 코드에 IBOutlet으로 연결 및 대리자 위임해주기

import UIKit
import FSCalendar

class CalendarViewController: UIViewController, FSCalendarDelegate, FSCalendarDataSource {

    @IBOutlet weak var fsCalendar: FSCalendar!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        fsCalendar.delegate = self
        fsCalendar.dataSource = self
    }
}

 

2) 코드로 직접 추가하기

import UIKit
import Foundation
import FSCalendar

class CalendarViewController: UIViewController, FSCalendarDataSource, FSCalendarDelegate {
    
    fileprivate weak var fsCalendar: FSCalendar!
    
    override func loadView() {
        let view = UIView(frame: UIScreen.main.bounds)
        self.view = view
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()  
        
        let fsCalendar = FSCalendar(frame: CGRect(x: 20, y: 30, width: 320, height: 400))
        fsCalendar.dataSource = self
        fsCalendar.delegate = self
        view.addSubview(fsCalendar)
        self.fsCalendar = fsCalendar
    }   
}

 

3. Calender UI 관련 세부 설정

달력 속성을 하나씩 추가 / 변경 해보자. 

1) Header 변경

fsCalendar.headerHeight = 50  
fsCalendar.appearance.headerDateFormat = "M월 YYYY년"  //헤더 년 월 형식 설정
fsCalendar.appearance.headerMinimumDissolvedAlpha = 0.0  //양 옆 글자 투명도
calendar.appearance.headerTitleColor = .black
calendar.appearance.headerTitleFont = UIFont.systemFont(ofSize: 24)

 

2) Weekday 언어 변경

 

 

) 글자 색 변경

calendar.appearance.weekdayTextColor = UIColor.redColor
calendar.appearance.headerTitleColor = UIColor.redColor
calendar.appearance.eventColor = UIColor.greenColor
calendar.appearance.selectionColor = UIColor.blueColor
calendar.appearance.todayColor = UIColor.orangeColor
calendar.appearance.todaySelectionColor = UIColor.blackColor

 

코드로 이전 달, 다음 달 이동 

다음과 같이 moveMonth 함수를 만들어준 후 

다음 달로 이동하고 싶을 때는 moveMonth(next: true), 이전 달로 이동하고 싶을 때는 moveMonth(next: false) 해주면 된다. 

@IBOutlet weak var fsCalendar: FSCalendar!
let calendar = Calendar.current
lazy var currentPage = fsCalendar.currentPage
lazy var today: Date = {
    return Date()
}()

func moveMonth(next: Bool) {
    var dateComponents = DateComponents()
    dateComponents.month = next ? 1 : -1
    self.currentPage = calendar.date(byAdding: dateComponents, to: self.currentPage)!
    self.fsCalendar.setCurrentPage(self.currentPage, animated: true)                
}

참고 : FSCalendar - Add Prev/Next button for swap month issue

 

근데 이렇게만 해주니깐 스와이프로 넘기는거랑 같이 사용했을 때 문제가 좀 있더라.

그래서 다음 코드를 추가해주어, 스와이프로 넘길 때도 currentPage에 바로바로 적용되도록 하니 작동이 잘 되더라. 😊

func calendarCurrentPageDidChange(_ calendar: FSCalendar) {
    self.currentPage = calendar.currentPage
}

 

현대 달, 현재 페이지 달 구하기

let calendar = Calendar.current
lazy var today: Date = {
    return Date()
}()

func getMonth() {
    //현재 달
    let currentMonth = calendar.component(.month, from: today)
    //현재 페이지 달
    let currentPageMonth = calendar.component(.month, from: fsCalendar.currentPage)
}

 

 

현재 달에 해당하는 날짜만 보이도록

calendar.placeholderType = .none

참고 : Show only days of the current month

 

 

오늘 날짜 이후로 선택 불가능하도록

func maximumDate(for calendar: FSCalendar) -> Date {
    return Date()
}

마찬가지로 다음과 같이 오늘 이전 날짜 선택 불가능하도록 만들어줄 수 있다. 

func minimumDate(for calendar: FSCalendar) -> Date {
    return Date()
}

참고 : Disable future dates selection in FSCalendar

 

 

날짜 선택시 실행되는 메서드

fileprivate lazy var dateFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "yyyy-MM-dd"
    return formatter
}()

func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
    print(dateFormatter.string(from: date))
    self.dismiss(animated: true, completion: nil)
}

참고 : chobiTistory - FSCalendar