Skip to main content
Version: 2.4

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​

title

Key: title

Name: title

Default: null

Eventtypefilter

Key: eventTypeFilter

Name: Eventtypefilter

Default: null

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.

Mobile: tap selects the record

Key: mobileClickSelection

Name: Mobile: tap selects the record

Description: On mobile, tapping a card selects the record instead of opening its detail. Has no effect on desktop.

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": "object"
}

Inputs​

Value

Key: selectProperty

Name: Value

Default: "all"

Default value

Key: default

Name: Default value

Default: ""

Calendar Events Overview tsm-calendar-events-overview​

Overview of calendar events (e.g. vacations) per user and user group in a daily grid.

Widget Or Layout: unknown

Value:

{
  "title": "Events Overview",
  "widget": {
    "type": "tsm-calendar-events-overview"
  },
  "type": "layout",
  "config": {
    "defaultEventTypeCodes": [],
    "defaultRangePreset": "month"
  }
}

Inputs​

Default event types

Key: defaultEventTypeCodes

Name: Default event types

Description: Calendar event types preselected on first display (e.g. VACATION). Users can change them at runtime and the selection is stored in the form value.

Default: ["VACATION"]

Default range

Key: defaultRangePreset

Name: Default range

Description: Displayed period range on first display (week, work week, month).

Default: "month"

Allow selection change

Key: allowSelectionChange

Name: Allow selection change

Description: When disabled, users cannot change the selected groups, users, or event types at runtime.

Default: true

Settings key

Key: storageKey

Name: Settings key

Description: The key under which the user's selection is stored in their user parameters. Two placements sharing a key share the settings; different keys keep separate ones.

Default: "default"

Height

Key: height

Name: Height

Description: Maximum table height (e.g. 600px).

Default: "600px"

Examples​

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-calendar-events-overview/. Each is a complete validated FluentSchema — copy & adapt for your form.

Basic — 01-basic.json

{
  "type": "object",
  "title": "Calendar events overview — basic",
  "properties": {},
  "layout": [
    {
      "type": "layout",
      "widget": {
        "type": "tsm-calendar-events-overview"
      }
    }
  ]
}

Vacation planning — 02-vacation-planning.json

Project-manager dashboard: vacations across teams. The designer only presets the defaults — what each user picks at runtime is stored in their own user parameters under storageKey.

{
  "type": "object",
  "title": "Calendar events overview — vacation planning board",
  "description": "Project-manager dashboard: vacations across teams. The designer only presets the defaults — what each user picks at runtime is stored in their own user parameters under storageKey.",
  "properties": {},
  "layout": [
    {
      "type": "layout",
      "title": "Team vacations",
      "widget": {
        "type": "tsm-calendar-events-overview"
      },
      "config": {
        "defaultEventTypeCodes": [
          "VACATION"
        ],
        "defaultRangePreset": "month",
        "allowSelectionChange": true,
        "height": "480px",
        "storageKey": "vacation-board"
      }
    }
  ]
}

Gen allow selection change — gen-allow-selection-change.json

Allow selection change: When disabled, users cannot change the selected groups, users, or event types at runtime.

{
  "type": "object",
  "title": "Calendar Events Overview — Allow selection change",
  "description": "Allow selection change: When disabled, users cannot change the selected groups, users, or event types at runtime.",
  "properties": {},
  "layout": [
    {
      "widget": {
        "type": "tsm-calendar-events-overview"
      },
      "type": "layout",
      "config": {
        "defaultEventTypeCodes": [
          "VACATION"
        ],
        "defaultRangePreset": "month",
        "allowSelectionChange": false
      }
    }
  ]
}

Notes​

Layout widget: overview grid of calendar events (vacations by default) per user, grouped by user groups — rows are users, columns are days, bars are events.

Complexity: intermediate

Tags: calendar, vacation, planning, user-group, overview

Authoring tips:

  • Layout widget — it holds no form value. What the user selects at runtime (groups, users, event types, range preset) is persisted per user in the calendarEventsOverview user parameter, keyed by config.storageKey.
  • config.defaultEventTypeCodes/defaultRangePreset apply only until the user makes their own selection; the displayed date range always opens anchored on today.
  • Group members resolve via user-user-groups; users without a USER calendar still render as rows with no events.
  • eventTypeCodes filter events client-side by type.code; an empty array means all types.
  • allowSelectionChange: false renders the group/user/type selectors read-only; range navigation stays available.
  • Row density follows the global compactness setting from the topbar (body.compact-1/.compact-2 scale Tailwind --spacing) — the widget has no density option of its own.

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

Allowed values

Key: allowedValues

Name: Allowed values

Default: []

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 config.filterable = true on tsm-calendar-subtype-lov.

{
  "type": "object",
  "title": "Calendar Subtype Select — Show filter",
  "description": "Demonstrates config.filterable = true on tsm-calendar-subtype-lov.",
  "properties": {
    "field": {
      "widget": {
        "type": "tsm-calendar-subtype-lov"
      },
      "type": "string",
      "title": "Field",
      "config": {
        "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": "object"
}

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

Selection mode

Key: selectionMode

Name: Selection mode

Default: "multiple"

Multiple value storage mode

Key: returnType

Name: Multiple value storage mode

Default: "array"

Tree display

Key: treeMode

Name: Tree display

Description: Enable tree display of items. Items must have a field referencing the parent record ID.

Default: false

Parent reference field

Key: treeParentField

Name: Parent reference field

Description: Name of the field on each record that contains the parent record ID (e.g. parentId).

Default: null

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 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": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "keyboardOnMobile": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen multiselect — gen-multiselect.json

Demonstrates config.multiselect = true on tsm-calendar-template-lov.

{
  "type": "object",
  "title": "Calendar Template Select — Selection using a listing (one or more values)",
  "description": "Demonstrates config.multiselect = true on tsm-calendar-template-lov.",
  "properties": {
    "field": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "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": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "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": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "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": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "showNoneText": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen tree mode — gen-tree-mode.json

Tree display: Enable tree display of items. Items must have a field referencing the parent record ID.

{
  "type": "object",
  "title": "Calendar Template Select — Tree display",
  "description": "Tree display: Enable tree display of items. Items must have a field referencing the parent record ID.",
  "properties": {
    "field": {
      "widget": {
        "type": "tsm-calendar-template-lov"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "treeMode": true
      }
    }
  },
  "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 config.addRowWrap = true on tsm-calendar-event-configuration-data.

{
  "type": "object",
  "title": "Calendar Event Conf. Card — Wrap value in row['value']",
  "description": "Demonstrates config.addRowWrap = true on tsm-calendar-event-configuration-data.",
  "properties": {
    "field": {
      "widget": {
        "type": "tsm-calendar-event-configuration-data"
      },
      "type": "object",
      "title": "Field",
      "config": {
        "addRowWrap": true
      }
    }
  },
  "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 hide links — gen-hide-links.json

Demonstrates config.hideLinks = true on tsm-calendar.

{
  "type": "object",
  "title": "Calendar Panel — Hide links",
  "description": "Demonstrates config.hideLinks = true on tsm-calendar.",
  "properties": {},
  "layout": [
    {
      "widget": {
        "type": "tsm-calendar"
      },
      "type": "layout",
      "config": {
        "filterOnlyByOwner": true,
        "hideLinks": true
      }
    }
  ]
}

Gen recurrent only custom — gen-recurrent-only-custom.json

Demonstrates config.recurrentOnlyCustom = true on tsm-calendar.

{
  "type": "object",
  "title": "Calendar Panel — Recurrent only custom",
  "description": "Demonstrates config.recurrentOnlyCustom = true on tsm-calendar.",
  "properties": {},
  "layout": [
    {
      "widget": {
        "type": "tsm-calendar"
      },
      "type": "layout",
      "config": {
        "filterOnlyByOwner": true,
        "recurrentOnlyCustom": true
      }
    }
  ]
}

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