A declarative, performant, calendar UI component that supports use cases ranging from simple date pickers all the way up to fully-featured calendar apps.

Introduction

---

HorizonCalendar is an interactive calendar component for iOS (compatible with UIKit and SwiftUI). Its declarative API makes updating the calendar straightforward, while also providing many customization points to support a diverse set of designs and use cases.

Features:

• Supports all calendars from Foundation.Calendar (Gregorian, Japanese, Hebrew, etc.)
• Display months in a vertically-scrolling or horizontally-scrolling layout
• Declarative API that encourages unidirectional data flow for updating the content of the calendar
• A custom layout system that enables virtually infinite date ranges without increasing memory usage
• Animated content updates
• Pagination for horizontally-scrolling calendars
• Self-sizing month headers
• Specify custom views (UIView or SwiftUI View) for individual days, month headers, and days of the week
• Specify custom views (UIView or SwiftUI View) to highlight date ranges
• Specify custom views (UIView or SwiftUI View) to overlay parts of the calendar, enabling features like tooltips
• Specify custom views (UIView or SwiftUI View) for month background decorations (colors, grids, etc.)
• Specify custom views (UIView or SwiftUI View) for day background decorations (colors, patterns, etc.)
• A day selection handler to monitor when a day is tapped
• A multi-day selection handler to monitor when multiple days are selected via a drag gesture
• Customizable layout metrics
• Pin the days-of-the-week row to the top
• Show partial boundary months (exactly 2020-03-14 to 2020-04-20, for example)
• Scroll to arbitrary dates and months, with or without animation
• Robust accessibility support
• Inset the content without affecting the scrollable region using layout margins
• Separator below the days-of-the-week row
• Right-to-left layout support

HorizonCalendar serves as the foundation for the date pickers and calendars used in Airbnb’s highest trafficked flows.

Search	Stays Availability Calendar	Wish List	Experience Reservation	Experience Host Calendar Management

Table of Contents

---

• Example App
  • Demos
    • Single Day Selection
    • Day Range Selection
    • Selected Day Tooltip
    • Scroll to Day with Animation
• Integration Tutorial
  • Requirements
  • Installation
    • Carthage
    • CocoaPods
  • Building a CalendarView
    • Basic Setup
      • Importing HorizonCalendar
      • Initializing a CalendarView with CalendarViewContent
    • Customizing CalendarView
      • Providing a custom view for each day
      • Adjusting layout metrics
      • Adding a day range indicator
      • Adding a tooltip
      • Adding grid lines
    • Responding to day selection
• Technical Details
• Contributions
• Authors
• Maintainers
• License

Example App

---

An example app is available to showcase and enable you to test some of HorizonCalendar‘s features. It can be found in ./Example/HorizonCalendarExample.xcworkspace.

Note: Make sure to use the .xcworkspace file, and not the .xcodeproj file, as the latter does not have access to HorizonCalendar.framework.

Demos

The example app has several demo view controllers to try, with both vertical and horizontal layout variations:

Single Day Selection

Vertical	Horizontal

Day Range Selection

Vertical	Horizontal

Selected Day Tooltip

Vertical	Horizontal

Scroll to Day with Animation

Vertical	Horizontal

 

Integration Tutorial

---

Requirements

• Deployment target iOS 11.0+
• Swift 5+
• Xcode 10.2+

Installation

Swift Package Manager

To install HorizonCalendar using Swift Package Manager, add .package(name: "HorizonCalendar", url: "https://github.com/airbnb/HorizonCalendar.git", from: "1.0.0")," to your Package.swift, then follow the integration tutorial here.

Carthage

To install HorizonCalendar using Carthage, add github "airbnb/HorizonCalendar" to your Cartfile, then follow the integration tutorial here.

CocoaPods

To install HorizonCalendar using CocoaPods, add pod 'HorizonCalendar' to your Podfile, then follow the integration tutorial here.

Building a CalendarView

---

Once you’ve installed HorizonCalendar into your project, getting a basic calendar working is just a few steps.

Basic Setup

Importing HorizonCalendar

At the top of the file where you’d like to use HorizonCalendar (likely a UIView or UIViewController subclass), import HorizonCalendar:

Initializing a CalendarView with CalendarViewContent

CalendarView is the UIView subclass that renders the calendar. All visual aspects of CalendarView are controlled through a single type – CalendarViewContent. To create a basic CalendarView, you initialize one with an initial CalendarViewContent:

At a minimum, CalendarViewContent must be initialized with a Calendar, a visible date range, and a months layout (either vertical or horizontal). The visible date range will be interpreted as a range of days using the Calendar instance passed in for the calendar parameter.

For this example, we’re using a Gregorian calendar, a date range of 2020-01-01 to 2021-12-31, and a vertical months layout.

Make sure to add calendarView as a subview, then give it a valid frame either using Auto Layout or by manually setting its frame property. If you’re using Auto Layout, note that CalendarView does not have an intrinsic content size.

At this point, building and running your app should result in something that looks like this:

Customizing CalendarView

Providing a custom view for each day

HorizonCalendar comes with default views for month headers, day of week items, and day items. You can also provide custom views for each of these item types, enabling you to display whatever custom content makes sense for your app.

Since all visual aspects of CalendarView are configured through CalendarViewContent, we’ll expand on our makeContent function. Let’s start by providing a custom view for each day in the calendar:

The dayItemProvider(_:) function on CalendarViewContent returns a new CalendarViewContent instance with the custom day item model provider configured. This function takes a single parameter – a provider closure that returns a CalendarItemModel for a given Day.

CalendarItemModel is a type that abstracts away the creation and configuration of a view displayed in the calendar. It’s generic over a ViewRepresentable type, which can be any type conforming to CalendarItemViewRepresentable. You can think of CalendarItemViewRepresentable as a blueprint for creating and updating instances of a particular type of view to be displayed in the calendar. For example, if we want to use a UILabel for our custom day view, we’ll need to create a type that knows how to create and update that label. Here’s a simple example:

CalendarItemViewRepresentable requires us to implement a static makeView function, which should create and return a view given a set of invariant view properties. We want our label to have a configurable font and text color, so we’ve made those configurable via the InvariantViewProperties type. In our makeView function, we use those invariant view properties to create and configure an instance of our label.

CalendarItemViewRepresentable also requires us to implement a static setContent function, which should update all data-dependent properties (like the day text) on the provided view.

Now that we have a type conforming to CalendarItemViewRepresentable, we can use it to create a CalendarItemModel to return from the day item model provider:

return CalendarViewContent(…)

.dayItemProvider { day in
DayLabel.calendarItemModel(
invariantViewProperties: .init(
font: UIFont.systemFont(ofSize: 18),
textColor: .darkGray,
backgroundColor: .clear),
content: .init(day: day))
}

Using a SwiftUI view is even easier – simply initialize your SwiftUI view and call .calendarItemModel on it. There’s no need to create a custom type conforming to CalendarItemViewRepresentable like we had to do with the UIKit example above.

Similar item model provider functions are available to customize the views used for month headers, day-of-the-week items, and more.

If you build and run your app, it should now look like this:

Adjusting layout metrics

We can also use CalendarViewContent to adjust layout metrics. We can improve the layout of our current CalendarView by adding some additional spacing between individual days and months:

Just like when we configured a custom day view via the day item provider, changes to layout metrics are also done through CalendarViewContent. interMonthSpacing(_:), verticalDayMargin(_:), and horizontalDayMargin(_:) each return a mutated CalendarViewContent with the corresponding layout metric value updated, enabling you to chain function calls together to produce a final content instance.

After building and running your app, you should see a much less cramped layout:

Adding a day range indicator

Day range indicators are useful for date pickers that need to highlight not just individual days, but ranges of days. HorizonCalendar offers an API to do exactly this via the CalendarViewContent function dayRangeItemProvider(for:_:). Similar to what we did for our custom day item model provider, for day ranges, we need to provide a CalendarItemModel for each day range we want to highlight.

First, we need to create a ClosedRange<Date> that represents the day range for which we’d like to provide a CalendarItemModel. The Dates in our range will be interpreted as Days using the Calendar instance with which we initialized our CalendarViewContent.

Next, we need to invoke the dayRangeItemProvider(for:_:) on our CalendarViewContent:

For each day range derived from the Set<ClosedRange<Date>> passed into this function, our day range item model provider closure will be invoked with a context instance that contains all of the information needed for us to render a view to be used to highlight a particular day range. Here is an example implementation of such a view:

Next, we need a type that conforms to CalendarItemViewRepresentable that knows how to create and update instances of DayRangeIndicatorView. To make things easy, we can just make our view conform to this protocol:

Last, we need to return a CalendarItemModel representing our DayRangeIndicatorView from the day range item model provider closure:

If you build and run the app, you should see a day range indicator view that highlights 2020-01-20 to 2020-02-07:

Adding a tooltip

HorizonCalendar provides an API to overlay parts of the calendar with custom views. One use case that this enables is adding tooltips to certain days – a feature that’s used in the Airbnb app to inform users when their checkout date must be a certain number of days in the future from their check-in date.

First, we need to decide on the locations of the items that we’d like to overlay with our own custom view. We can overlay a day or a monthHeader – the two cases available on CalendarViewContent.OverlaidItemLocation. Let’s overlay the day at 2020-01-15:

Like all other customizations, we’ll add an overlay by calling a function on our CalendarViewContent instance that configures an overlay item model provider closure:

For each overlaid item location in the Set<CalendarViewContent.OverlaidItemLocation> passed into this function, our overlay item model provider closure will be invoked with a context instance that contains all of the information needed for us to render a view to be used as an overlay for a particular overlaid item location. Here is an example implementation of a tooltip overlay view:

Note: An overlay view will have a size that closely matches the bounds.size of the calendar. To prevent your overlay view from intercepting touches, set isUserInteractionEnabled to false.

Next, we need a type that conforms to CalendarItemViewRepresentable that knows how to create and update instances of TooltipView. To make things easy, we can just make our view conform to this protocol:

Last, we need to return a CalendarItemModel representing our TooltipView from the overlay item model provider closure:

If you build and run the app, you should see a tooltip view hovering above 2020-01-15:

Adding grid lines

HorizonCalendar provides an API to add a decorative background behind each month. By using the included MonthGridBackgroundView with the monthBackgroundItemProvider, we can easily add grid lines to each of the months in the calendar:

The month background item provider works similarly to the overlay item provider and day range item provider; for each month in the calendar, the item provider closure will be invoked with a layout context. This layout context contains information about the size and positions of elements in the month. Using this information, you can draw grid lines, borders, backgrounds, and more.

Responding to day selection

If you’re building a date picker, you’ll most likely need to respond to the user tapping on days in the calendar. To do this, provide a day selection handler closure via CalendarView‘s daySelectionHandler:

The day selection handler closure is invoked whenever a day in the calendar is selected. You’re provided with a Day instance for the day that was selected. If we want to highlight the selected day once its been tapped, we’ll need to create a new CalendarViewContent with a day calendar item model that looks different for the selected day:

Last, we’ll change our day selection handler so that it not only stores the selected day, but also sets an updated content instance on calendarView:

After building and running the app, tapping days should cause them to turn blue:

Technical Details

---

If you’d like to learn about how HorizonCalendar was implemented, check out the Technical Details document. It provides an overview of HorizonCalendar‘s architecture, along with information about why it’s not implemented using UICollectionView.

GitHub

---

View Github