Calendar
A Calendar picker facilitates inserting a date into a form field. The functionality for these should be developed at a brand level as their usage may vary. All form elements will require development.
- Overview
- Specification
- Style Guide Manager
- Example in Situ
- Usage
This provides guidance on the build, layout and content options for this component.
Layout specification
| Component item | Requirement & purpose | Optional or mandatory | CMS options |
|---|---|---|---|
| Active foreground | Sets colour of text items inside active item (e.g. dark squares in above example). | Mandatory | n/a |
| Active background colour | Sets background colour on active items (e.g. dark squares in above example). | Mandatory | n/a |
| Past and future dates colour | Sets colour of dates not in current monthly view. | Mandatory | n/a |
| Calendar background colour | Sets the background colour of the calendar. | Mandatory | n/a |
No current Style Guide Manager settings. For global settings see the Style Guide Manager section.
No current design examples.
General usage dos and don'ts
| ✅ Do's | |
|---|---|
| Ensure the text is legible. | |
| Accessibility Use labels that identify the purpose of the input field, such as “name” or “username.” Options in drop-downs should be clear. Note that placeholder text is not sufficient since it disappears once the user has begun entering text. | Do not use a background image that makes the text hard to read. |
| Data collection Data collection must be managed in compliance with Bayer Data Privacy requirements as provided by the Data Privacy Team. Data collection must align to the CH Data Privacy Statement. Details of the data collection strategy need to be outlined in the manuscript with details around field function, field title, box example text (optional) and selection lists, including any dependencies that build (e.g., Brand repopulates to show sub-brands, requirements for validating entry and required/optional fields). | |
| In certain cases additional requirements might be tied to the backend data collection tool. Please consult the Bayer project team for more information. |