Calendar Widgets
Calendar Event List tsm-calendar-event-list-widget
List of calendar events in a tabular view with filtering and editing options.
Widget Or Layout: unknown
Value:
{
"title": "Calendar Events",
"widget": {
"type": "tsm-calendar-event-list-widget"
},
"type": "layout",
"config": {
"pageSize": 10
}
}
Inputs
Page Size
Key: pageSize
Name: Page Size
Description: Number of rows displayed on one page.
Table Height
Key: scrollHeight
Name: Table Height
Description: The custom height is applied only when the Table / TreeTable is in scrollable mode, contains more than 6 records, and the total height of all rows on the page exceeds the custom height value.
If the custom height is larger than the total height of the rows on the page, the Table / TreeTable automatically reduces its height to avoid empty space.
In Full Screen mode, the custom height setting is ignored. The Table / TreeTable uses a flex configuration which automatically manages the final height.
The height can be specified in these units: px, em, rem, vh.
Sample: 500px
Table Data View Mode
Key: dataViewMode
Name: Table Data View Mode
Description: "Table with scroll" keeps original column widths and a horizontal scrollbar. "FullScreen table" adjusts column widths to the window size.
Additional Context Data
Key: externalData
Name: Additional Context Data
Description: Specifies additional contextual data in the form of a JSON object for creating a new record in this listing, which is passed to the form context.
Listing Type
Key: listingType
Name: Listing Type
Description: Specifies which listing type is used for display.
Listing Profile
Key: profileId
Name: Listing Profile
Description: Specifies the listing profile, which defines columns, order, and other display settings.
Listing Profile Category
Key: profileCategory
Name: Listing Profile Category
Description: Name of the category from which profiles can be selected.
Output Context Key
Key: outputContextKey
Name: Output Context Key
Description: Key under which this table's selection is exposed in the form context as $outputContext.<key> (e.g. ticket, order, task). Contains selectedEntity (the selected row) and selectedIds (IDs across all pages). Empty = legacy behavior (the selected row is written directly to $outputContext).
Expose selected entities (selectedEntities)
Key: exposeSelectedEntities
Name: Expose selected entities (selectedEntities)
Description: In addition to selectedIds, also expose selectedEntities — the full rows, but for the CURRENT page only. Off by default: heavier payload than an array of IDs. Use selectedIds to work with the cross-page selection.
Hide Export Button
Key: showExport
Name: Hide Export Button
Description: Hides the export button.
Hide Filter
Key: showFilters
Name: Hide Filter
Description: Hides the listing filters.
Hide Refresh Button
Key: showRefresh
Name: Hide Refresh Button
Description: Hides the refresh button.
Hide Paginator
Key: showPaginator
Name: Hide Paginator
Description: Hides the listing pagination.
Hide Columns Manager
Key: showManagerColumns
Name: Hide Columns Manager
Description: Hides the columns manager.
Hide Profiles
Key: showProfiles
Name: Hide Profiles
Description: Hides the listing profiles.
Hide Sort Manager
Key: showManagerSort
Name: Hide Sort Manager
Description: Hides the sort manager.
Hide Color Manager
Key: showManagerColor
Name: Hide Color Manager
Description: Hides the color manager.
Hide Listing Config
Key: showListingConfig
Name: Hide Listing Config
Description: Hides the listing configuration.
Hide Data View Mode
Key: hiddenDataViewMode
Name: Hide Data View Mode
Description: Hides the option to switch between table and kanban view.
Hide Button Section
Key: hideButtonGroup
Name: Hide Button Section
Description: Hides the button section.
Disable Sticky Header
Key: scrollable
Name: Disable Sticky Header
Description: Disables the fixed table header while scrolling.
TQL WHERE Extension
Key: extendTqlWhere
Name: TQL WHERE Extension
Description: Adds a WHERE condition in TQL. Format: COLUMN_NAME OPERATOR VALUE.
TQL Sorting
Key: externalTqlSort
Name: TQL Sorting
Description: Modifies the default sorting in TQL. Format: COLUMN_NAME ASC/DESC.
TQL Sorting for Nested Tables
Key: externalTqlSortForNested
Name: TQL Sorting for Nested Tables
Description: Modifies the default sorting for nested tables in TQL. Format: COLUMN_NAME ASC/DESC.
TQL Query Params
Key: tqlQueryParams
Name: TQL Query Params
Description: Adds query parameters to the TQL request.
Filters
Key: filters
Name: Filters
Description: Allows defining filters for the data displayed in the list.
Calendar Event Type Select tsm-calendar-event-type-lov
Selection of a calendar event type from a dropdown list.
Widget Or Layout: unknown
Value:
{
"title": "Select Event Type",
"widget": {
"type": "tsm-calendar-event-type-lov"
},
"type": "string"
}
Inputs
Value
Key: selectProperty
Name: Value
Default: "all"
Default value
Key: default
Name: Default value
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-event-type-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen select property — gen-select-property.json
Demonstrates widget.selectProperty = "exampleValue" on tsm-calendar-event-type-lov.
{
"type": "object",
"title": "Calendar Event Type Select — Value",
"description": "Demonstrates widget.selectProperty = \"exampleValue\" on tsm-calendar-event-type-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-event-type-lov",
"selectProperty": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Calendar Subtype Select tsm-calendar-subtype-lov
Selection of a calendar subtype from a dropdown list.
Widget Or Layout: unknown
Value:
{
"title": "Select Calendar Subtype",
"widget": {
"type": "tsm-calendar-subtype-lov"
},
"type": "string"
}
Inputs
Show filter
Key: filterable
Name: Show filter
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-subtype-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen filterable — gen-filterable.json
Demonstrates widget.filterable = true on tsm-calendar-subtype-lov.
{
"type": "object",
"title": "Calendar Subtype Select — Show filter",
"description": "Demonstrates widget.filterable = true on tsm-calendar-subtype-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-subtype-lov",
"filterable": true
}
}
},
"layout": [
"field"
]
}
Calendar Template Select tsm-calendar-template-lov
Selection of a calendar template from a dropdown list.
Widget Or Layout: unknown
Value:
{
"title": "Select Calendar Template",
"widget": {
"type": "tsm-calendar-template-lov"
},
"type": "string"
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Filters
Key: defaultFilters
Name: Filters
Default: null
Keyboard on mobile
Key: keyboardOnMobile
Name: Keyboard on mobile
Description: When enabled, a system keyboard is shown on mobile devices to filter the list during selection.
Default: true
Show clear
Key: showClear
Name: Show clear
Description: When enabled, a clear icon is shown next to the selector so the user can clear the selected value.
Default: false
Show none text
Key: showNoneText
Name: Show none text
Description: When enabled, a "No value" item appears in the dropdown and can be selected to clear the field.
Default: true
Select first value
Key: selectFirstValue
Name: Select first value
Description: When only one record is available, it will be auto-selected. When multiple records exist, nothing happens.
Default: false
Selection using a listing (one or more values)
Key: multiselect
Name: Selection using a listing (one or more values)
Default: false
Value
Key: selectProperty
Name: Value
Default: "all"
Display
Key: displayField
Name: Display
Description: It is possible to add multiple values using autocomplete or with source code ["key", "name"]
Default: ["name"]
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-template-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen default filters — gen-default-filters.json
Demonstrates widget.defaultFilters = "exampleValue" on tsm-calendar-template-lov.
{
"type": "object",
"title": "Calendar Template Select — Filters",
"description": "Demonstrates widget.defaultFilters = \"exampleValue\" on tsm-calendar-template-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"defaultFilters": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen keyboard on mobile — gen-keyboard-on-mobile.json
Keyboard on mobile: When enabled, a system keyboard is shown on mobile devices to filter the list during selection.
{
"type": "object",
"title": "Calendar Template Select — Keyboard on mobile",
"description": "Keyboard on mobile: When enabled, a system keyboard is shown on mobile devices to filter the list during selection.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"keyboardOnMobile": false
}
}
},
"layout": [
"field"
]
}
Gen multiselect — gen-multiselect.json
Demonstrates widget.multiselect = true on tsm-calendar-template-lov.
{
"type": "object",
"title": "Calendar Template Select — Selection using a listing (one or more values)",
"description": "Demonstrates widget.multiselect = true on tsm-calendar-template-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"multiselect": true
}
}
},
"layout": [
"field"
]
}
Gen select first value — gen-select-first-value.json
Select first value: When only one record is available, it will be auto-selected. When multiple records exist, nothing happens.
{
"type": "object",
"title": "Calendar Template Select — Select first value",
"description": "Select first value: When only one record is available, it will be auto-selected. When multiple records exist, nothing happens.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"selectFirstValue": true
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show clear: When enabled, a clear icon is shown next to the selector so the user can clear the selected value.
{
"type": "object",
"title": "Calendar Template Select — Show clear",
"description": "Show clear: When enabled, a clear icon is shown next to the selector so the user can clear the selected value.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"showClear": true
}
}
},
"layout": [
"field"
]
}
Gen show none text — gen-show-none-text.json
Show none text: When enabled, a "No value" item appears in the dropdown and can be selected to clear the field.
{
"type": "object",
"title": "Calendar Template Select — Show none text",
"description": "Show none text: When enabled, a \"No value\" item appears in the dropdown and can be selected to clear the field.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-calendar-template-lov",
"showNoneText": false
}
}
},
"layout": [
"field"
]
}
Calendar Event Conf. Card tsm-calendar-event-configuration-data
Card displaying configuration details for calendar events.
Widget Or Layout: unknown
Value:
{
"title": "Event Configuration",
"widget": {
"type": "tsm-calendar-event-configuration-data"
},
"type": "object"
}
Inputs
Event type
Key: calendarEventType
Name: Event type
Default: null
Listing
Key: listingCode
Name: Listing
Default: null
Wrap value in row['value']
Key: addRowWrap
Name: Wrap value in row['value']
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-event-configuration-data/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen add row wrap — gen-add-row-wrap.json
Demonstrates widget.addRowWrap = true on tsm-calendar-event-configuration-data.
{
"type": "object",
"title": "Calendar Event Conf. Card — Wrap value in row['value']",
"description": "Demonstrates widget.addRowWrap = true on tsm-calendar-event-configuration-data.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-calendar-event-configuration-data",
"addRowWrap": true
}
}
},
"layout": [
"field"
]
}
Gen calendar event type — gen-calendar-event-type.json
Demonstrates widget.calendarEventType = "exampleValue" on tsm-calendar-event-configuration-data.
{
"type": "object",
"title": "Calendar Event Conf. Card — Event type",
"description": "Demonstrates widget.calendarEventType = \"exampleValue\" on tsm-calendar-event-configuration-data.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-calendar-event-configuration-data",
"calendarEventType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen listing code — gen-listing-code.json
Demonstrates widget.listingCode = "exampleValue" on tsm-calendar-event-configuration-data.
{
"type": "object",
"title": "Calendar Event Conf. Card — Listing",
"description": "Demonstrates widget.listingCode = \"exampleValue\" on tsm-calendar-event-configuration-data.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-calendar-event-configuration-data",
"listingCode": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Calendar Panel tsm-calendar
Panel displaying an overview of the calendar.
Widget Or Layout: unknown
Value:
{
"title": "Calendar",
"widget": {
"type": "tsm-calendar"
},
"type": "layout",
"config": {
"filterOnlyByOwner": true
}
}
Inputs
Filter event by owner
Key: filterOnlyByOwner
Name: Filter event by owner
Default: null
Can add event
Key: canAddEvent
Name: Can add event
Default: null
Can edit event
Key: canEditEvent
Name: Can edit event
Default: null
Show event title
Key: showEventTitle
Name: Show event title
Default: null
Show event type
Key: showEventType
Name: Show event type
Default: null
Show event user
Key: showEventUser
Name: Show event user
Default: null
Recurrent only custom
Key: recurrentOnlyCustom
Name: Recurrent only custom
Default: false
Event type
Key: eventTypes
Name: Event type
Default: null
Default view mode
Key: defaultViewMode
Name: Default view mode
Default: null
Hide links
Key: hideLinks
Name: Hide links
Default: false
Owner Id
Key: ownerId
Name: Owner Id
Default: null
Owner type
Key: ownerType
Name: Owner type
Default: null
Default value for new event (title, from, to)
Key: defaultEventValues
Name: Default value for new event (title, from, to)
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen can add event — gen-can-add-event.json
Demonstrates widget.canAddEvent = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Can add event",
"description": "Demonstrates widget.canAddEvent = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"canAddEvent": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen can edit event — gen-can-edit-event.json
Demonstrates widget.canEditEvent = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Can edit event",
"description": "Demonstrates widget.canEditEvent = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"canEditEvent": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen filter only by owner — gen-filter-only-by-owner.json
Demonstrates widget.filterOnlyByOwner = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Filter event by owner",
"description": "Demonstrates widget.filterOnlyByOwner = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"filterOnlyByOwner": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen show event title — gen-show-event-title.json
Demonstrates widget.showEventTitle = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Show event title",
"description": "Demonstrates widget.showEventTitle = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"showEventTitle": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen show event type — gen-show-event-type.json
Demonstrates widget.showEventType = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Show event type",
"description": "Demonstrates widget.showEventType = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"showEventType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen show event user — gen-show-event-user.json
Demonstrates widget.showEventUser = "exampleValue" on tsm-calendar.
{
"type": "object",
"title": "Calendar Panel — Show event user",
"description": "Demonstrates widget.showEventUser = \"exampleValue\" on tsm-calendar.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar",
"showEventUser": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Full Calendar Panel tsm-full-calendar
Full calendar panel with all events displayed.
Widget Or Layout: unknown
Value:
{
"title": "Full Calendar",
"widget": {
"type": "tsm-full-calendar"
},
"type": "layout",
"config": {
"filterOnlyByOwner": true,
"canAddEvent": true,
"canEditEvent": true,
"hideLeftPanel": true
}
}
New Calendar Button tsm-calendar-create-button
Button to create a new calendar.
Widget Or Layout: unknown
Value:
{
"title": "Create New Calendar",
"widget": {
"type": "tsm-calendar-create-button"
},
"type": "layout",
"config": {
"ownerId": "",
"ownerType": ""
}
}
Inputs
Owner type
Key: ownerType
Name: Owner type
Default: null
Owner Id
Key: ownerId
Name: Owner Id
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-create-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen owner id — gen-owner-id.json
Demonstrates widget.ownerId = "exampleValue" on tsm-calendar-create-button.
{
"type": "object",
"title": "New Calendar Button — Owner Id",
"description": "Demonstrates widget.ownerId = \"exampleValue\" on tsm-calendar-create-button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar-create-button",
"ownerId": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner type — gen-owner-type.json
Demonstrates widget.ownerType = "exampleValue" on tsm-calendar-create-button.
{
"type": "object",
"title": "New Calendar Button — Owner type",
"description": "Demonstrates widget.ownerType = \"exampleValue\" on tsm-calendar-create-button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-calendar-create-button",
"ownerType": "exampleValue"
}
}
},
"layout": [
"field"
]
}