<commit_before>---
layout: default
---


### Quick tutorial - How to setup the calendar
**Note**: If at any point in this tutorial, you believe that you have already grasped the concept, then you can drop out at any time 👍 

________________

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

<img width="564" alt="calendararchitecture" src="https://cloud.githubusercontent.com/assets/2439146/19026742/4b62d618-88de-11e6-90c8-c44a4195ddd2.png">

There are two parts: The <b><font color="red">Cell</font></b>, and the <b><font color="green">CalendarView</font></b>

##### 1. <font color="red">The cell</font>
---
Like a UITableView, the cell also has 2 sub-parts: a xib file, and a class. 

* 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.

Click on (XCode 8) File -> New -> File -> View

 <img width="550" alt="screen shot 2016-10-04 at 2 52 19 pm" src="https://cloud.githubusercontent.com/assets/2439146/19093972/6f6eeda2-8a42-11e6-8f78-7f8f45dbfe7b.png">
 
Let's save this as `CellView.xib`. 

Your view may look very large, so to make it smaller, click on the View -> then attributes inspector, and change the size to `freeform` as shown in the image below. Then adjust the size to something smaller

<img width="660" src="https://cloud.githubusercontent.com/assets/2439146/19748042/430e767a-9b94-11e6-8d04-c52bd361cb22.png">



Drag a `UILabel` unto the view. And then center it using autolayout constraints.

<img width="201" alt="cellxib" src="https://cloud.githubusercontent.com/assets/2439146/19026781/c3793318-88de-11e6-8727-04b773b3700c.png">



* Second , create a class for the xib. The new class must be a subclass of `JTAppleDayCellView`. I created a new file for my class and called it `CellView.swift`.  

**Paste the following code inside your new class.**

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

Now let's head back to your `cellView.xib` file and make the outlet connections.

- First,  select the root-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

<img width="683" alt="setupinstructions" src="https://cloud.githubusercontent.com/assets/2439146/19026812/304803d4-88df-11e6-9871-53d75b32a247.png">


##### 2. <font color="green">The calendarView</font>
---
* This step is easy. Go to your Storyboard and add a `UIView` to it. You can also setup your autolayout constrainst for the calendar view at this point.

  Then, using the same procedure like you did above for the `CellView.xib` diagram above, Set the subclass of this UIView to be `JTAppleCalendarView`. Then setup an outlet for it to your viewController. I called my outlet `calendarView`. 
  
  If you haven't created your ViewController class yet, do so now. I have called my viewController class simply `ViewController`.

**Paste this code in your ViewController class**

```swift
import JTAppleCalendar
class ViewController: UIViewController {
    @IBOutlet weak var calendarView: JTAppleCalendarView!
}
```

After pasting the above code, do not forget to now connect this outlet to the JTAppleCalendarView on storyboard.

## Whats next?
___

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

* JTAppleCalendarViewDataSource
* JTAppleCalendarViewDelegate


##### Setting up the DataSource
The data-source protocol method is manditory.
Let's set this up now on your ViewController class. 

I prefer setting up my protocols on my controllers using extensions to keep my code neat, but you can put it where ever you're accustomed to. 

The data-source protocol has only one function which needs to return a value of type `ConfigurationParameters`. This value requires 7 sub-values.

**Paste the following code in your project.**

```swift
extension ViewController: JTAppleCalendarViewDataSource, JTAppleCalendarViewDelegate {
    func configureCalendar(_ calendar: JTAppleCalendarView) -> ConfigurationParameters {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy MM dd"
        
        let startDate = formatter.date(from: "2016 02 01")! // You can use date generated from a formatter
        let endDate = Date()                                // You can also use dates created from this function        
        let parameters = ConfigurationParameters(startDate: startDate,
                                                 endDate: endDate,
                                                 numberOfRows: 6,
                                                 calendar: Calendar.current
                                                 generateInDates: .forAllMonths,
                                                 generateOutDates: .tillEndOfGrid,
                                                 firstDayOfWeek: .sunday)
        return parameters
    }
}
```

- **Start boundary date**: date calendar will start from
- **End boundary date**: date calendar will end
- **Rows per month**: The number of rows per month you want displayed
- **In-dates**: Generate in dates
- **Out-Dates**: Generate out dates
- **First day of week**: Determine which is the first day of the week to start with 

The parameters should be self explainatory. The only ones that might be unfamiliar to you are: `in-dates` and `out-dates`. The following diagram will bring you up to speed.<commit_msg>Added missing comma<commit_after>---
layout: default
---


### Quick tutorial - How to setup the calendar
**Note**: If at any point in this tutorial, you believe that you have already grasped the concept, then you can drop out at any time 👍 

________________

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

<img width="564" alt="calendararchitecture" src="https://cloud.githubusercontent.com/assets/2439146/19026742/4b62d618-88de-11e6-90c8-c44a4195ddd2.png">

There are two parts: The <b><font color="red">Cell</font></b>, and the <b><font color="green">CalendarView</font></b>

##### 1. <font color="red">The cell</font>
---
Like a UITableView, the cell also has 2 sub-parts: a xib file, and a class. 

* 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.

Click on (XCode 8) File -> New -> File -> View

 <img width="550" alt="screen shot 2016-10-04 at 2 52 19 pm" src="https://cloud.githubusercontent.com/assets/2439146/19093972/6f6eeda2-8a42-11e6-8f78-7f8f45dbfe7b.png">
 
Let's save this as `CellView.xib`. 

Your view may look very large, so to make it smaller, click on the View -> then attributes inspector, and change the size to `freeform` as shown in the image below. Then adjust the size to something smaller

<img width="660" src="https://cloud.githubusercontent.com/assets/2439146/19748042/430e767a-9b94-11e6-8d04-c52bd361cb22.png">



Drag a `UILabel` unto the view. And then center it using autolayout constraints.

<img width="201" alt="cellxib" src="https://cloud.githubusercontent.com/assets/2439146/19026781/c3793318-88de-11e6-8727-04b773b3700c.png">



* Second , create a class for the xib. The new class must be a subclass of `JTAppleDayCellView`. I created a new file for my class and called it `CellView.swift`.  

**Paste the following code inside your new class.**

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

Now let's head back to your `cellView.xib` file and make the outlet connections.

- First,  select the root-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

<img width="683" alt="setupinstructions" src="https://cloud.githubusercontent.com/assets/2439146/19026812/304803d4-88df-11e6-9871-53d75b32a247.png">


##### 2. <font color="green">The calendarView</font>
---
* This step is easy. Go to your Storyboard and add a `UIView` to it. You can also setup your autolayout constrainst for the calendar view at this point.

  Then, using the same procedure like you did above for the `CellView.xib` diagram above, Set the subclass of this UIView to be `JTAppleCalendarView`. Then setup an outlet for it to your viewController. I called my outlet `calendarView`. 
  
  If you haven't created your ViewController class yet, do so now. I have called my viewController class simply `ViewController`.

**Paste this code in your ViewController class**

```swift
import JTAppleCalendar
class ViewController: UIViewController {
    @IBOutlet weak var calendarView: JTAppleCalendarView!
}
```

After pasting the above code, do not forget to now connect this outlet to the JTAppleCalendarView on storyboard.

## Whats next?
___

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

* JTAppleCalendarViewDataSource
* JTAppleCalendarViewDelegate


##### Setting up the DataSource
The data-source protocol method is manditory.
Let's set this up now on your ViewController class. 

I prefer setting up my protocols on my controllers using extensions to keep my code neat, but you can put it where ever you're accustomed to. 

The data-source protocol has only one function which needs to return a value of type `ConfigurationParameters`. This value requires 7 sub-values.

**Paste the following code in your project.**

```swift
extension ViewController: JTAppleCalendarViewDataSource, JTAppleCalendarViewDelegate {
    func configureCalendar(_ calendar: JTAppleCalendarView) -> ConfigurationParameters {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy MM dd"
        
        let startDate = formatter.date(from: "2016 02 01")! // You can use date generated from a formatter
        let endDate = Date()                                // You can also use dates created from this function
        let parameters = ConfigurationParameters(startDate: startDate,
                                                 endDate: endDate,
                                                 numberOfRows: 6,
                                                 calendar: Calendar.current,
                                                 generateInDates: .forAllMonths,
                                                 generateOutDates: .tillEndOfGrid,
                                                 firstDayOfWeek: .sunday)
        return parameters
    }
}
```

- **Start boundary date**: date calendar will start from
- **End boundary date**: date calendar will end
- **Rows per month**: The number of rows per month you want displayed
- **In-dates**: Generate in dates
- **Out-Dates**: Generate out dates
- **First day of week**: Determine which is the first day of the week to start with 

The parameters should be self explainatory. The only ones that might be unfamiliar to you are: `in-dates` and `out-dates`. The following diagram will bring you up to speed.
{'fraction_non_alphanumeric': 0.08448321908661978, 'fraction_numerical': 0.04059467639989317, 'mean_word_length': 3.247258979206049, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 47, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '455312', 'n_tokens_mistral': 3459, 'n_tokens_neox': 3025, 'n_words': 1297}