Date Navigator
The date navigator is a control for advanced handling of all actions, that require a date input, and for visualizing a date.
Figure 1: Date Navigator
Required Properties
- The entire navigation bar with the logo and dropdown menu should be removed so that the user has to explicitly select a date or cancel to exit this page.
- Provide a page header.
- All dates can be selected, including dates from the previous and next month.
Optional
- In Pocket IE, to improve performance, the current day may be indicated by bolding the date instead of circling it .
- In Pocket IE, dates may be standard underlined links.
Dimensions
- Width: 100% of container (standard = 240 pix)
- Table header and footer height: 22 pix
- Calendar rows height: 16 pix
Colors and Fonts
- Header, footer and inactive month tab: Blue-Gray #CBD5E1
- Active month tab, inactive month text, and current day border: Dark blue #225A8D
- Active tab text, column and row header borders: White #FFFFFF
- Column header (week numbers and days) and day cell borders: Blue-Gray #DCE3EC
- Previous month and next month cell background: Light blue-gray #E9EEF4
- Regular date background: White #FFFFFF
- Cell font: regular black #000000
- Emphasized cell color 1: Blue-green #BBDDDD
- Emphasized cell color 2: Yellow #FFFB8C
- Emphasized cell color 3: Green #AACDA1
- Emphasized cell color 4: Red #F66767
- Emphasized cell color 5: Orange #FDBB71
The emphasized colors can be used to highlight specific days (for example weekends and holidays). They are independent of the semantic colors used in the table, but green and red should be used with care since they generally represent positive and negative.
