Configuring the Widget

Data Source

To display events in the Readerboard widget, connect a calendar data source to the Set data source property via the widget's data source picker.

The widget automatically detects which calendar platform the data comes from and normalizes it into a standard event format. No additional configuration is needed for source selection.

Read more about supported data source formats here.

General Styling Settings

This group controls the widget's background appearance and content padding.

Background Type

Select the type of background for the widget.

• Color - Displays a solid color background (default).
• Image - Displays an uploaded image as the background.

Default: Color

Background Color

Visible when Background Type is set to "Color".

Select the background color for the widget using the color picker. Supports RGBA values for transparency.

Default: rgba(255, 255, 255, 0.6)

Background Image

Visible when Background Type is set to "Image".

Upload an image file to use as the widget background.

Background Image Fit

Visible when Background Type is set to "Image".

Controls how the background image is scaled within the widget container.

• Cover - Image covers the entire container, cropping if necessary to maintain aspect ratio (default).
• Contain - Image fits entirely within the container, potentially leaving empty space.
• Fill - Image stretches to fill the container exactly, ignoring aspect ratio.

Default: Cover

Inner Padding

Sets the padding around the content inside the widget, in pixels. This controls the spacing between the widget edges and the event tables.

When no events are available, padding is automatically set to 0.

• Range: 0 - 128 px
• Default: 8 px

Readerboard Settings

This group controls how pages transition and how pagination is displayed.

Animation Type

Select the animation style used when transitioning between pages.

• None - Pages switch instantly with no animation (default).
• Slide - Pages slide in from one direction while the previous page slides out.
• Fade - Pages fade out and fade in during transitions.

Default: None

Animation durations:

• Fade: 500ms
• Slide: 800ms

Slide Direction

Visible when Animation Type is set to "Slide".

Controls the direction of the slide animation.

• Left to Right - Current page slides out to the right, new page enters from the left (default).
• Right to Left - Current page slides out to the left, new page enters from the right.
• Top to Bottom - Current page slides out downward, new page enters from the top.
• Bottom to Top - Current page slides out upward, new page enters from the bottom.

Default: Left to Right

Page Interval (seconds)

Sets the time in seconds between automatic page transitions. The widget cycles through all pages on a continuous loop.

• Range: 3 - 60 seconds
• Default: 10 seconds

Show Page Number

When enabled, a page indicator (e.g., "1/3") is displayed at the bottom-right corner of the widget.

When disabled, the page indicator is hidden, and sensor events (currentPageNumber and maxPageNumber) are emitted instead, allowing external widgets to display pagination information.

Default: Enabled

Grouping Settings

This group controls how events are organized into groups.

Group By

Select which event field is used to group events into separate tables.

• None - All events are displayed in a single table without grouping (default).
• Room - Events are grouped by their location/room.
• Owner - Events are grouped by the event organizer/owner.
• Organization - Events are grouped by the associated organization.

When grouping is active, each group is rendered as a separate table with a caption showing the group name. Events with an empty or missing group field value are placed under the "Unknown" group.

Default: None

Group Header Styling

Visible when Group By is not set to "None".

These settings control the appearance of group header labels displayed above each event table.

• Show Group Header - Toggle the visibility of group headers. When disabled, events are still grouped but without visible labels. Default: Enabled
• Group Header Font Size - The font size in pixels. Range: 10 - 100 px. Default: 18 px
• Font Family - The typeface for group headers. Default: Arial
• Font Style - The style (normal, italic, bold, etc.) for group headers. Default: bold
• Font Color - The text color for group headers. Default: #000000
• Background Color - The background color of group headers. Supports RGBA for transparency. Default: transparent

Date & Time Format

This group controls how the Time column is displayed in the event table.

Start Format / End Format

Two format patterns that control how the start and end date/time are displayed in the Time column. Each side can use a different pattern, joined by the configured separator.

Leave the End format empty to use the same pattern as the start format.

You can freely combine date and time tokens in any order. Only the tokens you include will appear in the output. Any characters that are not part of a token are kept as-is (separators, commas, spaces, etc.).

Start format default: HH:mm End format default: (empty -- inherits start format)

Available Tokens

Date tokens:

Token	Description	Example Output
yyyy	Full year	2026
MMMM	Full month name	March
MMM	Abbreviated month name	Mar
MM	Zero-padded month number	03
dddd	Full day of week name	Thursday
EEE	Abbreviated day of week name	Thu
dd	Zero-padded day of month	19

Time tokens:

Token	Description	Example Output
HH	24-hour, zero-padded	09, 14
H	24-hour, no padding	9, 14
hh	12-hour, zero-padded	09, 02
h	12-hour, no padding	9, 2
mm	Minutes, zero-padded	05, 30
ss	Seconds, zero-padded	09, 45
A	AM/PM uppercase	AM, PM
a	am/pm lowercase	am, pm

Examples

Start Format	End Format	Output (with default separator)
HH:mm	(empty)	14:30 - 16:00
h:mm a	(empty)	2:30 pm - 4:00 pm
MMM dd, HH:mm	HH:mm	Mar 19, 14:30 - 16:00
MMMM dd, h:mm A	h:mm A	March 19, 2:30 PM - 4:00 PM
EEE, MMM dd HH:mm	HH:mm	Thu, Mar 19 14:30 - 16:00
dddd, MMM dd	MMM dd	Thursday, Mar 19 - Mar 19
MM/dd/yyyy HH:mm	(empty)	03/19/2026 14:30 - 03/19/2026 16:00

A common use case is to show the full date on the start side and only the time on the end side (e.g., start: MMM dd, HH:mm, end: HH:mm produces Mar 19, 14:30 - 16:00).

Month and day names are locale-aware (defaults to en-US).

Separator

The text displayed between the start and end formatted values.

Default: -

Spacing Around Separator

When enabled, a space is automatically added before and after the separator text. This is needed because the platform trims whitespace from text fields.

Default: Enabled

Combined examples:

Separator	Spacing	Output
-	On	14:30 - 16:00
/	On	14:30 / 16:00
to	On	14:30 to 16:00
|	On	14:30 | 16:00
-	Off	14:30-16:00
(empty)	On	14:30 16:00
(empty)	Off	14:3016:00

Time Column Styling

These settings control the font appearance of the Time column independently from the rest of the table body. When not set, the Time column inherits the table body font settings.

• Font Size - The font size in pixels for the time column. When set to 0, inherits the event row font size. Range: 0 - 100 px. Default: 0 (inherit)
• Font Family - The typeface for the time column. Default: (inherit from table body)
• Font Style - The style (normal, italic, bold, etc.) for the time column. Default: (inherit from table body)
• Font Color - The text color for the time column. Default: (inherit from table body)

Event Filtering

This group controls which events are displayed based on their timing.

Show Expired Events

Controls whether events that have already ended are displayed.

• Show all events - All events are displayed regardless of their end time (default).
• Hide expired events - Events whose end date/time has passed (relative to the current device time) are automatically hidden.

An event is considered expired when its end date and end time are both before the current time. Events without an end date or end time are never considered expired.

Default: Show all events

Event Date Filter

Filters events by date range or limits the number of visible events per day.

• Show all events - No date filtering is applied (default).
• Today's Events - Only events starting today are shown.
• 1-10 Events Today - Only events starting today are shown, limited to the first 1 through 10 events respectively.
• Today's and Tomorrow's Events - Events starting today or tomorrow.
• Today's and Next 2-6 Day's Events - Events starting from today through the next 2 to 6 days respectively.
• This Week's Events - Events starting within the current week (Sunday through Saturday).
• This Week and Next 1-3 Week's Events - Events from this week plus 1 to 3 additional weeks.
• This Month's Events - Events starting within the current calendar month.

Default: Show all events

The date filter uses the event's start date for comparison. If an event has no start date, it is excluded when any filter other than "Show all events" is active.

When using a count-limited filter (e.g., "3 Events Today"), the limit applies to the total number of events after date filtering, not per group.

Title Settings

This group controls the optional title bar displayed at the top of the widget.

Title Text

The text to display as the widget title. Leave empty to hide the title entirely.

Default: (empty - no title shown)

Title Font Size

Visible when Title Text is not empty.

The font size of the title in pixels.

• Range: 12 - 100 px
• Default: 24 px

Title Font Settings

Visible when Title Text is not empty.

• Font Family - Default: Arial
• Font Style - Default: normal
• Font Color - Default: #000000

Page Content Settings

This group controls the appearance of the event table content.

Visible Columns

A multi-line text area that controls which columns appear in the event table, their order, and optionally their width. Each line defines one column.

Default:

time
title
room

Available columns:

Column ID	Header Label	Data
time	Time	Combined start + separator + end (uses Time Column format settings)
startTime	Start	Start date/time only (uses the Start format pattern)
endTime	End	End date/time only (uses the End format pattern)
separator	(none)	Displays the configured separator text (e.g. -)
title	Event	Event name/subject
room	Location	Room or venue name
owner	Owner	Event organizer
organization	Organization	Associated company, department, or group

The startTime, endTime, and separator columns allow you to split the time display across separate columns for more control over layout and spacing. Use them instead of the combined time column when you need individual control.

Column Width

You can set a column's width as a percentage by appending [size:X] after the column name, where X is the width in percent.

Columns without a [size:X] tag share the remaining width equally.

Examples:

Basic column selection (equal widths):

time
title
room

Custom widths:

time[size:25]
title[size:50]
room[size:25]

Mixed (time gets 20%, title and room split the remaining 80% equally):

time[size:20]
title
room

All five columns with custom widths:

time[size:15]
title[size:30]
room[size:20]
owner[size:15]
organization[size:20]

Spacer Columns

A line containing only [size:X] (with no column name) creates an empty spacer column. This is useful for adding visual spacing between data columns.

time[size:20]
[size:5]
title[size:50]
[size:5]
room[size:20]

This creates a 5-column table with empty gap columns between Time, Event, and Location.

Column IDs are case-insensitive. Invalid IDs are silently skipped. If all IDs are invalid or the field is empty, the default columns are used. Legacy comma-separated format (e.g., time, title, room) is also supported for backward compatibility.

Event Row Font Size

The font size for event data rows and table header rows, in pixels. This size also affects pagination calculation - larger fonts result in fewer events per page.

• Range: 10 - 100 px
• Default: 14 px

Row Colors

Alternate row background colors for improved readability.

• Odd Row Background - Background color for rows 1, 3, 5, etc. Default: rgba(255, 255, 255, 0.3)
• Even Row Background - Background color for rows 2, 4, 6, etc. Default: transparent

Table Header

Settings for the column header row (Time, Event, Location).

• Show Table Header - Toggle the visibility of the header row. Default: Enabled
• Font Family - Default: Arial
• Font Style - Default: bold
• Font Color - Default: #000000

Table Body

Settings for the event data rows.

• Font Family - Default: Arial
• Font Style - Default: normal
• Font Color - Default: #000000

No Events Text Settings

This group controls the message displayed when no events are available (either the data source is empty, or all events have been filtered out).

Text

The message to display when there are no events.

Default: No events scheduled

Font Size

The font size in pixels.

• Range: 12 - 100 px
• Default: 24 px

Font Settings

• Font Family - Default: Arial
• Font Style - Default: normal
• Font Color - Default: #333333

How Pagination Works

The Readerboard widget automatically splits events across multiple pages based on the available display area. The pagination system considers the following when calculating how many events fit on a page:

1. Container height - The total height of the widget minus title and page indicator areas.
2. Event row height - Calculated from the event font size multiplied by a line height factor of 1.3.
3. Table header height - The height of the column header row (if visible).
4. Group header height - The height of group caption rows (if grouping is active).
5. Table margins - Spacing between separate group tables.

When a group has more events than can fit on a single page, the remaining events continue on the next page under the same group header.

Pagination recalculation is debounced (150ms delay) to prevent UI flickering when settings are rapidly changed in the editor.