2022/10/18

【Swift UIKit】FSCalendarの使い方！イベントの登録や画像の表示

この記事からわかること

SwiftのUIKitでFSCalendarを実装する方法
Interface Builderから使用する方法
コードで実装するには？
デザインを変更する方法
calendar(デリゲートメソッド)の使い方
選択された日時を取得する
イベントを登録する

index

[open]

FSCalendarとは？
インストール方法
Interface Builderから使用する
コードから導入する
デザインや設定をカスタマイズする
デリゲートメソッドを実装する
選択された日時を取得する
イベント(ドット)を登録する
calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date)の使い方
画像を表示する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

FSCalendarとは？

【Swift UIKit】FSCalendarの使い方！イベントの登録方法と表示

FSCalendarとはiOSアプリにカレンダー機能を導入することができるライブラリです。カレンダーを表示するだけでなく、イベントの登録やスワイプしてマークをつけるなどさまざまな機能が簡単に実装可能になっています。

Github-FSCalender

インストール方法

FSCalendarを導入するために今回はライブラリ管理ツール「Cocoa Pods」を使用します。PodFileの中に以下のようにpod 'FSCalendar'を追加してターミナルからpod installを実行します。

PodFile
target 'UIKitTest' do
  # Pods for UIKitTest
  pod 'FSCalendar'
end

これで導入が完了したので実際に使用してみます。

Interface Builderから使用する

Storyboard(Interface Builder)を使ってカレンダーを表示させるには以下の手順に沿って実装していきます。

Interface BuilderでUIViewを追加
Custom Classを「FSCalender」に変更(Enterでプレビューが変わる)
dataSourceとdelegateをViewControllerと紐付ける
ViewController内で「import FSCalendar」でライブラリを読み込む
カレンダーのアウトレット変数を定義
Interface Builderで変数と紐付け

※ライブラリを導入していないと「FSCalender」が出てこないので注意してください。

ViewController.swift
import UIKit
import FSCalendar

class ViewController: UIViewController{

    @IBOutlet  weak var calendar: FSCalendar!
    
    override func viewDidLoad() {
      super.viewDidLoad()
    }
}

何も設定していない状態だと以下のようなカレンダーが表示されました。

コードから導入する

コードから導入する場合はViewControllerクラスをFSCalendarDataSourceとFSCalendarDelegateプロトコルに準拠させて以下のように記述します。

ViewController.swift
import UIKit
import FSCalendar

class ViewController: UIViewController,FSCalendarDataSource,FSCalendarDelegate {
    
      override func viewDidLoad() {
        super.viewDidLoad()
        let calendar = FSCalendar(frame: CGRect(x: 50, y: 200, width: 320, height: 300))
        calendar.dataSource = self
        calendar.delegate = self
        view.addSubview(calendar)
      }
}

デザインや設定をカスタマイズする

Interface Builder上からカレンダーの見た目や設定を変更するにはプロパティを変更するだけです。

コードから変更するにはcalendar.appearanceに続いてInterface Builderから確認できたプロパティ名を指定することで変更することができます。

override func viewDidLoad() {
    super.viewDidLoad()
    let calendar = FSCalendar(frame: CGRect(x: 50, y: 200, width: 320, height: 300))
    calendar.dataSource = self
    calendar.delegate = self
    view.addSubview(calendar)
    calendar.appearance.calendar.firstWeekday = 1 // 月曜日からに変更
    calendar.appearance.weekdayTextColor = UIColor.orange
    calendar.appearance.headerTitleColor = UIColor.orange
}

デリゲートメソッドを実装する

用意されているデリゲートメソッドを使用することでさまざまな情報を取得したり変更したりすることができます。そのためにはFSCalendarDataSourceとFSCalendarDelegateプロトコルへの準拠が必要になります。デリゲートメソッド名はcalendarです。

選択された日時を取得する

calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition)メソッドを使用すればユーザーが選択した日付情報を取得することができます。

下記は「取得した日付をラベルに表示する」サンプルコードです。

class ViewController: UIViewController,FSCalendarDataSource,FSCalendarDelegate {
    
    var label:UILabel!
    let df = DateFormatter()
    
    override func viewDidLoad() {
      super.viewDidLoad()
      let calendar = FSCalendar(frame: CGRect(x: 50, y: 200, width: 320, height: 300))
      calendar.dataSource = self
      calendar.delegate = self
      view.addSubview(calendar)
      label = UILabel(frame: CGRect(x: 50, y: 400, width: 320, height: 300))
      view.addSubview(label)
    }
    
    func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
        df.dateFormat = "yyyy-MM-dd"
        label.text = df.string(from: date)
    }
    
}

イベント(ドット)を登録する

カレンダーにイベントを登録するにはcalendar(_:numberOfEventsFor date: Date)メソッドを使用します。イベントと呼んでいますがカレンダーに表示されるのは以下のようなドットです。

実装方法は以下の通りです。1行ずつコードを整理していきます。

class ViewController: UIViewController,FSCalendarDataSource,FSCalendarDelegate {
    
    let df = DateFormatter()
    let eventArray = ["2022-10-04","2022-10-12","2022-10-18"]
    
      override func viewDidLoad() {
        super.viewDidLoad()
        let calendar = FSCalendar(frame: CGRect(x: 50, y: 200, width: 320, height: 300))
        calendar.dataSource = self
        calendar.delegate = self
        view.addSubview(calendar)
      }
    
    func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
        df.dateFormat = "yyyy-MM-dd"
        if eventArray.first(where: { $0 == df.string(from: date) }) != nil {
                return 1
        }
        return 0
    }
}

まずはイベントを表示する日付を配列で定義します。このフォーマットとDateFormatterのフォーマットは同じものにして置いてください。

calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date)の使い方

イベントを登録するにはcalendarメソッドの返り値で1を返せばドットが表示され、0を返せば何も表示されません。また引数にはFSCalendarインスタンスと日付が全てループして格納されます。一度出力して見ると日付が回されているのが確認できます。

func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
  print(date)
}

2022-09-24 15:00:00 +0000
2022-09-25 15:00:00 +0000
〜〜〜〜〜〜〜〜〜〜〜〜〜
2022-10-30 15:00:00 +0000
2022-10-31 15:00:00 +0000
2022-11-01 15:00:00 +0000
2022-11-02 15:00:00 +0000
2022-11-03 15:00:00 +0000
2022-11-04 15:00:00 +0000

あとは格納されている日付に対して配列内に同じ日付があれば1を、なければ0を返すようにすれば配列内の日付をイベントとして登録することができます。

func calendar(_ calendar: FSCalendar, numberOfEventsFor date: Date) -> Int {
    df.dateFormat = "yyyy-MM-dd"
    if eventArray.first(where: { $0 == df.string(from: date) }) != nil {
            return 1
    }
    return 0
}

画像を表示する

イベント(ドット)ではなく好きな画像を表示させることも可能です。その場合はcalendar(_:imageFor date: Date)メソッドを使用します。このメソッドも日付をループしているので表示させたい日付の時だけ画像を、それ以外はnilを返すことで非表示にすることが可能です。

func calendar(_ calendar: FSCalendar, imageFor date: Date) -> UIImage? {
    df.dateFormat = "yyyy-MM-dd"
    let image = UIImage(systemName: "iphone")
    if eventArray.first(where: { $0 == df.string(from: date) }) != nil {
        return image
    }
    return nil
}