FSCalendar là gì?
FSCalendar là một thư viện lịch dành cho iOS có thể tuỳ chỉnh, làm việc tương thích với cả Objective-C và Swift.
Mọi người thể tìm hiểu thêm tại đây https://github.com/WenchaoD/FSCalendar
Một vài hình ảnh được chia sẻ từ FSCalendar
iPhone
iPad
Áp dụng Page View Controller cho FSCalendar.
Mục đích là có thể swipe sang trái, sang phải ở nội dung để có thể thay đổi nội dung theo ngày.
Sau đây mình sẽ hướng dẫn các bạn làm.
Các view controller
- DayModeViewController - Chứa calendar và pageViewController
- DayModePageViewController - Được kế thừa từ UIPageViewController, dùng để hiện thực nội dung cũng như bắt sự kiện swipe trái / phải.
- DayModeContentViewController - Chứa các events được filter theo từng ngày.
DayModeContentViewController
Trong ContentViewController, tạo 1 tableView để hiện thỉ nội dung. Như ví dụ ở đây chỉ tạo nội dung về events, các bạn có thể tuỳ biến việc nội dung hiện thị ra sao.
// MARK:- UITableViewDataSource
extension DayModeContentViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 20 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = UITableViewCell.init(style: .subtitle, reuseIdentifier: nil) cell.imageView?.image = UIImage(named: "icon_cat") cell.textLabel?.text = "\(indexPath.row + 1)/ Lorem ipsum dolor sit er elit lamet" if let date = date { cell.detailTextLabel?.text = dateFormatter.string(from: date) } return cell }
} // MARK:- UITableViewDelegate
extension DayModeContentViewController: UITableViewDelegate { func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { if let date = date { let label = UILabel() label.text = " ? \(dateFormatter.string(from: date))" label.textColor = .white label.backgroundColor = .lightGray return label } return nil } func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 45 }
}
DayModePageViewController
Tại đây mình có tạo một protocol để bắt sự kiện swipe và callback nội dung về DayModeViewController
protocol DayModePageDelegate: NSObject { func swipeDate(date: Date?) func swipeNextDate(date: Date?) func swipePreviousDate(date: Date?)
}
Trong DayModePageViewController sẽ kế thừa UIPageViewControllerDataSource và UIPageViewControllerDelegate
extension DayModePageViewController: UIPageViewControllerDataSource, UIPageViewControllerDelegate { // Khởi tạo Content View Controller dựa vào date func createContentViewController(_ date: Date) -> UIViewController { let vc = DayModeContentVC() vc.date = date return vc } // Lấy View Controller đang hiện thị ở PageViewController func getCurrentViewController() -> DayModeContentVC? { return viewControllers?.first as? DayModeContentVC } // DataSource & Delegate - Khởi tạo Content của ngày hôm qua func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { return createContentViewController(self.previousDay) } // DataSource & Delegate - Khởi tạo Content của ngày kế tiếp func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { return createContentViewController(self.nextDay) } // DataSource & Delegate - Sự kiện sau khi swipe thành công, sẽ trả dữ liệu về trang DayModeViewController để xử lý các mong muốn. func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { if finished, let delegate = dayModePageDelegate, let vc = getCurrentViewController() { currentDate = vc.date ?? currentDate delegate.swipeDate(date: vc.date) } }
}
DayModeViewController
Khởi tạo một số biến cần thiết.
var calendar: FSCalendar! //Tạo một calendar ở header
var containerView: UIView! //Chứa view của pageViewController
var pageViewController: DayModePageViewController!
Gắn pageViewController vào containerView
pageViewController = DayModePageViewController(selectedDay: calendar.selectedDate ?? Date())
pageViewController.dayModePageDelegate = self
addChildViewController(pageViewController) containerView.addSubview(pageViewController.view)
pageViewController.didMove(toParentViewController: self)
Nhận sự kiện từ PageViewController thông qua delegate
// MARK:- DayModePageDelegate
extension DayModeViewController: DayModePageDelegate { func swipeDate(date: Date?) { calendar.select(date, scrollToDate: true) } func swipeNextDate(date: Date?) { } func swipePreviousDate(date: Date?) { }
}
Kết quả
Ngoài ra các bạn có thể customize thêm nhiều thứ khác mà FSCalendar hỗ trợ.
Full SourceCode:
https://github.com/tranhanhuy/FSCalendar/tree/project/day-mode
Một vài hình ảnh:
