iOS Swift 라이브러리 Calendar 사용하기

안녕하세요 Gons 입니다.

오늘은 많은분들이 필요로 하실 것 같은데요

바로 달력입니다. ( Calendar )

 

 

사용할 라이브러리 이름은 FSCalendar 이고요

 

FSCalendar

이런식으로 생겼습니다. ( 다양한 모양이 있습니다. )

 

 

 

 

 

 

 

 

 

시작하겠습니다.

 

 

 

먼저 라이브러리 주소입니다.

https://github.com/WenchaoD/FSCalendar

 

 

 

 

pod install 해주시고요

pod 'FSCalendar'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

import 해주세요

import FSCalendar

※ 여기서 import 에 FSCalendar 가 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

 

스토리보드에서 View 하나를 넣고

Custom Class - FSCalendar

Custom Class 를 FSCalendar 로 쓰고 리턴↩︎(엔터)을 누르면

바로 달력이 나옵니다.

 

 

 

 

 

아울렛 변수로 등록하고 속성을 하나씩 바꿔보겠습니다.

@IBOutlet var calendarView: FSCalendar!

 

 

 

 

 

 

배경색을 변경해보겠습니다.

calendarView.backgroundColor = UIColor(red: 241/255, green: 249/255, blue: 255/255, alpha: 1)

선택한 날짜색도 변경할 수 있고요.

calendarView.appearance.selectionColor = UIColor(red: 38/255, green: 153/255, blue: 251/255, alpha: 1)

오늘 날짜색도 변경할 수 있습니다.

calendarView.appearance.todayColor = UIColor(red: 188/255, green: 224/255, blue: 253/255, alpha: 1)

 

 

 

 

한번 보겠습니다.

color 변경

보기 좋아졌네요.

 

 

 

지금은 날짜 하나씩 선택될텐데 이렇게 쓰면 여러개선택으로 바꿀 수 있습니다.

calendarView.allowsMultipleSelection = true

 

 

꾸욱 눌러서 스와이프 동작으로 다중 선택을 할 수도 있습니다.

calendarView.swipeToChooseGesture.isEnabled = true

 

 

한번 보겠습니다.

Longpress Swipe

신기하네요 ㅎㅎ

 

 

 

 

 

스크롤 작동여부와 방향을 바꿀 수 있습니다.

// 스와이프 스크롤 작동 여부 ( 활성화하면 좌측 우측 상단에 다음달 살짝 보임, 비활성화하면 사라짐 )
calendarView.scrollEnabled = true
// 스와이프 스크롤 방향 ( 버티칼로 스와이프 설정하면 좌측 우측 상단 다음달 표시 없어짐, 호리젠탈은 보임 )
calendarView.scrollDirection = .vertical

 

 

 

 

한번 보겠습니다.

.scrollDirection = .vertical

세로로 스크롤 됩니다.

 

 

 

 

선택된 날짜 모서리를 변경할 수 있습니다.

// 선택된 날짜의 모서리 설정 ( 0으로 하면 사각형으로 표시 )
calendarView.appearance.borderRadius = 0

 

 

borderRadius

0으로 해서 각지게 만들었네요.

 

 

 

 

기본 사용법은 이렇게 되고,

이제 Delegate 를 받아서 선택됐을 때 이벤트 처리도 하고

DataSource 도 변경해볼게요.

 

 

먼저 날짜를 보기좋게 표현하도록

viewDidLoad 밖에다가

let dateFormatter = DateFormatter()

데이트 포멧터 하나 만들어주시고요.

 

 

viewDidLoad 안에다가

dateFormatter.dateFormat = "yyyy-MM-dd"

포멧을 정해주세요.

 

 

viewDidLoad 안에다가

calendarView.delegate = self
calendarView.dataSource = self

델리게이트와 데이터소스 받는 것도 작성해줍니다.

 

 

 

이제 필요한 프로토콜들을 상속 받고 시작합니다.

extension ViewController : FSCalendarDelegate, FSCalendarDataSource, FSCalendarDelegateAppearance {
	// ... 이 안에서 작성 시작할게요.
}

 

 

 

기본적으로 날짜 선택하거나 해제했을 때 매서드입니다.

// 날짜 선택 시 콜백 메소드
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, subtitleFor date: Date) -> String? {
        
        switch dateFormatter.string(from: date) {
        case dateFormatter.string(from: Date()):
            return "오늘"
        case "2020-06-22":
            return "출근"
        case "2020-06-23":
            return "지각"
        case "2020-06-24":
            return "결근"
        default:
            return nil
        }
    }

subtitle

이렇게 나옵니다.

 

 

 

 

 

 

이렇게 하면 날짜 글씨 자체를 바꿔버릴 수 있고요

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

title

 

 

 

 

날짜별로 선택 컬러 변경가능합니다.

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

이렇게 하면 되는데 title , subtitle 컬러가 흰색이라 잘 안보여서

viewDidLoad 에 잘 보이게 좀 써주겠습니다.

// 타이틀 컬러
calendarView.appearance.titleSelectionColor = .black
// 서브 타이틀 컬러
calendarView.appearance.subtitleSelectionColor = .black

 

fillSelectionColorFor

이런식으로 근무표를 구성할 수 있습니다.

 

 

 

최대 선택 가능 갯수를 3개로 해보겠습니다

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

이렇게 하면 되고요

 

 

 

 

선택해제도 한번 막아보겠습니다.

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

 

 

 

 

 

 

끝.

FSCalendar 는 더 다양한 기능이 많이 있습니다.

원하시는대로 사용할 수 있을거에요.

깃허브를 참조해주세요.

저는 또 다음에 여러분이 찾는 정보로 찾아오겠습니다.

감사합니다.