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
UICalendarView belongs to the UIKit framework and comes with a simple initializer.
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+
UICalendarView supports various customizations like setting the background color, setting the view’s corner radius, changing the calendar’s tint color, and many more.
UICalendarView comes with a UICalendarViewDelegate, which allows us to add date-specific decorations. It will be beneficial while showing free/busy events in a calendar.
Make sure you set the delegate object as well.
In the above example, I have added a yellow star image to all the dates in the calendar. You can write your logic to customize the decorators.
Restricting date selection
You can also specify the date ranges that the user can choose. In the above example, you can see that the dates before 12 June 2022 are disabled.
Selection behavior in UICalendarView
There are two types of selection behavior in UICalendarView: Single date selection and multi-date selection. Whether you need a single or multi-date selection must be specified in the selectionBehaviour property of the calendar view.
For single selection
For multi-date selection
Single date selection in UICalendarView
Single date selection in UICalendarView is done using UICalendarSelectionSingleDateDelegate The delegate provides us with two methods.
The didSelectDate method gives us a date whenever the user taps on a date in the UICalendarView.
The canSelectDate method is an optional delegate method using which you can decide whether to allow the user to select a specific date or not.
Multi-date selection in UICalendarView
Multi-date selection in UICalendarView is done using UICalendarSelectionMultiDateDelegate
The delegate provides us with the following methods.
The didSelectDate method gives us the selected date by the user.
The didDeselectDate method gives us the deselected date by the user.
The canSelectDate and canDeseectDate are optional delegate methods using which you can decide whether to allow the user to select/deselect a specific date or not.
I see UICalendarView as a considerable improvement when compared to UIDatePicker. I enjoyed exploring the UICalendarView API. I hope you will too. Do share your thoughts about UICalendarView API.
You can find the demo project in here 👉 https://github.com/rizwan95/UICalendarView-Example
About the author
- Rizwan Ahmed - Senior iOS Engineer, speaker, and an open source enthusiast. Twitter - https://twitter.com/rizwanasifahmed
Show your support to indie devs by downloading their apps from the banner displayed below. It will help them build great apps in these tough times.
Winya: Best live streaming app
Become a Streamer by starting a live stream from your iPhone/iPad to Twitch/YouTube or any live streaming service of your choice. Download the app and become a creator now!