Help us understand the problem. What is going on with this article?

JTAppleCalendar(v8.0.3)をもう少しさわってみる

はじめに

以前に書いた記事の続きです。
https://qiita.com/ta9yamakawa/items/850aada73153ba860ad9

カレンダーの表示をとりあえず表示するとこまで行ったので、さらにカスタマイズしてよりカレンダーっぽくしてみます。
公式チュートリアルからよく使いそうなところを掻い摘んでやってみます。
※ 以前のカレンダーでは5行表示をしていますが、6行表示に変更しています。

実装

別月の日にちを区別する

例えば4月の表示をしたいとき、月初の週に3月の31日が入ったり、月末の週に4月の1日が入ったりすることがあります。
この時、別月の日にちだと見ただけでわかるようにします。

MyCalendarViewCell.swift
    func configure(cellState: CellState) {

        self.titleLabel.text = cellState.text
        configureTextColor(cellState: cellState) // 追加
    }

    /// セルの文字色を設定
    func configureTextColor(cellState: CellState) {
       if cellState.dateBelongsTo == .thisMonth {
          titleLabel.textColor = UIColor.black
       } else {
          titleLabel.textColor = UIColor.gray
       }
    }

こうすると、下記画像の青色の枠のようになります。

ちなみに消すこともできます。

if cellState.dateBelongsTo == .thisMonth {
   isHidden = false
} else {
   isHidden = true
}

スクロールの制御をする

デフォルトの設定だと縦にスクロールされるので横にスクロールされるようにします。
また、カレンダーが連続してスクロールされるので、スクロールするときにひと月単位で見たいときは下記の設定をします。

MyCalendarView.swift
    override func awakeFromNib() {
        /*
        省略
        */
        calendarView.scrollDirection = .horizontal // 横向きにスクロール
        calendarView.scrollingMode = .stopAtEachCalendarFrame // 月単位でのスクロール
        /*
        省略
        */
    }

日付を選択した時のアクションを追加する

選択状態によって、その日にちのセルを表示/非表示を切り替えるようにしてみます。下記メソッドを作成し、configureメソッドの中で呼び出します。

MyCalendarViewCell.swift
    func handleCellSelected(cellState: CellState) {
        if cellState.isSelected {
            isHidden = true
        } else {
            isHidden = false
        }
    }

日付セルが選択されたときと選択解除されたときにもConfigureの処理を呼ぶようにします。

MyCalendarView.swift
    func calendar(_ calendar: JTACMonthView, didSelectDate date: Date, cell: JTACDayCell?, cellState: CellState, indexPath: IndexPath) {
        guard let cell = cell as? MyCalendarViewCell else {
            return
        }
        cell.configure(cellState: cellState)
    }

    func calendar(_ calendar: JTACMonthView, didDeselectDate date: Date, cell: JTACDayCell?, cellState: CellState, indexPath: IndexPath) {
        guard let cell = cell as? MyCalendarViewCell else {
            return
        }
        cell.configure(cellState: cellState)
    }

成功すると以下の画像のようになります。選択した日にちの部分が非表示になりましたね。

おわりに

公式チュートリアル(7.1.7)の4までを8系に書き換えながら進めてみましたが、日付の選択やスクロールの設定は比較的簡単にできました。

参照

  1. JTAppleCalendar(v8.0.3)を簡単にさわってみる
  2. https://patchthecode.com/
  3. Cell not selected right away on tap
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away