[Swift] FSCalendar 커스텀 캘린더 정리

FSCalendar 

커스텀 캘린더를 생성할 수 있도록 도와주는 라이브러리

GitHub - WenchaoD/FSCalendar: A fully customizable iOS calendar library, compatible with Objective-C and Swift

알아보고 정리하는데 꽤 오래 걸렸는데 댓글 한번씩만 달아주시면 힘이 될거 같습니당 ㅎㅎ 

Initializing

fileprivate var localCalendar = FSCalendar()

 

Delegate 연결

// FSCalendarDelegate
localCalendar.delegate = self 

// FSCalendarDataSource 
localCalendar.dataSource = self

// FSCalendarDelegateAppearance

• FSCalendarDelegate, FSCalendarDataSource 는 UICollectionViewDelegate와 UICollectionViewDataSource와 사용법이 유사함(실제로 UICollectionView로 되어 있음)
• FSCalendarDelegateAppearance로 커스텀 갤러리의 외형을 설정할 수 있음

 

layout update

	func calendar(_ calendar: FSCalendar, boundingRectWillChange bounds: CGRect, animated: Bool) {
        self.view.layoutIfNeeded()
    }

• 자동으로 레이아웃이 업데이트 되지 않을 때 boundingRectWillChange 호출해서 업데이트

---

 

Calendar 전체

• 오늘 선택 해지하기
  • default로 오늘이 선택되어 있음

localCalendar.today = nil

 

• 스크롤 기능 막기
  • default로 날짜 부분을 스크롤 하면 다음이나 이전 월로 이동됨

localCalendar.scrollEnabled = false

 

• UI 업데이트

localCalendar.layoutIfNeeded()

 

• 나라 (한국으로) 설정하기

localCalendar.locale = Locale.init(identifier: "ko_KR")
// or
localCalendar.locale = Locale(identifier: "ko_KR")

 

• 이전 혹은 이후 날짜 안뜨도록 수정
  • 기본으로 이전, 이후 날짜가 현재 달력에 뜨게 되어 있음

localCalendar.placeholderType = .none

 

• 선택된 날짜 표시를 동그라미에서 네모로 변경하기
  • 날짜를 선택하면 나오는 동그라미는 FSCalendarCell에 layer로 들어가 있으며 날짜가 표시되는 titleLabel 보다 작은 영역으로 그려짐
  • layer의 크기를 키우더라도 셀 사이에 여백이 있으므로 주의 그 때는 inserBy로 inset을 키워 줌

localCalendar.appearance.borderRadius = 0.0

---

Header Title

• 달력에서 요일 위에 날짜가 표시되는 영역이 header로 불림
• 아직 header title을 맨 위에 붙이는 방법을 모르겠음 이 사진은 snapkit으로 다른 뷰랑 엮어서 위에 잘리도록 만든 것

 

• 헤더 높이 

localCalendar.headerHeight = 48

 

• 헤더 타이틀 날짜 데이터 포멧 지정

localCalendar.appearance.headerDateFormat = "YYYY년 MM월"

 

• 헤더 타이틀 색상

localCalendar.appearance.headerTitleColor = .red // UIColor

 

• 헤더 타이틀 폰드

localCalendar.appearance.headerTitleFont = UIFont(name: UIFont.NormalFont.medium, size: 18)!

 

• 헤더 타이틀 애니메이션 제거
  • default로 달력이 이전이나 다음 달로 넘어가면 헤더 타이틀에서 이전 달력의 헤더 타이틀의 알파값이 조정되면서 사라지거나 나타나는 애니메이션이 있음

localCalendar.appearance.headerMinimumDissolvedAlpha = 0.0

 

---

Weekday(요일)

• 요일 영역 높이 설정

localCalendar.weekdayHeight = 46

 

• 요일 영역 텍스트 컬러

localCalendar.appearance.weekdayTextColor = .bentleyColor(.black70)

 

• 요일 영역 폰트

localCalendar.appearance.weekdayFont = UIFont(name: UIFont.NormalFont.medium, size: 14)!

---

Day

• 날짜 폰트 변경

localCalendar.appearance.titleFont = UIFont(name: UIFont.NormalFont.medium, size: 14)!

---

FSCalendarDataSource

• 최소 날짜 지정
  • 예시 코드는 오늘 부터 시작하도록 지정하는 것

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

 

• 최대 날짜 지정
  • 예시 코드는 이번달 포함 3개월 까지만 나오도록 지정

	func maximumDate(for calendar: FSCalendar) -> Date {
        let currentCaledar = Calendar(identifier: .gregorian)
        let startComponents = currentCaledar.dateComponents([.year, .month], from: Date())
        let startOfMonth = currentCaledar.date(from: startComponents)!
        
        var endComponents = DateComponents()
        let limitDate = Singleton.sharedObject.initData?.reservationLimitDate
        endComponents.month = Int(limitDate ?? "3") ?? 3
        endComponents.day = -1
        return Calendar(identifier: .gregorian).date(byAdding: endComponents, to: startOfMonth)!

    }

 

---

FSCalendarDelegate

• layout update
  • FSCalendar는 자동으로 크기가 지정되지 않기 때문에 AutoLayout, frame으로 설정한 뒤 업데이트 해줘야 함 (테스트 해본 결과 있든 없든 차이 없음)

	func calendar(_ calendar: FSCalendar, boundingRectWillChange bounds: CGRect, animated: Bool) {
        self.view.layoutIfNeeded()
    }

 

• 날짜 선택 didSelect delegate
  • 날짜 선택 후 처리할 이벤트를 지정해 줄 수 있음. 선택된 날짜는 date 변수에 담겨서 나옴

func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
    print(date)
}

 

---

FSCalendarAppearance

• 특정 조건일 때 날짜 색상 변경
  • 예시 코드에는 holiday 라는 조건에 따라 해당 날짜의 색상을 변경하는 것

func calendar(_ calendar: FSCalendar, appearance: FSCalendarAppearance, titleDefaultColorFor date: Date) -> UIColor? {
	if holiday {
		return .red
	} else {
		return .black
	}
}

---

CustomCell

• 현재 달력에 있는 cell 과 date, position 얻어오기

localCalendar.visibleCells().forEach { (cell) in
    let date = self.localCalendar.date(for: cell)
    let position = self.localCalendar.monthPosition(for: cell)
		// custom configuration
    // self.configureCell(cell, for: date, at: position) 
}

 

• FSCalendarDataSource 에서 커스텀 셀과 identifier 지정

    func calendar(_ calendar: FSCalendar, cellFor date: Date, at position: FSCalendarMonthPosition) -> FSCalendarCell {
        let cell = calendar.dequeueReusableCell(withIdentifier: "cell", for: date, at: position)
        return cell
    }

 

• register cell

localCalendar.register(CalendarCollectionViewCell.self, forCellReuseIdentifier: "cell")

 

• 캘린더 display 될때 최초 설정
  • 커스텀 셀이 로드 될때 상태를 지정하여 UI 변경도 가능

    func calendar(_ calendar: FSCalendar, willDisplay cell: FSCalendarCell, for date: Date, at monthPosition: FSCalendarMonthPosition) {
        // custom configuration
        // configureCell(cell, for: date, at: monthPosition)
    }

 

• configure cell
  • 예시 코드

func configureCell(_ cell: FSCalendarCell?, for date: Date?, at position: FSCalendarMonthPosition) {
        guard let date = date else {
            return
        }
        
        dateFormatter.dateFormat = "yyyy-MM-dd"
        
        for availableDate in availableDateList {
            let dateString = dateFormatter.string(from: date)
            if dateString == availableDate.day {
                if availableDate.holiday ?? true {
                    cell?.isUserInteractionEnabled = false
                }
            }
        }
        
        let selectedDateString = dateFormatter.string(from: date)
        let todayDateString = dateFormatter.string(from: Date())
        
        let calendarCell = cell as! CalendarCollectionViewCell
        
        if selectedDateString == todayDateString {
            calendarCell.selectionType = localCalendar.selectedDate == date ? .todaySelect : .todayDiselect
        } else {
            calendarCell.selectionType = localCalendar.selectedDate == date ? .select : .normal
        }
    }

 

• custom cell 생성

class CalendarCollectionViewCell: FSCalendarCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init!(coder aDecoder: NSCoder!) {
        fatalError("init(coder:) has not been implemented")
    }
    
     override func layoutSubviews() {
        super.layoutSubviews()
     }
     
     override func configureAppearance() {
        super.configureAppearance()
     }
}