はじめに
以前に書いた記事の続きです。
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系に書き換えながら進めてみましたが、日付の選択やスクロールの設定は比較的簡単にできました。