UICalendarView 🗓

A lot of applications use calendars for many purposes, such as date picker, planner view, etc. E.g. We at Earkick for our data-driven mental health tracker app use calendar for mood logging. Each iOS developer is faced with the issue of how to integrate a calendar view into the application.

Some of them try to write their custom solution, some use different open libraries (FSCalendar, JTAppleCalendar, etc). Each of these ways needs a lot of effort, and time in searching, trying different ways, etc.

It was so uncomfortable, that Apple doesn’t provide a native component for calendar view. But it just happened at WWDC22! 😁

After OS 16 release, native UICalendarView is available for integration. It’s easy to use and needs much less time to integrate into your own application.

Let’s have a closer look.

1. Create a view

Firstly, create a view, via storyboard or add it from code, type of the view should be UICalendarView. In this example, it was added by storyboard and centered.

Add a view to the screen.

2. Configure a view

To configure this view, use function setupCalendarView and set up a delegate.

3. Run a project

If we run a project, we’ll see calendar which is ready to use. So simple.

4. Customisation

You can play with tintColor, fontDesign properties to make it suitable for your design. Another thing you can use to customize your calendar view is using decoration view. It is already a method of UICalendarViewDelegate that returns UICalendarView.Decoration?. Let’s change it from none.

What can be used as a decoration view? There is a default view with a filled circle, image, or your custom view. Let’s focus on the first two.

Default view:

ImageView:

Results:

Different decoration types.

Also, it is available to set one of two types of selection behavior: single and multiple.

Here is a way to set a single selection for a calendar. Just add these lines of code into setupCalendarView function.

To make it runnable, needs also add conform your controller to UICalendarSelectionSingleDateDelegate.

If you prefer to use multiple selection here is a way how to do it, so like single one.

And a result of selection, single and multiple:

That’s it for now!