JTAppleCalendar(v8.0.3)を簡単にさわってみる

# はじめに
[JTAppleCalendar](https://github.com/patchthecode/JTAppleCalendar)を触る機会がたまたまあり、記事を執筆当時に[公式チュートリアル](https://patchthecode.com/)にバージョン7系は記されていましたが、バージョン8.0.0のページでは具体的な使い方は記述されていませんでした。
そこで、バージョン8系での簡単な処理についてまとめてみました。

これからの流れは、[こちらの記事](https://qiita.com/tanirei/items/4baa07d4905fd458500a)をベースに進めています。

# 手順
## 前準備
適当なプロジェクトを作成します。今回は、`JTAppleCalendarSample`で作成しました。

今回JTAppleCalendarはcocoapodsでインストールします。
この記事ではバージョンは`8.0.3`をインストールしています。
インストールの方法はベースの記事を参照してください。

インストール後は`.xcworkspace`を開いてください。

## 実装
### パーツ
プロジェクトを開いて、まずはパーツを設置しましょう。
`Main.storyboard`ではUIView（オレンジ背景）の上にUICollectionViewを設置します。
曜日の部分は適当にUILabelを並べています。
<img width="451" alt="スクリーンショット 2020-03-11 23.53.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/22572a4a-cd74-a798-e4d3-46f3d8e6f31a.png">

CollectionViewのCustom ClassはClassを`JTACMonthView`、moduleを`JTAppleCalendar`にしてください。
<img width="259" alt="スクリーンショット 2020-03-11 23.47.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/9f6e30bb-4ea0-4dc1-260f-23090b769287.png">

セルの境界をわかるようにするため、Min Spacingを設定しておきます。
<img width="246" alt="スクリーンショット 2020-03-18 0.30.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/5eede330-e5cb-28a9-080a-f2591021b6b1.png">

### カスタムセル
カレンダーの日付部分のセルのファイルを生成します。
`MainCalendarViewCell`というクラス名にし、親クラスは`JTACDayCell`を入力して下さい。（バージョン7系ではJTAppleCellでした）
XIBファイルも同時に作成しておきます。
<img width="715" alt="スクリーンショット 2020-03-05 22.38.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/e918d84c-fc00-85e6-2e2b-3aa94a331b62.png">
`MainCalendarCell.xib`では、Labelは縦横中心に設置しております。
セルとセルの境界をわかるようにするため、背景に色を付けています。
<img width="211" alt="スクリーンショット 2020-03-11 23.45.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/468599c4-bf72-6481-3abf-d32d0c915e88.png">

セルのCustom Classは`MyCalendarViewCell`にして、同様にIdentifierにも同様にも`MyCalendarViewCell`を設定します。
<img width="259" alt="スクリーンショット 2020-03-12 0.15.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/e76cd53e-0724-b79d-569b-c722650614a6.png">


実装ですることは3つ
1. JTAppleCalendarをimport
2. MainCalendarViewCell.xibで置いたLabelをOutlet接続
3. configureメソッドを作成（カレンダークラスで使用）
 
まとめたものが以下です。

```swift:MainCalendarViewCell.swift
import UIKit
import JTAppleCalendar // 1

class MyCalendarViewCell: JTACDayCell {

    @IBOutlet weak var titleLabel: UILabel! // 2
    
    /// 3 セルの表示の設定をする
    /// ex.ラベルに日にちを入れる
    func configure(cellState: CellState) {
        titleLabel.text = cellState.text
    }
}
```

### カレンダービュー
次にカレンダービューの実装をします。
UIViewクラスを継承した`MyCalendarView.swift`を作成します。

ここでやることは、
1. JTAppleCalendarをimport
2. Main.storyboadで設置したカレンダービューをOutlet接続する
3. delegateとdatasourceを定義する 
4. cellの登録をする
です。

```swift:MyCalendarView.swift
import UIKit
import JTAppleCalendar // 1

class MyCalendarView: UIView {
    
    @IBOutlet var calendarView: JTACMonthView! // 2
    
    override func awakeFromNib() {
        // 3 delegateとdetasourceの定義
        calendarView.calendarDelegate = self
        calendarView.calendarDataSource = self

        // 4 MainCalendarCellの登録
        let nibName = UINib(nibName: "MyCalendarViewCell", bundle:nil)
        calendarView.register(nibName, forCellWithReuseIdentifier: "MyCalendarViewCell")
    }
}
```

### Delegate
上のメソッドは空の記述でも動きますが、下のメソッドと同様のコードを書く必要があるようです。
理由は[こちら](https://github.com/patchthecode/JTAppleCalendar/issues/553)のProblem 1を参照してください。

```swift:MainCalendarView.swift
extension MyCalendarView: JTACMonthViewDelegate {
    func calendar(_ calendar: JTACMonthView, willDisplay cell: JTACDayCell, forItemAt date: Date, cellState: CellState, indexPath: IndexPath) {
        let cell = cell as! MyCalendarViewCell
        cell.configure(cellState: cellState)
    }
    
    // cellの設定
    func calendar(_ calendar: JTACMonthView, cellForItemAt date: Date, cellState: CellState, indexPath: IndexPath) -> JTACDayCell {
        let cell = calendar.dequeueReusableCell(withReuseIdentifier: "MyCalendarViewCell", for: indexPath) as! MyCalendarViewCell
        cell.configure(cellState: cellState)
        return cell
    }
}
```

### Datasoure

```swift:MainCalendarView.swift
extension MyCalendarView: JTACMonthViewDataSource {
    // カレンダー作成に必要なパラメータの設定
    func configureCalendar(_ calendar: JTACMonthView) -> ConfigurationParameters {
        var current = Calendar.current
        current.locale = Locale(identifier: "ja_JP")
        current.timeZone = TimeZone(identifier: "Asia/Tokyo")!
        let date = Date()

        let startDate = date // 現在
        let endDate = current.date(byAdding: .month,
                                   value: +1,
                                   to: current.startOfDay(for: date)) //1月後

        let parameters = ConfigurationParameters(startDate: startDate,
                                                 endDate: endDate!,
                                                 numberOfRows: 5,
                                                 calendar: current,
                                                 firstDayOfWeek: .sunday)
        return parameters
    }
}
```

# 結果
これを実行すると、下記のような画面でカレンダーが表示されます。
<img width="270" alt="実行結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/8fe000fc-44bc-decf-cf25-8e1034255caa.png">
# おわりに
基本的にはバージョン7系のときと使い方は変わりませんでした。
オブジェクト名が変わっているので、そこは注意が必要なようですね。

# 参照
1. [\[開発日記\]JTAppleCalendarを使ってみた - Qiita](https://qiita.com/tanirei/items/4baa07d4905fd458500a)
2. https://patchthecode.com/
3. [IMPORTANT: Here are some of the changes in version 7+. It will cause some code breaks. ](https://github.com/patchthecode/JTAppleCalendar/issues/553)
4. [patchthecode/JTAppleCalendar - GitHub](https://github.com/patchthecode/JTAppleCalendar)