[iOS]FSCalendar 사용 후기 & 사용법

FSCalendar 라이브러리 사용 후기 & 사용법 📑

시작에 앞서 FSCalendar Github 주소도 함께 공유합니다. 📎
⚠️ 필자가 직접 사용했던 방법을 중점으로 작성했으니, 가볍게 참고해주시면 감사합니다. ☺️

---

https://github.com/WenchaoD/FSCalendar

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

---

 

설치 ⬇️

• 우선 CocoaPods를 해당 프로젝트 폴더에 다운로드하였습니다.

pod init

• 그 후 CocoaPods의 Podfile을 이용해 아래와 같이 코드를 작성해주었습니다.

pod 'FSCalendar'

• Podfile에만 적어만 두면 안됩니다❗️
• Podfile을 나와서 아래와 같이 입력해줍니다.

pod install

• 위 코드를 통해 Podfile에 언급된 라이브러리를 해당 프로젝트 폴더에 다운로드하게 됩니다.

라이브러리를 다운로드하면 기존 .xcodeproj 확장자명의 파일이 아닌 .xcworkspace 확장자명의 파일을 열어 작업을 진행합니다.

 

준비하기 💻

• 아래 사진과 같이 UIView를 생성해줍니다. ▾

UIView 생성

 

• 그 후 오른쪽 인스펙터 영역(Inspector Area)에서 커스텀 클래스(Custom Class) 입력란에 "FSCalendar"를 입력해줍니다. ▾

Custom Class

 

• 입력을 하고 나면 아래와 같이 설정들이 보이고, GUI로 설정을 할 수도 있습니다. ▾

Inspector Setting

---

코드 관련 📑

IBOutlet 변수 선언 및 프로토콜 정의 ▾

• Class에 필요한 프로토콜 (FSCalendarDelegate & FSCalendarDataSource & FSCalendarDelegateAppearance) 정의를 해주었습니다.
• delegate와 dataSource를 self로 해주었습니다. 

@IBOutlet weak var calendarView: FSCalendar!

// viewDidLoad() 
calendarView.delegate = self
calendarView.dataSource = self

---

주간 & 월간 모드 설정 ▾

주간, 월간 예시

• 주간 & 월간에 이해를 위해 제 자료를 첨부했습니다.
• 주간 모드: 1주일 단위로 볼 수 있습니다.
• 월간 모드: 1달 단위로 볼 수 있습니다.

calendarView.scope = .week   // 주간
calendarView.scope = .month  // 월간

 

Weekday name 언어 변경 ▾

• 달력에보면 요일을 나타내는 맨 첫번째 행의 설정입니다.

 

// 1번째 방법 (추천)
calendarView.locale = Locale(identifier: "ko_KR")

// 2번째 방법
calendarView.calendarWeekdayView.weekdayLabels[0].text = "일"
calendarView.calendarWeekdayView.weekdayLabels[1].text = "월"
calendarView.calendarWeekdayView.weekdayLabels[2].text = "화"
calendarView.calendarWeekdayView.weekdayLabels[3].text = "수"
calendarView.calendarWeekdayView.weekdayLabels[4].text = "목"
calendarView.calendarWeekdayView.weekdayLabels[5].text = "금"
calendarView.calendarWeekdayView.weekdayLabels[6].text = "토"

// Default ( Mon, Tue, … 로 나온다 )
// M, T, W, … 처럼 나오게 하려면 아래와 같이 작성해주면 됩니다.
calendarView.appearance.caseOptions = FSCalendarCaseOptionsWeekdayUsesSingleUpperCase

 

스크롤 관련 설정 ▾

• 스크롤 가능 여부

calendarView.scrollEnabled = true   // 가능
calendarView.scrollEnabled = false  // 불가능

• 스크롤 방향

calendarView.scrollDirection = .horizontal  // 가로
calendarView.scrollDirection = .vertical    // 세로

 

폰트 설정 ▾

• 폰트 설정 및 크기 설정

// 헤더 폰트 설정
calendarView.appearance.headerTitleFont = UIFont(name: "NotoSansKR-Medium", size: 16)

// Weekday 폰트 설정
calendarView.appearance.weekdayFont = UIFont(name: "NotoSansKR-Regular", size: 14)

// 각각의 일(날짜) 폰트 설정 (ex. 1 2 3 4 5 6 ...)
calendarView.appearance.titleFont = UIFont(name: "NotoSansKR-Regular", size: 14)

 

헤더 설정 ▾

• 여기서 헤더는 아래 사진에 표기된 부분을 말합니다.

Header

// 헤더의 날짜 포맷 설정
calendarView.appearance.headerDateFormat = "YYYY년 MM월"

// 헤더의 폰트 색상 설정
calendarView.appearance.headerTitleColor = UIColor.link

// 헤더의 폰트 정렬 설정
// .center & .left & .justified & .natural & .right
calendarView.appearance.headerTitleAlignment = .left

// 헤더 높이 설정
calendarView.headerHeight = 45

// 헤더 양 옆(전달 & 다음 달) 글씨 투명도
calendarView.appearance.headerMinimumDissolvedAlpha = 0.0   // 0.0 = 안보이게 됩니다.

 

이벤트 추가하기

아래 예시 결과화면

events라는 [Date] 변수를 미리 선언해두었습니다.

• 이벤트 표시 색상도 변경할 수 있습니다.

calendarView.appearance.eventDefaultColor = UIColor.green
calendarView.appearance.eventSelectionColor = UIColor.green

• 해당 날짜의 이벤트를 추가할 수 있습니다.

func setEvents() {
	let dfMatter = DateFormatter()
    dfMatter.locale = Locale(identifier: "ko_KR")
    dfMatter.dateFormat = "yyyy-MM-dd"
    
    // events
    let myFirstEvent = dfMatter.date(from: "2022-01-01")
    let mySecondEvent = dfMatter.date(from: "2022-01-31")
    
    events = [myFirstEvent!, mySecondEvent!]

}

• 이벤트가 표시되는 갯수도 정할 수 있습니다.

func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
	if self.events.contains(date) {
		return 1
	} else {
		return 0
	}
}

 

 

그 외 기능들 ▾

// 선택된 날짜 모서리 설정
calendarView.appearance.borderRadius = 0

// 평일 & 주말 색상 설정
calendarView.appearance.titleDefaultColor = .white  // 평일
calendarView.appearance.titleWeekendColor = .red    // 주말

// 다중 선택
calendarView.allowsMultipleSelection = true

// 꾹 눌러서 드래그 동작으로 다중 선택
calendarView.swipeToChooseGesture.isEnabled = true

 

관련 메소드 ▾

• 날짜 선택 & 선택 해제에 관련된 콜백 메소드 입니다.

// 날짜 선택 시 콜백 메소드
func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
	print(dateFormatter.string(from: date) + " 날짜가 선택되었습니다.")
}
// 날짜 선택 해제 콜백 메소드
public func calendar(_ calendar: FSCalendar, didDeselect date: Date, at monthPosition: FSCalendarMonthPosition) {
	print(dateFormatter.string(from: date) + " 날짜가 선택 해제 되었습니다.")
}

---

• 선택해제를 막을 수도 있습니다.

func calendar(_ calendar: FSCalendar, shouldDeselect date: Date, at monthPosition: FSCalendarMonthPosition) -> Bool {
     return false  // 선택해제 불가능
     return true   // 선택해제 가능
}

---

• 날짜 밑에 문자열을 표시하는 메소드 입니다.

func calendar(_ calendar: FSCalendar, subtitleFor date: Date) -> String? {
     switch dateFormatter.string(from: date) {
     case dateFormatter.string(from: Date()):
         return "오늘"
            
     case "2022-01-05":
         return "국어공부"
            
     case "2022-01-06":
         return "영어공부"
            
     case "2022-01-07":
         return "수학공부"
            
     default:
         return nil
            
        }
    }

---

• 해당 날짜의 글씨 자체를 바꾸는 메소드 입니다.

func calendar(_ calendar: FSCalendar, titleFor date: Date) -> String? {
     switch dateFormatter.string(from: date) {
     case "2022-01-11":
         return "D-day"
         
     default:
         return nil
     }
}

---

• 날짜별로 선택 시 색상을 설정하는 메소드 입니다.

func calendar(_ calendar: FSCalendar, appearance: FSCalendarAppearance, fillSelectionColorFor date: Date) -> UIColor? {        
     switch dateFormatter.string(from: date) {
     case "2022-01-05":
         return .green
         
     case "2022-01-06":
         return .yellow
         
     case "2022-01-07":
         return .red
         
    default:
         return appearance.selectionColor
     }
}

---

• 최대 선택의 갯수를 제어하는 메소드 입니다.

func calendar(_ calendar: FSCalendar, shouldSelect date: Date, at monthPosition: FSCalendarMonthPosition) -> Bool {
     // 날짜 3개까지만 선택
     if calendar.selectedDates.count > 3 {
         return false
     } else {
         return true
     }
}