3

I am using JTAppleCalendar in my iOS application but I am finding it difficult to implement headers that show the month and year at the top of the calendar as a conventional calendar normally would. I have followed instructions in the documentation but I am still finding it difficult despite managing to add 'headers' to show the days of the week albeit I feel maybe not correctly. For anyone who has implemented this library before, can I get some help how to do this? Or maybe another calendar you have used that has an easier way to accomplish this?

I want the screen to look a little like this: enter image description here

While mine currently looks like this: enter image description here

Documentation: https://patchthecode.github.io/Headers/

I implement the days of the week as so:

    // 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 = "S           M           T           W           T           F           S"
}
Nouman
  • 585
  • 1
  • 11
  • 24
  • Hi, before i answer your question, can you let me know this: Do you want your S|M|T|W|T|F|S header to scroll when you scroll the calendar? AND do you want to Month and Year Label to remain stationary when you scroll the calendar? – Just a coder Apr 08 '17 at 15:41
  • Hi, yes well i'm trying to make it scroll when you scroll and the days of the week to scroll with that particular month and the same for the month/year – Nouman Apr 08 '17 at 16:55
  • I just posted an answer. But if you need more help you can always join [HERE](https://gitter.im/patchthecode/JTAppleCalendar) – Just a coder Apr 08 '17 at 17:56

1 Answers1

5

I think you just made this a whole lot more difficult than it should be.

What you saw on the tutorial site was an example Of how you can setup a header with a simple UILabel on it called title. You do not have to follow this exactly if your calendar design is different. Simply design it however you wish.

It seems that what you want is not a UILabel. You want 7 labels; each representing a day of the week. The easiest way to do this is just to create 7 UILabels inside of a Horizontal Stackiew. StackView's spacing should be set to full and should be set to fill equally. Then all you have to do is click on the individual labels and set their alignment to Center.

enter image description here

Make the constraints of the StackView stretch to the ends of the headerView. Done. Your S|M|T|W|T|F|S view is complete without hard coding the spaces; which is a bad thing to do.

Next it seems you want another 2 labels. One for the Month, and another for the Year. So create those labels in the header view, and then create the outletLets for them. Then you can properly set them up in the following function.

func calendar(_ calendar: JTAppleCalendarView, willDisplaySectionHeader header: JTAppleHeaderView, range: (start: Date, end: Date), identifier: String) {
}
Just a coder
  • 15,480
  • 16
  • 85
  • 138
  • 1
    Thank you so much for your help! – Nouman Apr 09 '17 at 02:19
  • Currently using version 7.0 of the JTAppleCalendar. Suppose I have a UILabel which is supposed to show the month. How do I set the month in this function? I am not well versed in swift – Ajil O. Dec 18 '17 at 13:34
  • @patchthecode.com Great for the answer but currently this function is not available at the moment and I cannot achieve it as needed! Another help please! – EK Chhuon Jun 25 '19 at 07:40
  • 1
    @EKChhuon youre probably using older version. Check here https://patchthecode.com/jtapplecalendar-home/headers/ – Just a coder Jun 25 '19 at 08:56
  • Many thank you for reply. Now I could solve the problem by using this function for outside Header instead. `func calendar(_ calendar: JTAppleCalendarView, didScrollToDateSegmentWith visibleDates: DateSegmentInfo) { monthTitle.text = formatter.string(from: visibleDates.monthDates.first!.date) }` However, my header title does't change on first load until we scroll it back and forth. How can I solve this? @patchthecode.com – EK Chhuon Jun 25 '19 at 09:21
  • Did you download the sample app on that link i sent you? It is located at the bottom of the page. The Header correctly updates on first load. Can you use that as an example? – Just a coder Jun 25 '19 at 15:14