UICalendarView iOS16 In Swift

It is WWDC22 weak… After lots of experience in iOS field but on calendar & Calendar Ui customisation takes our lots of time. you’ll always look it up how to set up a date formatter. Calendar are confusing.. How set next date 😒. Set note & event 🤯.

So many things latest in iOS16. New feature in iOS16.

Apple introduced UICalendarView to create custom calendar views from iOS 16. ✌

UICalendarView in iOS 16 A view that displays a calendar with date-specific decorations, and provides for user selection of a single or multiple dates.

@MainActor class UICalendarView : UIView

Setting up UICalendarView

UICalendarView belongs to the UIKit framework and comes with a simple initialiser.

let calendarView = UICalendarView()
let gregorianCalendar = Calendar(identifier: .gregorian)
calendarView.calendar = gregorianCalendar
calendarView.locale = Locale(identifier: "zh_TW")
calendarView.fontDesign = .rounded

Easy to customised UICalendarView

calendarView.backgroundColor = .secondarySystemBackground calendarView.layer.cornerCurve = .continuous calendarView.layer.cornerRadius = 10.0 calendarView.tintColor = UIColor.systemTeal

UICalendarView declaration

@MainActor class UICalendarView : UIView

I have added a yellow star image to all the dates in the calendar. You can write your logic to customised the decorators.

func calendarView(_ calendarView: UICalendarView, decorationFor dateComponents: DateComponents) -> UICalendarView.Decoration? {
    let font = UIFont.systemFont(ofSize: 10)
    let configuration = UIImage.SymbolConfiguration(font: font)
    let image = UIImage(systemName: "star.fill", withConfiguration: configuration)?.withRenderingMode(.alwaysOriginal)
    return .image(image)
}

Selection in UICalendarView

For single selection

let dateSelection = UICalendarSelectionSingleDate(delegate: self)
calendarView.selectionBehavior = dateSelection

Single date selection in UICalendarView is done using UICalendarSelectionSingleDateDelegate The delegate provides us with two methods.

func dateSelection(_ selection: UICalendarSelectionSingleDate, didSelectDate dateComponents: DateComponents?) {
    print("Selected Date:", dateComponents)
}

  
func dateSelection(_ selection: UICalendarSelectionSingleDate, canSelectDate dateComponents: DateComponents?) -> Bool {
    return true
}

For multi-date selection

let dateSelection = UICalendarSelectionMultiDate(delegate: self) calendarView.selectionBehavior = dateSelection

Multi date selection in UICalendarView is done using UICalendarSelectionSingleDateDelegate The delegate provides us with two methods.

func multiDateSelection(_ selection: UICalendarSelectionMultiDate, didSelectDate dateComponents: DateComponents) {
    print("Selected Date:", dateComponents)
}
func multiDateSelection(_ selection: UICalendarSelectionMultiDate, didDeselectDate dateComponents: DateComponents) {
    print("De-Selected Date:", dateComponents)
}
func multiDateSelection(_ selection: UICalendarSelectionMultiDate, canSelectDate dateComponents: DateComponents) -> Bool {
    return true
}
func multiDateSelection(_ selection: UICalendarSelectionMultiDate, canDeselectDate dateComponents: DateComponents) -> Bool {
    return true
}

Still confession then go References

[1] https://developer.apple.com/documentation/uikit/uicalendarview

[2] https://developer.apple.com/videos/play/wwdc2022/10068/

My coding buddy

Meet Patel (iOS Developer)

Further Reading

Get notified about the details of New innovation in software industry, as well as other important development update & expansion of IT industry check our previous & Upcoming article.