swiftfscalendar

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

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.

Solution

  • 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

    enter image description here

    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

    enter image description here