[開発日記]JTAppleCalendarでもう少しカスタマイズしてみた①~月の表示~

前回は、[JTAppleCalendar](https://github.com/patchthecode/JTAppleCalendar)を使って、簡単にカレンダーの表示をしてみました、(前回の記事は[こちら](https://qiita.com/tanirei/items/4baa07d4905fd458500a))
まだ、見栄えは十分ではないので、もう少し整えていこうと思います。

月の表示
------------
今の状態だと、今見ているのが何年の何月かわかりません...なので、まずはそれを表示できるようにしようと思います。こんな感じに変えていきます。

<img width="250" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/95908/e25c8510-b0b3-51ac-ae13-21e6363e0507.png">　→　→　→　<img width="250" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/95908/7a7b5782-b17a-be7c-ec45-7577b8c09bf7.png">

### 1.NavigationBarを追加
まずは、```Main.storyboard```に月を表示するためのNavigationBarを追加していきましょう。
今回は、カレンダーに使った色と同じ色になるようにします。つい、CalendarのViewControllerで編集しようとして、あれ！？できない！？って焦りますが、NavigationControllerの方で編集です。知っててもたまに間違える...。
また、デフォルトでは半透明色になるので、今回はそれも解除します。(Translucentのチェックを外す。)

<img width="1000" alt="Main.storyboard — Edited-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95908/417ac37c-3177-eb42-d2f1-3ad2c78676ae.jpeg">

### 2.MainCalendarViewDelegateの作成・設定
今回、```MainCalendarView```に、JTAppleCalendarのカレンダーである```calendarView```があり、calendarViewがスクロールされた時に呼ばれるdelegateは```MainCalendarView```内にあります。
つまり、```calendarView```がスクロールされた時は、```MainCalendarView```がそれを感知して、何かしらの処理を実行できます。
しかし、今の状態では、```calendarView```がスクロールされた事を、```ViewController```が感知し処理を実行(今回は月を表示)する事ができません。なので、MainCalendarViewからViewControllerに継承できるように、Delegateを設定しましょう。
<img width="746" alt="Main.storyboard — Edited-2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/95908/5ba598ff-b4f0-92b8-5a45-f57216da8f93.jpeg">

まず、```MainCalendarView.swift```にMainCalendarViewDelegateを書いていきます。

```swift:MainCalendarView.swift
protocol MainCalendarViewDelegate: class {
    func changeMonth(month: String)
}
```

続いて、```MainCalendarView```にdelegateを宣言しましょう。現在の日付を保存しておく変数として、```currentMonth```も宣言します。

```swift:MainCalendarView.swift
var currentMonth: String!
var calendarDelegate: MainCalendarViewDelegate?
```

ここで、```currentMonth```を変更する```changeCurrentMonth```メソッドも書いておきましょう。

```swift:MainCalendarView.swift
    func changeCurrentMonth(from visibleDates: DateSegmentInfo) {
        guard let startDate = visibleDates.monthDates.first?.date else {
            return
        }
        let month = Calendar(identifier: .gregorian).dateComponents([.month], from: startDate).month
        let monthName = DateFormatter().monthSymbols[Int(month!)-1]
        let year = Calendar(identifier: .gregorian).component(.year, from: startDate)
        currentMonth = monthName + " " + String(year)
    }
```

では、次に、実際に、スクロールされた時に、```monthChanged```メソッドを実行するようにコードを書きます。```monthChangedextension MainCalendarView: JTAppleCalendarViewDelegate```の中に書きます。

```swift:MainCalendarView.swift
    func calendar(_ calendar: JTAppleCalendarView, didScrollToDateSegmentWith visibleDates: DateSegmentInfo) {
        self.changeCurrentMonth(from: visibleDates)
        calendarDelegate?.changeMonth(month: currentMonth)
    }
```
これで、下準備は全て終わりです。月表示のコードを書いていきましょう。

### 3.ViewControllerで月表示
まず、MainCalendarViewを宣言します。関連付けも忘れずに。
合わせて、現在の月をいれておく変数```currentMonth```も宣言しておきましょう。```currentMonth```が変更されたら、navigationItemのタイトルが変更されるようにしておきます。

```swift:ViewController.swift
    @IBOutlet var mainCalendar: MainCalendarView!
    var currentMonth: String! = String() {
        didSet {
            self.navigationItem.title = currentMonth
        }
    }
```

```viewDidLoad()```内にdelegateの設定をします。ついでに、今日の日付にスクロールするコードも入れておきましょう。(デフォルトは、表示の限界設定している過去の日付が最初に表示される。)

```swift:ViewController.swift
mainCalendar.calendarDelegate = self
mainCalendar.calendarView.scrollToDate(Date())
```

最後に、```currentMonth```を実際に変更します。

```swift:ViewController.swift
extension ViewController: MainCalendarViewDelegate {
    func changeMonth(month: String) {
        currentMonth = month
    }
}
```

### 完成！
しっかり表示されている月が表示されています！
<img width="250" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/95908/7a7b5782-b17a-be7c-ec45-7577b8c09bf7.png">