Calendar — Reference
Calendar settings and behavior. Settings include ID, Timezone, Date, Locale.
Calendar
Section titled “Calendar”Calendar settings and events. Select the component in App Structure to find these controls in Properties.
Calendar Properties
Section titled “Calendar Properties”| Name | Description |
|---|---|
| ID | Required. Default: "". Attribute: id. |
| Timezone | Options: Local, UTC Default: "". Attribute: timezone. |
| Date | Default: "". Attribute: date. |
| Locale | Options: Auto, Afrikaans (af), Arabic (Algeria) (ar-dz), Arabic (Kuwait) (ar-kw), Arabic (Libya) (ar-ly), Arabic (Morocco) (ar-ma), Arabic (Saudi Arabia) (ar-sa), Arabic (Tunisia) (ar-tn), Albanian (sq), Arabic (ar), Azerbaijan (az), Basque (eu), Bosnian (bs), Bulgarian (bg), Catalan (ca), Czech (cs), Danish (da), Dutch (nl), German (de), Georgian (ka), Greek (el), English (en), English (Australian) (en-au), English (Great Britain) (en-gb), English (New Zealand) (en-nz), Estonian (et), Farsi (fa), Finnish (fi), French (Canada) (fr-ca), French (Switzerland) (fr-ch), French (fr), Galician (gl), Hebrew (he), Hindi (hi), Croatian (hr), Hungarian (hu), Indonesian (id), Icelandic (is), Italian (it), Japanese (ja), Kazakh (kk), Korean (ko), Latvian (lv), Lithuanian (lt), Luxembourgian (lb), Macedonian (mk), Malaysian (ms), Norwegian (Bokmål) (nb), Norwegian (Nynorsk) (nn), Polish (pl), Portuguese (pt), Portuguese (Brazil) (pt-br), Romanian (ro), Russian (ru), Slovak (sk), Slovenian (sl), Serbian (sr), Serbian (Cyrillic) (sr-cyrl), Spanish (es), Swedish (sv), Thai (th), Turkish (tr), Uighur (ug), Ukrainian (uk), Uzbek (uz), Vietnamese (vi), Chinese (Simplified) (zh-cn), Chinese (Traditional) (zh-tw) Default: "". Attribute: locale. |
| Theme | Options: Standard, Bootstrap 4 (bootstrap), Bootstrap 5 (bootstrap5) Default: "". Attribute: theme. |
| Height | Default: "". Attribute: height. |
| Aspect Ratio | Options: 1, 1.35, 1.7, 2.05 Default: 1.35. Attribute: aspect-ratio. |
| Views | Options: Month (dayGridMonth), Week (dayGridWeek), Day (dayGridDay), Time Week (timeGridWeek), Time Day (timeGridDay), List Year (listYear), List Month (listMonth), List Week (listWeek), List Day (listDay), Multi Month Year (multiMonthYear) Default: "". Attribute: views. |
| Default View | Options: Default, Month (dayGridMonth), Week (dayGridWeek), Day (dayGridDay), Time Week (timeGridWeek), Time Day (timeGridDay), List Year (listYear), List Month (listMonth), List Week (listWeek), List Day (listDay), Multi Month Year (multiMonthYear) Default: "". Attribute: view. |
| Business Hours | Default: false. Attribute: business-hours. |
| Hide Non Current Dates | Default: false. Attribute: hide-non-current-dates. |
| No Event Overlap | Default: false. Attribute: no-event-overlap. |
| Selectable | Default: false. Attribute: selectable. |
| Editable | Default: false. Attribute: editable. |
| Now Indicator | Default: false. Attribute: now-indicator. |
| Event Order | Default: "start,-duration,allDay,title". Attribute: event-order. |
| Event Limit | Default: "". Attribute: event-limit. |
| Touch Delay | Default: "". Attribute: long-press-delay. |
Constraints
Section titled “Constraints”| Name | Description |
|---|---|
| Use Select Constraint | Default: false. Attribute: constraint. |
| Use Event Constraint | Default: false. Attribute: event-constraint. |
Go To Date
Section titled “Go To Date”| Name | Description |
|---|---|
| Date | Go to the given date Required. Default: "". |
Dynamic attributes
Section titled “Dynamic attributes”| Name | Description |
|---|---|
| Date | Choose dynamic data binding. |
| Locale | Choose dynamic data binding. |
| View | Choose dynamic data binding. |
| Custom Constraint: Start Time | Choose the Start Time. |
| Custom Constraint: End Time | Choose the Start Time. |
| Custom Constraint: Days | This option is part of the dynamic attribute configuration. |
| Business Hours: Start Time | Choose the Start Time. |
| Business Hours: End Time | Choose the Start Time. |
| Business Hours: Days | This option is part of the dynamic attribute configuration. |
| Tooltips: Placement | Where the tooltip appears. Controls tooltip placement relative to the trigger element. Common placements include top, bottom, left, and right. Bootstrap uses Popper for positioning. Bootstrap docs: Tooltip options |
| Tooltips: Title | Choose the tooltip title. |
| Tooltips: Html | Choose the tooltip html. When enabled, tooltip content may include HTML. Only use with trusted content to avoid XSS risks. Prefer plain text for user-provided values. Bootstrap docs: Tooltip options |
| Selectable | Choose dynamic data binding. |
| Editable | Choose dynamic data binding. |
| Event Limit | Choose dynamic data binding. |
| Now Indicator | Choose dynamic data binding. |
Dynamic events
Section titled “Dynamic events”| Name | Description |
|---|---|
| Date Click | Action: Choose the action to execute. |
| Date Click: date | date is available in the event data payload. |
| Date Click: allDay | allDay is available in the event data payload. |
| Event Click | Action: Choose the action to execute. |
| Event Click: event | event is available in the event data payload. |
| Event Mouse Enter | Action: Choose the action to execute. |
| Event Mouse Enter: event | event is available in the event data payload. |
| Event Mouse Leave | Action: Choose the action to execute. |
| Event Mouse Leave: event | event is available in the event data payload. |
| Event Drop/Move | Action: Choose the action to execute. |
| Event Drop/Move: event | event is available in the event data payload. |
| Event Resize | Action: Choose the action to execute. |
| Event Resize: event | event is available in the event data payload. |
| Select | Action: Choose the action to execute. |
| Select: start | start is available in the event data payload. |
| Select: end | end is available in the event data payload. |
| Select: allDay | allDay is available in the event data payload. |
| Success | Action: Choose the action to execute. |
| Failure | Action: Choose the action to execute. |