0
28.0.2
Zurich, Yokohama, Xanadu, Washington DC, Vancouver
Calendar that enables a requestor or fulfiller to select an appointment time from a configured set of available appointment times.
- Configure display of available or unavailable times that a user can see to schedule an appointment time.
- Configure different views based on space defined in the experience.
New Features & Enhancements
1. UI & Display Enhancements in Appointment Calendar
2. Slot Layout Configuration
- Tablet & Mobile View: Default 3 slots per row (configurable to 2 or 1).
- Desktop View: Default 5 slots per row (configurable to fewer).
3. Text Truncation Behavior
- Truncation OFF by default in resolutions lower than 640px.
- When OFF, long text wraps fully (only applies for screen widths ≤ 640px).
4. Secondary & Tertiary Info Display
- Secondary Info: Now supports only one object (instead of two); supports optional divider in label.
- Tertiary Info is now time duration: Shown only when time duration is configured via UIB (see below).
- Secondary info wraps when truncation is off.
- Overflow Behavior: Time label and event title truncate if content overflows.
Appointment Calendar Features
5. Week View Enhancements
- Current date highlighted as a bar.
- Week changes persisted only when applied from the week selector.
- Cancel in week selector closes the modal without saving.
6. Slot State Handling
- Next Available Slot is now configurable:
- Hidden if not configured.
- Label repositioned to bottom of the page.
- Slot Selection Behavior:
- Re-selecting a selected slot unselects it.
- Cancel button unselects all slots or closes a modal (if implemented).
- In rescheduling, previously booked slots show with green tick mark and cascade to sticky footer in resolution lower than 344px.
7. Time Duration Config Options (UIB)
- Option 1 – Global Duration Header (top-right):
- With info icon: “Use when all appointments have same duration”.
- Option 2 – Per-Slot Tertiary Info:
- With info icon: “Use when durations differ between slots”.
- Recommended when durations vary.
- Only one option from above can be selected at a time.
- Tertiary info shown only when Option 2 is selected.
8. Timezone Display
- Time zone always shown under Global Settings.
9. View Configuration
- Default to Week View.
- Admin can enable Day View as an additional option via config.
- If only one view is configured, dropdown is hidden.
10. More Button Behavior in collapsed state
- Week View: Appears after 4 rows to open more slots.
- Day View: Appears after 2 rows to open more slots.
- “Show less” button added when all slots are expanded.
11. Categories & Tags
- Categories can be enabled through "Enable categories" property (need to also configure "Categories" property as per user requirement).
- Functionality remains unchanged.
12. Look & Feel Updates
- UI alignment and spacing improvements.
- Padding: Default 8px all around (can be disabled by admin via config using "Bare" property).
Responsive & Mobile Behavior
13. Responsive Reflow Support
- Day View in mobile behaves as Week View.
- Sticky footer always visible.
- Footer contains:
- Schedule, Cancel, and Selected Slot Info.
- Selected slot for rescheduling if applicable.
- At page end: Next available slot visible.
- Responsive support for 320px–940px, with accordions for small screens.
- Default 3 slots shown in mobile.
14. NDS Date-Time Picker Integration
- Replaces old mini calendar component.
- Day View: Picker is inline.
- Week View: Picker opens on range click.
- Features:
- Highlight current date and week.
- Apply persists the view; Cancel reverts.
- Week/month navigation.
- Temporarily preview week on hover.
- Adaptive positioning for smaller screens.
Technical Enhancements & Fixes
15. Slot State Styling
- Booked slot: Green with tick mark.
- Rescheduling state and scheduled state clearly labeled at the bottom right.
16. Unavailable Slot Dates Fix
- Week view now correctly disables non-available dates.
17. Height Behavior
- Appointment Calendar height is set to 100% Out-Of-Box (OOB).
18. Sticky Footer
- Available across all views and mobile/tablet resolutions.
19. Screen Resolution Handling
- Inherits behavior from parent container.
- Switches between resolutions based on parent, not internal settings.
20. WCAG 2.1 AA Compliant: Fully accessible for inclusive experiences.
21. Localization Support.
22. UIB Properties recategorized into Basic and Advanced configurations for ease of understanding.
- Zurich instance (28.x.x) with UI builder