Home

###Quick tutorial - How to setup the calendar

JTAppleCalendar is similar to setting up a UITableView with a custom cell.

There are two parts

1. The cell

---

Like a UITableView, the cell has 2 parts.

• First let's create a new xib file. I'll call mine CellView.xib. I will setup the bare minimum; a single UILabel to show the date. It will be centered with Autolayout constraints.

Do you need more views setup on your cell like: dots, animated selection view, custom images etc? No problem. Design the cell however you want. This repository has sample code which demonstrates how you can do this easily.

• Second , create a custom class for the xib. The new class must be a subclass of JTAppleDayCellView. I called mine CellView.swift. Inside the class setup the following:

    import JTAppleCalendar 
    class CellView: JTAppleDayCellView {
        @IBOutlet var dayLabel: UILabel!
    }

• Finally head back to your cellView.xib file and make the outlet connections.

• First, select the view for the cell
• Second, click on the identity inspector
• Third, change the name of the class to one you just created: CellView
• Then connect your UILabel to your dayLabel outlet

2. The calendarView

---

• This step is easy. Go to your Storyboard and add a UIView to it. Set the class of the view to be JTAppleCalendarView. Then setup an outlet for it to your viewController. You can setup your autolayout constrainst for the calendar view at this point.

Whats next?

Similar to UITableView protocols, your viewController has to conform to 2 protocols for it to work

• JTAppleCalendarViewDataSource

    // This method is required. You provide a startDate, endDate, and a calendar configured to your liking.
    func configureCalendar(calendar: JTAppleCalendarView) -> (startDate: NSDate, endDate: NSDate, calendar: NSCalendar)

• JTAppleCalendarViewDelegate

    // These methods are optional.
    // I tried to keep them as close to UITableView protocols as possible to keep them self descriptive

    func calendar(calendar : JTAppleCalendarView, canSelectDate date : NSDate, cell: JTAppleDayCellView, cellState: CellState) -> Bool
    func calendar(calendar : JTAppleCalendarView, canDeselectDate date : NSDate, cell: JTAppleDayCellView, cellState: CellState) -> Bool
    func calendar(calendar : JTAppleCalendarView, didSelectDate date : NSDate, cell: JTAppleDayCellView?, cellState: CellState) -> Void
    func calendar(calendar : JTAppleCalendarView, didDeselectDate date : NSDate, cell: JTAppleDayCellView?, cellState: CellState) -> Void
    func calendar(calendar : JTAppleCalendarView, didScrollToDateSegmentStartingWith date: NSDate?, endingWithDate: NSDate?) -> Void
    func calendar(calendar : JTAppleCalendarView, isAboutToDisplayCell cell: JTAppleDayCellView, date:NSDate, cellState: CellState) -> Void

Setting up the delegate methods

Lets setup the delegate methods in your viewController. I have called my viewController simply ViewController. Also, I prefer setting up my protocols on my controllers using extensions to keep my code neat, but you can put it where ever youre accustomed to. This function needs 3 variables returned.

• Start boundary date
• End boundary date
• Calendar which you should configure to the time zone of your liking.

extension ViewController: JTAppleCalendarViewDataSource, JTAppleCalendarViewDelegate  {
    // Setting up manditory protocol method 
    func configureCalendar(calendar: JTAppleCalendarView) -> (startDate: NSDate, endDate: NSDate, calendar: NSCalendar) {
        // Assuming you have a: let formatter = NSDateFormatter() declared in your view controller.
        // The following demonstrates that you can provide dates both from NSDate() and NSDateFormatter()
        // For purposes of this tutorial, if you do not have a formatter declared, then simply supply what ever date you want or create a formatter now. Just make sure that the start date is less than the endDate.
        let firstDate = formatter.dateFromString("2016 01 05") 
        let secondDate = NSDate()
        let aCalendar = NSCalendar.currentCalendar() // Properly configure your calendar to your time zone here
        return (startDate: firstDate!, endDate: secondDate, calendar: aCalendar)
    }
}

Now that JTAppleCalendar knows its startDate, endDate, and calendarFormat, Let's setup up the protocol method to allow us to see the beautiful date cells we have designed earlier.

Just like UITableViewCell is about to be displayed on a tableView protocol method, so is this JTAppleDayCellView about to be displayed. We will now apply some custom configuration to our cell before it is displayed on screen. Add the following code to your extension.

    func calendar(calendar: JTAppleCalendarView, isAboutToDisplayCell cell: JTAppleDayCellView, date: NSDate, cellState: CellState) {
        (cell as! CellView).setupCellBeforeDisplay(cellState, date: date)
    }

Now you have not declared the function setupCellBeforeDisplay:date: on your custom CellView class as yet, so let's head over to that class and implement it. Setup the following code shown below.

    import JTAppleCalendar

    class CellView: JTAppleDayCellView {
        @IBOutlet var dayLabel: UILabel!
            var normalDayColor = UIColor.blackColor()
            var weekendDayColor = UIColor.grayColor()


            func setupCellBeforeDisplay(cellState: CellState, date: NSDate) {
                // Setup Cell text
                dayLabel.text =  cellState.text

                // Setup text color
                configureTextColor(cellState)
            }

            func configureTextColor(cellState: CellState) {
                if cellState.dateBelongsTo == .ThisMonth {
                    dayLabel.textColor = normalDayColor
                } else {
                    dayLabel.textColor = weekendDayColor
            }
        }
    }

Your cell now has the ability to display text and color based on which day of the week it is. One final thing needs to be done. The Calender does not have its delegate and datasource setup. Head to your ViewController class, and add following code:

    @IBOutlet weak var calendarView: JTAppleCalendarView! // Don't forget to hook up the outlet to your calendarView on Storyboard
    override func viewDidLoad() {
        super.viewDidLoad()
            self.calendarView.dataSource = self
            self.calendarView.delegate = self
            self.calendarView.registerCellViewXib(fileName: "CellView")
        }