Adding events

Adding events – or adding a dot-view to signify an event on a date cell – is exactly the same as you would add a custom view to a UITableView or UICollectionView cell.

In the case of UICollectionView/UITableView, you would design the cell in the cellForItemAtIndexPath function based on the cell’s index, in relation the the dataSource’s index.

In the case of this library, it is exactly the same. The only difference is that instead of using a cell’s associated index, we use a cell’s associated date.

Creating the dot view

Lets use this sample code as our beginning point.

First, for better viewing, increase the constraint height of the calendar to 450.

Next, create the red dotView as seen below. Take note of the constraints used.

The dotView needs to look round, therefore set a cornerRadius for it. I use storyboard for simplicity, but code may be preferred.

Add an IBOutlet for the the dotView. Go to the DateCell class and add this code.

import JTAppleCalendar
import UIKit

class DateCell: JTAppleCell {
    @IBOutlet var dateLabel: UILabel!
    @IBOutlet var dotView: UIView!

Now connect your dotView IBOutlet on storyboard as seen below.

Run your app. It should look like this

Attaching events to your dotView

Now we only want the dot view to be visible for specific dates in our dataSource. The calendar library operates on dates and not indexes, therefore the dataSource should relate every cell to dates.

Lets add a DateFormatter to be used globally for events & the dataSource dictionary. DataSource will be explained below.

class ViewController: UIViewController {
    @IBOutlet var calendarView: JTAppleCalendarView!
    var calendarDataSource: [String:String] = [:]
    var formatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateFormat = "dd-MMM-yyyy"
        return formatter

Modify the configureCalendar function

extension ViewController: JTAppleCalendarViewDataSource {
    func configureCalendar(_ calendar: JTAppleCalendarView) ->; ConfigurationParameters {
        let startDate = "01-jan-2018")!
        let endDate = Date()
        return ConfigurationParameters(startDate: startDate, endDate: endDate)

Add this line of code

    func configureCell(view: JTAppleCell?, cellState: CellState) {
        guard let cell = view as? DateCell  else { return }
        cell.dateLabel.text = cellState.text
        handleCellTextColor(cell: cell, cellState: cellState)
        handleCellEvents(cell: cell, cellState: cellState)

The dataSource

Finally, let’s talk about population of the dataSource. Add the following code.

func populateDataSource() {
    // You can get the data from a server.
    // Then convert that data into a form that can be used by the calendar.
    calendarDataSource = [
        "07-Jan-2018": "SomeData",
        "15-Jan-2018": "SomeMoreData",
        "15-Feb-2018": "MoreData",
        "21-Feb-2018": "onlyData",
    // update the calendar

We need some way to associate the dateCells with the datasource. The best way to identify a cell is by Date, therefore I chose a dataSource with a date string as the key.

Now create the following function. It is responsible for determining the visibility of the dotView. If the date has an event, it will be visible, else it will be hidden.

    func handleCellEvents(cell: DateCell, cellState: CellState) {
        let dateString = formatter.string(from:
        if calendarDataSource[dateString] == nil {
            cell.dotView.isHidden = true
        } else {
            cell.dotView.isHidden = false

To test this code, finally add this line of code and run the app.

override func viewDidLoad() {
    calendarView.scrollDirection = .horizontal
    calendarView.scrollingMode   = .stopAtEachCalendarFrame
    calendarView.showsHorizontalScrollIndicator = false

Download the updated sample code.