The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them with each other.

Usage

Use the planning calendar if:

• You want to compare objects of the same type with each other over a period of time.
• You require responsive behavior.
• You have less than 100 lines in the calendar.

Do not use the planning calendar if:

• You want to show a calendar for one object and a detailed overview of appointments over a long time interval.
• You want to show a complex or graphical representation. In this case, please use the Gantt chart.
• You have more than 100 lines in the calendar. In this case, please use the Gantt chart.

Responsiveness

Types

You can define what size of interval the calendar should show, and whether multi selection should be possible. Additionally, the row header and the interval appointments are optional.

Components

This section describes the various components of the planning calendar.

1. Toolbar

The toolbar is optional and can contain a title as well as app-specific and generic actions.
If you have actions in the toolbar, we recommend that you use a title to describe the purpose of the planning calendar. For more information, check out the toolbar guideline article.

The generic actions are as follows:

• Search
• Add Appointment (icon: add)
• Add New Contact (icon: add-contact)
• Multi-select mode (icon: multi-select)
• Legend (icon: legend)
• Settings (icon: action-settings)
• Full Screen (icon: full-screen/exit-full-screen)

2. Header

The calendar header comprises the left part, which includes an optional switch to see the calendar in a different view (day, month, year), and the right part, which contains the calendar view.

3. Calendar view

The calendar view defines the granularity of the appointments shown. You can decide what kind of view (hours, days, or months) they need and how many values are shown. There is a default value for the number of values to be shown. App developers can change this value, but they should then ensure that the app is still responsive.

Users can also navigate to the next or previous view, and switch easily to another year, month, or day.

4. List item

The list item contains the row header, row, appointments, and interval appointments. Each row can show different working and non-working days. This is useful if users want to view calendars from different countries that have different weekends.

5. Row header

This identifies the object for which the appointments are shown. The row header pops in if there is not enough space. It can contain a picture or icon, a title, and a subtitle.

6. Row

All appointments that appear for an object are shown here.

7. Appointment

Appointments enable an icon or picture, a title, and a subtitle to be shown. If appointments appear simultaneously, they are shown under each other. App developers can define the colors of different appointment types, and appointments can be shown as tentative. The control can register the click event, and the app development team must define what happens next.
If the view changes and there are too many small appointments at one time, an aggregation is shown. Otherwise, the click/touch area would be too small.

8. Interval appointment

Each row can also have interval appointments. These are smaller and always appear at the top of the row. They can be used to show appointments that last for a prolonged period of time, such as vacations or workshops.

Behavior and Interaction

To create an appointment, the user must trigger an action by clicking the Add   icon in the toolbar.

A user who wants to see the details of an appointment can click it, thus triggering a click event. The app development team must define what kind of information is then shown.

A multi-select toggle can also be provided in the toolbar. This can be used, for example, to select multiple people to delete them from the planning calendar.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

Depending on the current time interval, appointments can become truncated. However, this should not be an issue because the main use case is to see whether there is a free time slot. Additionally, the user can click or tap the appointment to see the details.

Interaction Flow for Switching Days

Resources