FSCalendar content getting squished when I switch scope to month

Question

My FSCalendar's content shrinks when I switch its scope from week to month if there is a view that's constrained to its bottom anchor.

Here is a quick gif to show what exactly is happening

GIF

I have tried everything at this point. Using calendar.setScope() instead of calendar.scope =, constraining attachedToCalendarView.topAnchor to calendar.bottomAnchor calendar.contentView.bottomAnchor, and calendar.daysContainer.bottomAnchor, even turning attachedToCalendarView 's constraints on and off depending on whether it's week scope or scope month.

Not sure what else to try. Here is the code:

import UIKit
import FSCalendar

class TestController : UIViewController, FSCalendarDataSource, FSCalendarDelegate, FSCalendarDelegateAppearance {

fileprivate weak var calendar: FSCalendar!

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    setUp()
}


@objc func switchCalendarScope(){
    if self.calendar.scope == FSCalendarScope.month {
        self.calendar.scope = FSCalendarScope.week

    } else {
        self.calendar.scope = FSCalendarScope.month
    }

}

func setUp(){

    let calendar = FSCalendar()
    calendar.dataSource = self
    calendar.delegate = self
    self.calendar = calendar

    self.calendar.scope = .week
    self.calendar.locale = Locale(identifier: "en_EN")
    self.calendar.calendarHeaderView.calendar.locale =  Locale(identifier: "en_EN")
    self.calendar.adjustsBoundingRectWhenChangingMonths = true

    let testingView = UIView()
    testingView.backgroundColor = .red

    let attachedToCalendarView = UIView()
    attachedToCalendarView.backgroundColor = .blue

    view.addSubview(calendar)
    view.addSubview(testingView)
    view.addSubview(attachedToCalendarView)

    self.calendar.translatesAutoresizingMaskIntoConstraints = false
    self.calendar.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    self.calendar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    self.calendar.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
    self.calendar.heightAnchor.constraint(equalToConstant: 300).isActive = true

    testingView.translatesAutoresizingMaskIntoConstraints = false
    testingView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    testingView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
    testingView.heightAnchor.constraint(equalToConstant: 20).isActive = true

    attachedToCalendarView.translatesAutoresizingMaskIntoConstraints = false
    attachedToCalendarView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    // Attaching this view's topAnchor to the calendar's bottom anchor
    attachedToCalendarView.topAnchor.constraint(equalTo: self.calendar.contentView.bottomAnchor).isActive = true
    attachedToCalendarView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
    attachedToCalendarView.heightAnchor.constraint(equalToConstant: 20).isActive = true


    // Title and button to toggle the calendar scope
    self.navigationItem.title = "Test"
    self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Toggle", style: .done, target: self, action: #selector(switchCalendarScope))
}

}

score 0 · Answer 1 · answered Dec 10 '18 at 13:09

Well, I couldn't figure out how to fix the problem itself but I did find a workaround. I placed the calendar inside of an empty container view (just a simple UIView) and attached attachedToCalendarView to the container's bottomAnchor instead of the calendar's itself.

Do note however that using setScope, which animates the transition, still causes the same issue. For it to work you have to set it manually like calendar.scope = x

example:

@objc func switchCalendarScope(){
    if self.calendar.scope == FSCalendarScope.month {
        // self.calendar.setScope(FSCalendarScope.week, animated: true) // this will cause the calendar to be squished again
        self.calendar.scope = .week
        movingConstraint.constant = view.safeAreaLayoutGuide.layoutFrame.size.height * -0.20
    } else {
        // self.calendar.setScope(FSCalendarScope.month, animated: true)
        self.calendar.scope = .month
        movingConstraint.constant = 0
    }
}

FSCalendar content getting squished when I switch scope to month

1 Answers1