UI Components Calendar

Updated: June 16, 2023

Calendar

FUICalendarView

Intro

The calendar view provides a visual overview of a week, a month, or multiple months.

Example of calendar views on iPhone (left) and iPad (right)
Example of calendar views on iPhone (left) and iPad (right)

Usage

Do
  • 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 example, consecutive holidays, flight ticket prices in peak season versus off season, hotel room availabilities.
Don't

Don’t use calendar ciew when text-based / list-based components, such as pickers, can fulfill your primary requirement.

Anatomy

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 or Large Title)

Anatomy of a calendar view
Anatomy of a calendar view

Variations

Each container has its own attributes:

Calendar View Container

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

  1. Month View (Default)
  2. Week View
  3. Expandable View
  4. Date Selection View
4 types of the calendar view containers: month view, week view, expandable view, and date selection view
4 types of the calendar view containers: month view, week view, expandable view, and date selection view

Week Label Container

It provides three types of start day of the week:

  1. Sunday (Default) – US Standard
  2. Monday – Europe, Asia, Oceania Standard
  3. Saturday – Middle East Standard
Week label starting from Sunday (left), Monday (middle), and Saturday (right)
Week label starting from Sunday (left), Monday (middle), and Saturday (right)

Date Cell Container

  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.

Calendar view that shows numbers with an indicator (left) and numbers only (right)
Calendar view that shows numbers with an indicator (left) and numbers only (right)

Month Label

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

  1. Single Title (Default)
  2. Double Title
  3. Large Title – with a large title, the label should be fixed and not be scrollable with the rest of the content
Calendar view with a single title (left), double title (middle), and large title (right)
Calendar view with a single title (left), double title (middle), and large title (right)

Resources

Development: FUICalendarView, Calendar

Related Components/Patterns: Pickers, Object Cell, Timeline, KPI Label, Cell Button