How can you change the Header View title font on FSCalendar and add a Subtitle?

Question

I am trying to set the header title font to a much larger style font more like a big banner, and set a subtitle underneath it of the year.

extension FSCalendar {
func customizeCalendar() {
    appearance.caseOptions = [.headerUsesUpperCase]
    appearance.headerDateFormat = "MMM"
    headerHeight = 100
    
    let header = FSCalendarHeaderView()
    header.largeContentTitle?.append("aldjsf")
   
    
    appearance.headerTitleFont = UIFont(name: "SFProDisplay-Bold", size: 200)
    appearance.headerTitleColor = COLOR_BLACK

    appearance.headerTitleOffset = CGPoint(x: 0, y: 0)
    appearance.headerMinimumDissolvedAlpha = 0.6
    
    appearance.todayColor = COLOR_PRIMARY
    appearance.todaySelectionColor = COLOR_BLACK
    
    appearance.titleFont = UIFont(name: "SFProDisplay-Bold", size: 11)
    appearance.titleSelectionColor = COLOR_BLACK
    
    appearance.weekdayFont = UIFont(name: "SFProText-Semibold", size: 11)
    appearance.weekdayTextColor = COLOR_GREY
    appearance.eventDefaultColor = COLOR_BLACK
    
    appearance.subtitleFont = UIFont(name: "SFProDisplay-Bold", size: 20)
   
    
    appearance.selectionColor = COLOR_BLACK
    
    
}

}

Even though I am accessing the property .headerTitleFont it doesn't do anything ? I have tried all kinds of sizes. Any help appreciated, thank you.

SamB · Accepted Answer · 2021-09-15T03:36:49.953

Issue with the Font sizes

Seems the font you have mentioned is not available in the simulator/device thus it defaults to a font. I tried your approach with a font which is pre-installed and the headerTitle got changed as expected. List of pre-installed fonts

appearance.headerTitleFont = UIFont(name: "Noteworthy Light", size: 60)

This is how it appears with the above font

Adding a subtitle to the headerView

With the available API, it seems you cannot set a subtitle in the headerView. But alternatively you can achieve it like below by customizing the FSCalendarHeaderCell.titleLabel.attributedText. Note that below code only change the text of collectionView.visibleCells, so you will also have to execute this code when you scroll the headerView

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    for cell in calendar.calendarHeaderView.collectionView.visibleCells {
        //create an attributedString with two lines and different font sizes
        let attributedString = NSMutableAttributedString(string: "Sep\n2021\n")
        
        let attributes0: [NSAttributedString.Key : Any] = [
            .foregroundColor: UIColor.yellow,
            .font: UIFont(name: "HelveticaNeue", size: 40)!
        ]
        let attributes1: [NSAttributedString.Key : Any] = [
            .foregroundColor: UIColor.systemGray2
        ]
        
        attributedString.addAttributes(attributes0, range: NSRange(location: 0, length: 3))
        attributedString.addAttributes(attributes1, range: NSRange(location: 4, length: 4))
        
        //replace titleLabel attributedText with the one we created
        (cell as! FSCalendarHeaderCell).titleLabel.attributedText = attributedString
    }
}

This is how it appears after changing the attributedText of the FSCalendarHeaderCell.titleLabel

This is Awesome! I ended up setting headerHeight = 0 and making the whole thing from scratch. But this would have been better for the long term, I am going to update to this now. Thank you. — Christopher, Sep 15 '21 at 21:57

How can you change the Header View title font on FSCalendar and add a Subtitle?

1 Answers1