今回は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 initでファイル作成
Podファイル内の記述を変更 & 追加
Podファイルを開いて内容を変更
- # platform :ios, ‘9.0’をplatform :ios, ‘14.0’に変更
- Pods for RealmToDoの下にpod ‘FSCalendar’wift’とpod ‘CalculateCalendarLogic’> 5.0’を追記
pod installでインストールを行う
カレンダーの詳細設定 & コードの記述
インストールが完了したら白いプロジェクトファイルから開き直して、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
}
}
まとめ
今回は以上です、カレンダー機能を使ってタスク系アプリや日記系アプリを作りたい方は是非取り入れてみてください!