今回はFSCalenderというライブラリを使って、アプリ内にカレンダー機能を搭載してみます。
UIもポップな感じで馴染みやすく感じました。
◉今回の完成系
☆自分と同じコミュニティーに属している人がまさにこのライブラリを使ったアプリをリリースしているのでぜひダウンロードしてみてください！
Contents 非表示
開発環境
今回は以下の環境で実装しています
| Mac OS ver | 12.4 |
| Swift ver | 5.6 |
| Xcode ver | 13.3 |
プロジェクトの作成 & Storyboardの装飾
まずはプロジェクトを作成して、以下のようにStoryboardを装飾
背景のオレンジ色はUIViewの設置を分かりやすくするために一時的に設定しています、後半で白に戻します。
今回のように、画面いっぱいにパーツを広げたい場合は制約(オートレイアウト)をつけると便利です。
FSCalenderのインストール
インストール手順
それではPodファイルを作成してFSCalenderをインストールしましょう。
◉FSCalenderのGithub
Podファイルを開いて内容を変更
- # platform :ios, ‘9.0’をplatform :ios, ‘14.0’に変更
- Pods for RealmToDoの下にpod ‘FSCalendar’wift’とpod ‘CalculateCalendarLogic’> 5.0’を追記
FSCalenderと別にCalculateCalenderLogicというライブラリを加えていますが、これは祝日計算を行うためのライブラリです、日本の祝日を取得して何かUIなりイベントを追加したい時に活躍します。
カレンダーの詳細設定 & コードの記述
インストールが完了したら白いプロジェクトファイルから開き直して、Storyboardを以下のように設定を変更してください。
この時点でビルドをすると既にカレンダーの初期表示は出来るようになります。
Storyboardには反映されていませんが、自分の場合はプロジェクトを開き直すと反映されるようになりました。
まあデフォルトの時点で素晴らしいデザインですが、これを自分なりにカスタマイズしていけるので色々いじってみましょう。
設定項目が多すぎるので説明は割愛しますが、ヘッダー部分や各日付の色を変更出来ますので皆さんも色々試してみてください。
今回はアクション接続などは行わないので最低限のコードだけ書いておきます。
☆UIVIew(FSCalender)は事前にOutlet接続しておいてください。
import UIKit
import FSCalendar
import CalculateCalendarLogic
class ViewController: UIViewController {
@IBOutlet weak var calender: FSCalendar!
override func viewDidLoad() {
super.viewDidLoad()
setupCalender()
}
private func setupCalender() {
let calendar = FSCalendar()
calendar.dataSource = self
calendar.delegate = self
view.addSubview(calendar)
self.calender = calendar
}
private let gregorian: Calendar = Calendar(identifier: .gregorian)
private lazy var dateFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateFormat = "yyyy-MM-dd"
return formatter
}()
// 祝日判定を行い結果を返すメソッド(True:祝日)
private func judgeHoliday(_ date : Date) -> Bool {
let tmpCalendar = Calendar(identifier: .gregorian)
let year = tmpCalendar.component(.year, from: date)
let month = tmpCalendar.component(.month, from: date)
let day = tmpCalendar.component(.day, from: date)
let holiday = CalculateCalendarLogic()
return holiday.judgeJapaneseHoliday(year: year, month: month, day: day)
}
// date型 -> 年月日をIntで取得
private func getDay(_ date:Date) -> (Int,Int,Int){
let tmpCalendar = Calendar(identifier: .gregorian)
let year = tmpCalendar.component(.year, from: date)
let month = tmpCalendar.component(.month, from: date)
let day = tmpCalendar.component(.day, from: date)
return (year,month,day)
}
//曜日判定(日曜日:1 〜 土曜日:7)
private func getWeekIdx(_ date: Date) -> Int{
let tmpCalendar = Calendar(identifier: .gregorian)
return tmpCalendar.component(.weekday, from: date)
}
}
extension ViewController: FSCalendarDataSource, FSCalendarDelegate, FSCalendarDelegateAppearance {
// 土日や祝日の日の文字色を変える
func calendar(_ calendar: FSCalendar, appearance: FSCalendarAppearance, titleDefaultColorFor date: Date) -> UIColor? {
//祝日判定をする（祝日は赤色で表示する）
if self.judgeHoliday(date){
return UIColor.red
}
//土日の判定を行う（土曜日は青色、日曜日は赤色で表示する）
let weekday = self.getWeekIdx(date)
if weekday == 1 { //日曜日
return UIColor.red
}
else if weekday == 7 { //土曜日
return UIColor.blue
}
return nil
}
}まとめ
今回は以上です、カレンダー機能を使ってタスク系アプリや日記系アプリを作りたい方は是非取り入れてみてください！
