What kind of header do you want to implement? There are 2 types.

1. Outside headers

You can implement headers outside of the calendar. These headers will not scroll with calendar-view and have nothing to do with the calendar as they are created by yourself.

The following is an example of such a header created with 7 labels in a stack view.

2. Inside headers

Inside headers are generated by the calendar. These headers scroll with the calendar. You can implement multiple headers, or single headers.

(A) Implementing single headers

screen shot 2016-10-04 at 2 52 19 pm

Let’s save this as PinkSectionHeaderView.xib. Your view may look a bit huge, so click on theView -> then attributes inspector, and change the size to freeform. Then adjust the size to your liking. Also, add a label in the center of the view and center it with autolayout constraints. I made the back color pink.

   import JTAppleCalendar
   class PinkSectionHeaderView: JTAppleHeaderView {
       @IBOutlet var title: UILabel!
calendarView.registerHeaderView(xibFileNames: ["PinkSectionHeaderView"]).
   // This sets the height of your header
   func calendar(_ calendar: JTAppleCalendarView, sectionHeaderSizeFor range: (start: Date, end: Date), belongingTo month: Int) -> CGSize {
      return CGSize(width: 200, height: 50)
   // This setups the display of your header
   func calendar(_ calendar: JTAppleCalendarView, willDisplaySectionHeader header: JTAppleHeaderView, range: (start: Date, end: Date), identifier: String) {
      let headerCell = (header as? PinkSectionHeaderView)
      headerCell?.title.text = "Hello Header"


(B) Implementing multiple headers

// Put this code in your viewDidLoad function
calendarView.registerHeaderView(xibFileNames: ["PinkSectionHeaderView", "WhiteSectionHeaderView"])

// Also add this delegate function.
// This tells the calendar which headerView you want displayed for a particular date.  
// The names should be the same as what was registered.
func calendar(_ calendar: JTAppleCalendarView, sectionHeaderIdentifierFor range: (start: Date, end: Date), belongingTo month: Int) -> String {
    if month % 2 > 0 {
       return "WhiteSectionHeaderView"
    return "PinkSectionHeaderView"