Updated: June 10, 2019

Calendar

FUICalendarView

Intro

The Calendar View provides a visual overview of a week, a month, or multiple months.

Usage

Dos

  • Use Calendar View to display a visual overview of a week, a month, multiple months, or a range of selected dates.
  • Use Calendar View to visually present correlations between two dates. For instance: consecutive holidays, flight ticket prices in peak season versus off season, hotel room availabilities.

Don’ts

  • Don’t use Calendar View when text-based / list-based components (such as Pickers) can fulfill your primary requirement.

Structure

The structure is composed of four parts: Calendar View Container, Week Label Container, Date Cell Container, and Month Label.

The space below the Calendar View Container is available for different configurations. For instance: using Object Cells as an agenda or Timeline as a timesheet.

 

A.  Calendar View Container

B.  Week Label Container

C.  Date Cell Container

D.  Month Label (as Navigation Bar Title)

Types

Each container has its own attributes:

A.  Calendar View Container

It provides four types of Calendar View. You may choose the one that fits the purpose of your app and start designing from there.

 

• Types:

1. Month View (Default)

2. Week View

3. Expandable View

4. Date Selection View

B.  Week Label Container

It provides three types of start day of the week:

 

• Types:

1. Sunday (Default) – US Standard

2. Monday – Europe, Asia, Oceania Standard

3. Saturday – Middle East Standard

C.  Date Cell Container

• Types:

1. Number with Indicator (Default)

2. Number Only

*The two types cannot be mixed. For instance, if your app is currently configured with the Number Only type and you want it to display Indicator of the day, please reconfigure your app with the Number with Indicator type.

D.  Month Label

It provides two types of Month Label: one-line and two-line. It uses three-letter, title-case abbreviation. For instance: Jan, Feb, Mar.

 

• Types:

1. Single Title (Default)

2. Double Title

Interactions & Behaviors

Each View type has its own defined interaction:

1. Month View (Default)

  • Vertical Scrolling

2. Week View

  • Horizontal Scrolling

3. Expandable View

  • Horizontal Scrolling
  • Agenda Container can be pulled down and pulled up

4. Date Selection View

  • Vertical Scrolling

Examples

Here are some examples of designing with the Calendar View:

The most basic one is to use the Calendar View as a schedule or calendar.

The components used in this example:

You may also make a timesheet with the Calendar View.

The components used in this example:

You also could make a date selection page with the Calendar View.

The components used in this example:

  • Calendar View – Multiple Selection View
  • Cell Button

Compact & Regular

The layouts on iPhone 8, iPhone 8 Plus, iPhone X, iPhone SE; iPad and iPad Pro have been configured with the following guidelines, by default:

  • The height of Date Cell stays the same across all devices. That being said, the height of Calendar View Container also stays the same across all devices.
  • If the device is iPhone 8, iPhone 8 Plus, iPhone X, iPhone SE: the width of Calendar View Container is the width of device screen.
  • If the device is iPad and iPad Pro: the width of Calendar View Container is the width of device screen minus UIEdgeInsets.

Compact View

• iPhone SE (320×568)

• iPhone 8 (375×667)

• iPhone 8 Plus (414×736)

• iPhone XS (375×812)

• iPhone XR, XS Max (414×896)

Regular View

• 7.9″ iPad Mini, 9.7″ iPad (1024×768)

• 10.5″ iPad Air (1112×834)

• 11″ iPad Pro (1194×834)

• 12.9″ iPad Pro (1366×1024)