DEV Community

Cover image for Implementing a custom native calendar using UICalendarView in iOS16 and Swift
Rizwan Ahmed
Rizwan Ahmed

Posted on

Implementing a custom native calendar using UICalendarView in iOS16 and Swift

It was WWDC22 week, and I was browsing through my Twitter feed to get some updates about the latest Apple APIs. A person tweeted, “No matter how experienced you are as an iOS developer, you’ll always look it up how to set up a date formatter.” So I humorously replied to the tweet by saying, “Dates are hard 😜 .”

After a while, something struck my mind, and I was curious to know if Apple had made improvements to the existing date picker. To my surprise, Apple introduced UICalendarView to create custom calendar views from iOS 16.

At that moment, I could realize how easy it would become for an iOS developer to implement and customize calendar views. Previously, we used third-party calendar components, which came with issues and bugs. Let’s see how to implement a custom native calendar using UICalendarView in iOS 16 and Swift.

Setting up UICalendarView

Image description

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

let calendarView = UICalendarView()
let gregorianCalendar = Calendar(identifier: .gregorian)
calendarView.calendar = gregorianCalendar
Enter fullscreen mode Exit fullscreen mode

Note: Apple tells us that it is necessary to mention the calendar type explicitly while creating a UICalendarView object. In our example, it will be gregorian calendar.

API availablility: UICalendarView is available from iOS16.0+, iPadOS16.0+, and macCatalyst16.0+

Customizing UICalendarView

Image description

UICalendarView supports various customizations like setting the background color, setting the view’s corner radius, changing the calendar’s tint color, and many more.

calendarView.backgroundColor = .secondarySystemBackground
calendarView.layer.cornerCurve = .continuous
calendarView.layer.cornerRadius = 10.0
calendarView.tintColor = UIColor.systemTeal
Enter fullscreen mode Exit fullscreen mode

For further reading visit https://ohmyswift.com/blog/2022/06/12/implementing-a-custom-native-calendar-using-uicalendarview-in-ios16-and-swift/

Top comments (0)