Calendar
Calendar displays and selects dates in a full or compact calendar. It participates in the state, validation, and submission boundary of its Form.
1. When to use it
Typical uses:
- Scheduling and calendar overviews
- Selection that needs surrounding date context
- Custom date or month cells
2. Add and configure
- Add Calendar to the Fields slot of a Form Section.
- Set a stable, unique Field Key / Name that matches the backend DTO property.
- Configure the component properties below, then add Required, Help Text, Full row, or conditions as needed.
- Check the initial value and layout in Design Preview, then use Form Validate / Submit to test the full data path.
3. Main properties
| Property | Purpose |
|---|---|
| Fullscreen | Controls how the field is displayed in Design Preview and Runtime. |
| Selectable Start Date / End Date | Limits the allowed count, length, or value range. |
| Default Display Date | Sets the initial value, content, or format used by the field. |
| Disable Dates Before Today | Enables or disables this behavior. |
| Custom Date / Month Rendering | Controls how the field is displayed in Design Preview and Runtime. |
Common properties such as Field Key, Required, Help Text, Full row, and Visible When come from the Form field contract. The table highlights the settings most relevant to Calendar.
4. Form value and backend contract
Submitted value: A string.
"2026-08-11"
The example shows the data shape only. The API must still validate type, range, and authorization against its business DTO.
5. Validation, conditions, and interactions
Every field can use Form properties such as Required, Visible When, Disabled When, Required When, Dependencies, and Clear When Hidden. Conditions improve interaction but never replace backend validation or authorization.
Component capabilities: Provides Panel Change Event and date/month Renderers for custom calendar cells.
6. Recommendations
Recommendations: Agree on one format and time-zone policy with the backend; do not mix dates, local times, and instants.
Return to the Form overview for layout, validation, submission, drafts, and backend protocol guidance.