Extras
ResourceTimeline
Bit.BlazorUI.ExtrasResourceSchedulerGanttResourcePlanner
BitResourceTimeline is a high-performance resource timeline - a planner or scheduler with the time along the horizontal axis, the resources down the vertical one and the allocations drawn as bars in between, for gate and fleet planning, crew rosters, machine schedules and the like. One engine lays the board out and drives it while a canvas, SVG or HTML renderer paints it, so tens of thousands of bars stay fluid. It zooms from weeks down to minutes, selects and navigates with the pointer and the keyboard, edits (move, resize, create, copy, paste and delete) under the app's control, nests resources into collapsible groups, draws its axes in any time zone and locale, streams large data sets or loads them window by window on demand, and takes templates for its resource column, its tooltips and its corner.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
The timeline fills its container, so give the element around it a height. Its axes are laid out left to
right whatever the direction of the page.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A Config is all the timeline needs: its Resources down the vertical axis, the time range
from StartDate to EndDate along the horizontal one, and the Allocations drawn as
bars between them, each on the row its ResourceId names. It opens with one day in view: scroll
sideways for the rest, hover a bar for its tooltip, and zoom with Ctrl + wheel or a pinch. The Config
is compared by reference, so a new instance is what reloads it.
Resource hierarchy
A resource whose ParentId names another one is nested under it, to any depth: the parent becomes
a group row, indented by its depth, that a click expands or collapses. Collapsed starts a group
closed (Terminal B). A group row can still hold bars of its own, like the cleaning and the inspection
of Terminal A.
Bar appearance
Each allocation can look its own way. Color fills the bar and Height sets its thickness
(4px unless it is given); TextAbove, TextBelow, TextStart and TextEnd label
it on every side; StartBar and EndBar draw edge bars before and after it, here a delay;
and Tooltip replaces the default hover text. Icons anchor images - URLs or data URIs - at
the Position Start, End, Above, Below or Center of the bar, beside it or, with Inside,
within it, in a box of Size pixels. Labels and icons are left out of bars too narrow for them.
Bar sections
Sections split a bar into parts with colors, text and an icon of their own - the phases of a
turnaround, the part of a job that has run. A section is bounded by times (StartTime,
EndTime) or by percentages of the bar (StartPercent, EndPercent), an edge given
neither way is the bar's own, and it always stays within the bar. BackgroundColor,
BorderColor and ForegroundColor paint it, and its Text and Icon (fitted in
IconSize) sit at their TextPosition and IconPosition. What does not fit is left out
rather than cut, so give a sectioned bar a Height its text fits in.
Renderers
Options carries the visual configuration of the timeline, and its Renderer picks what
paints it: Canvas (the default, and the fastest on dense data), Svg (vector output,
inspectable and print friendly) or Html (a real element per visible bar, carrying its id in
data-bar-id). One engine drives all three, so the data, the interaction and the events are the same.
Options is compared by reference, so a new instance is what applies a change - here, a switch of the
renderer at runtime. On the HTML renderer the ClassName of an allocation lands on the element of
its bar for your own CSS: switch to Html to see the flights already gone hatched.
Renderer
Navigation & zoom
A reference to the timeline drives its view. PanByDaysAsync moves it by whole days without
changing the zoom - 24 hours a step, or to a local midnight with PanToDayStart - and
GoToTodayAsync centers the current time, which AutoScrollToNow does as the first load
lands. ZoomInAsync, ZoomOutAsync, ZoomToDaysAsync (that many days fill the view)
and SetPixelsPerHourAsync zoom around the center within MinPixelsPerHour and
MaxPixelsPerHour, ResetZoomAsync returns to PixelsPerHour (one day in view while it
is not set), and ScrollToTimeAsync centers any time. OnViewChanged reports the visible
range and the scale, at most once a frame. Ctrl + wheel, a pinch, PageUp / PageDown and
Ctrl + plus / minus / 0 do the same from the input devices.
Scroll or zoom the timeline
Selection & pointer events
A click selects a bar, Ctrl / Cmd + click toggles one, Shift + click selects a range and a drag on empty
content draws a marquee; from the keyboard the arrows move between the bars, Enter selects and Escape
clears. OnSelectionChanged reports the selected bars - the very instances of the Config - when
the set changes, and SelectAsync, ClearSelectionAsync and GetSelectedBarsAsync
drive it from code, with ScrollToAllocationAsync and ScrollToResourceAsync bringing a bar
or a row into view. OnClick, OnDoubleClick and OnContextMenu (a right-click, the
browser's menu suppressed) say what was under the pointer - the area, the resource, the time and the
bar - with the coordinates to place a menu of your own at.
Selected: nothing
Click:
Double-click:
Right-click:
Editing
With Editable a bar is dragged to move it in time - and onto another row unless
AllowResourceChange is off - or by an edge to resize it, snapped to EditSnapMinutes;
Alt + arrows do the same from the keyboard, and a drag of one of several selected bars moves them all.
Before a change is committed OnAllocationChanging (one bar) and OnAllocationsChanging
(several) can refuse it - here, any flight that would start in the past - and the bars snap back without
a reload; OnAllocationChanged then reports each accepted change on the very instance of the
Config. With EmptyDragAction set to Create a drag on empty content draws a new bar that
OnAllocationCreating builds, Ctrl / Cmd + C and V copy and paste through
OnAllocationsCopying, and with AllowDelete Delete / Backspace removes the selection once
OnAllocationsDeleting agrees - the timeline never invents ids. Locked bars, the flights at
their gates right now, can be selected but not moved, resized or (here) deleted.
Overlap & stacking
Bars overlapping in time on one row are stacked into lanes BarMargin pixels apart, and the row
grows to hold them (ResourceHeight is its minimum, BarHeight the thickness of a bar).
StackLabelClearance widens the gap by the room the labels and icons of the bars need (Gate A3),
and StackOnLabelCollision also stacks bars whose labels would collide though their times do not
(Gate A2); both are on by default. MaxStackLanes caps a stack: the bars beyond it hide behind a
+N marker that lists them on hover and selects them on click. While editing, turning
AllowOverlap off refuses a move or a resize that would overlap another unlocked bar of its row -
drag a bar onto the one of Gate A4.
MaxStackLanes
Working time & surface
NonWorkingDays (0 = Sunday ... 6 = Saturday) and WorkingHoursStart /
WorkingHoursEnd (minutes from midnight) wash the weekends and the hours off. Surface
colors the content under the grid and the bars: its Columns stripe it by day, by hour (a
Span of 8 makes three shifts, Align Repeat restarts them every day) or by week, its
Rows stripe the resource rows, ResourceColors gives a row a color of its own,
Combine Checker crosses the two, and Bands paint explicit ranges across every row or along
one; ShadeTimeAxis and ShadeResourceAxis carry the colors into the axes. AxisLines
recolors the grid lines, here every midnight and every row. The Background and the
LineColor of a resource win over all of it (Gate A3, Gate A5). A new Surface or AxisLines
replaces the previous one as a whole, and an empty one clears it.
Surface
Time zone & locale
The axes are drawn in the viewer's time zone unless TimeZone names an IANA one; the bars are
absolute instants, so only the axis moves under them. ShowUtcTime adds a second hour row in UTC -
half an hour off under the +05:30 of Kolkata - and a taller TimeAxisHeight gives it room.
Locale formats the day labels, the tooltips and the announcements, Hour12 labels the hours
3 PM rather than 15, and FirstDayOfWeek is where the weeks of the surface start (the week start
of the locale while it is not set) - zoom to seven days to see the weeks.
TimeZone
Locale
FirstDayOfWeek
Templates
ResourceTemplate replaces the labels of the resource column with your own markup for each visible
row, receiving its Resource, its Depth and whether it HasChildren or is
Collapsed; a group row keeps its expand / collapse button before it. TooltipTemplate
renders the hovered bar in a positioned overlay, on every renderer, instead of the built-in tooltip -
here with its times in UTC, the TimeZone the axis is drawn in, since the template is rendered
by .NET, which may run on a server in another zone than the viewer's.
TopStartContent fills the corner where the axes meet. LoadingContent replaces the spinner
shown while the bars load, and LoadingMinDurationMs keeps it up long enough to be seen - press
Reload, which assigns a new Config; PreserveScrollOnReload keeps the view where it was.
Gates
flights in 2 weeks
<_BitResourceTimelineRenderGate RenderKey="_resourceRowsRenderKey">
Resource column
The resource column is ResourceAxisWidth wide (150px unless it is given) and, unless
ResourceAxisResizable is off, resized by dragging its divider - or by focusing the divider and
using the arrows, Home and End - between ResourceAxisMinWidth and ResourceAxisMaxWidth.
OnResourceAxisWidthChanged reports the width once a resize is committed, for the app to keep and
pass back.
ResourceAxisWidth: 200 px
Large data
The engine draws only what is in view, so tens of thousands of bars - about 40,000 here, of 160 gates
over five weeks - scroll and zoom as smoothly as a handful. A data set larger than
LoadBatchSize (10,000 by default) is streamed to the browser in batches of that size rather than
in one huge interop call. A few changed bars need no reload: UpsertAllocationsAsync merges
changed or new bars by id and RemoveAllocationsAsync drops bars by id, both keeping the
selection, while ReloadAsync sends a Config changed in place again in full. The first two leave
Config.Allocations as it is, so the app keeps that in step itself.
On-demand loading
With LoadAllocationsAsync the bars are not taken from the Config, which then holds the resources
and the range alone: the timeline asks for the bars of the window it needs - the visible range plus
WindowBufferFactor views on each side - and asks again once a scroll or a zoom comes within
WindowRefetchThreshold views of its edge, WindowDebounceMs after the last move. A fetch
overtaken by a newer one is dropped. Here 100 gates over eight months, some 170,000 flights, are served
a few thousand at a time by a simulated server.
Waiting for the first window
Disabled
Disabled makes an editable timeline view-only: it still scrolls and zooms, from the pointer and
from PageUp / PageDown and Ctrl + plus / minus, but it shows no tooltips, selects and edits nothing, and
raises no click, selection or editing callback - the click counter stands still while it is on.
Clicks: 0
Texts
Texts holds every word of the timeline: its accessible name and role description, the loading
text, the labels of the group buttons and of the column divider, the formats of its tooltips and of its
+N markers, and everything it announces to screen readers. They default to English; an instance with
the ones to override localizes them, and the Locale of the Options formats the dates to match.
The AriaLabel parameter, when set, wins over Texts.AriaLabel.
Style & Class
Style and Class reach the root, Styles and Classes every part by name:
Root, Viewport, Corner, ResourceOverlay, ResourceRow, ResourceContent, GroupToggle, TooltipOverlay,
Loading, Spinner and LoadingText. The colors and the font the engine draws with follow the bit theme,
light or dark, through the public --bit-ResourceTimeline-* custom properties (see the
CSS variables table): set them in a Style, on an
ancestor or on
:root. The Colors of the Options win over them, for a palette set in
code.
Style & Class (with CSS variables):
Styles:
Gates
Classes:
<_BitResourceTimelineRenderGate RenderKey="_resourceRowsRenderKey">
Options.Colors:
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitResourceTimeline CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-ResourceTimeline-content-background | var(--bit-clr-bg-pri) | Background of the scrollable content. Options.Colors.ContentBg wins over it. |
| --bit-ResourceTimeline-axis-background | var(--bit-clr-bg-sec) | Background of the time and resource axes and of their corner. Options.Colors.AxisBg wins over it. |
| --bit-ResourceTimeline-axis-border-color | var(--bit-clr-brd-pri) | Lines within and around the axes. Options.Colors.AxisBorder wins over it. |
| --bit-ResourceTimeline-tick-color | var(--bit-clr-brd-pri) | Hour ticks of the time axis. Options.Colors.Tick wins over it. |
| --bit-ResourceTimeline-label-color | var(--bit-clr-fg-sec) | Hour and resource labels. Options.Colors.Label wins over it. |
| --bit-ResourceTimeline-date-label-color | var(--bit-clr-fg-pri) | Date labels of the time axis. Options.Colors.DateLabel wins over it. |
| --bit-ResourceTimeline-grid-color | var(--bit-clr-brd-sec) | Grid lines of the content. Options.Colors.Grid wins over it. |
| --bit-ResourceTimeline-bar-color | var(--bit-clr-pri) | Fill of a bar that has no Color of its own. Options.Colors.Bar wins over it. |
| --bit-ResourceTimeline-bar-selected-color | var(--bit-clr-pri-dark) | Fill of a selected bar that has no Color of its own. Options.Colors.BarSelected wins over it. |
| --bit-ResourceTimeline-bar-selected-border-color | var(--bit-clr-pri-dark-active) | Outline of a selected bar. Options.Colors.BarSelectedBorder wins over it. |
| --bit-ResourceTimeline-bar-label-color | var(--bit-clr-fg-sec) | Labels around the bars. Options.Colors.BarLabel wins over it. |
| --bit-ResourceTimeline-now-color | var(--bit-clr-err) | The current-time line. Options.Colors.Now wins over it. |
| --bit-ResourceTimeline-selection-background | var(--bit-clr-pri-tint) | Fill of the marquee rectangle. Options.Colors.SelectionFill wins over it. |
| --bit-ResourceTimeline-selection-border-color | var(--bit-clr-pri) | Outline of the marquee rectangle. Options.Colors.SelectionBorder wins over it. |
| --bit-ResourceTimeline-focus-color | var(--bit-clr-pri-focus) | Focus indicator of the bars, of the viewport and of the column divider. Options.Colors.Focus wins over it for the bars. |
| --bit-ResourceTimeline-tooltip-background | var(--bit-clr-tooltip-bg) | Fill of the built-in tooltip. Options.Colors.TooltipBg wins over it. |
| --bit-ResourceTimeline-tooltip-color | var(--bit-clr-tooltip-fg) | Text of the built-in tooltip. Options.Colors.TooltipText wins over it. |
| --bit-ResourceTimeline-non-working-background | var(--bit-clr-fg-pri) at 6% | Wash over the non-working days and hours. Options.Colors.NonWorking wins over it. |
| --bit-ResourceTimeline-font-family | var(--bit-tpg-font-family) | Family of the labels the engine draws, while no font option sets them. |
| --bit-ResourceTimeline-resource-color | var(--bit-clr-fg-pri) | Text of the rows of the ResourceTemplate. |
| --bit-ResourceTimeline-resource-font-size | var(--bit-tpg-fs-sm) | Text size of the rows of the ResourceTemplate. |
| --bit-ResourceTimeline-toggle-color | var(--bit-clr-fg-sec) | The expand/collapse button of a group row of the ResourceTemplate. |
| --bit-ResourceTimeline-toggle-hover-color | var(--bit-clr-pri) | That button under the pointer. |
| --bit-ResourceTimeline-loading-background | var(--bit-clr-bg-pri) at 70% | The veil of the loading overlay. |
| --bit-ResourceTimeline-loading-color | var(--bit-clr-fg-sec) | The text of the loading overlay. |
| --bit-ResourceTimeline-spinner-size | spacing(4.5) | The default spinner of the loading overlay. |
| --bit-ResourceTimeline-spinner-color | var(--bit-clr-pri) | The turning arc of that spinner. |
| --bit-ResourceTimeline-spinner-track-color | var(--bit-clr-brd-sec) | The track of that spinner. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitResourceTimeline parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitResourceTimelineClassStyles? | null | Custom CSS classes for different parts of the BitResourceTimeline. |
| Config | BitResourceTimelineConfig? | null | The resources, the time range and the bars to render. Compared by reference: a Config changed in place needs a ReloadAsync. |
| LoadAllocationsAsync | Func<BitResourceTimelineWindow, Task<IReadOnlyList<BitResourceTimelineAllocation>>>? | null | On-demand loading: called with the window the view needs (the visible range plus a buffer) for every allocation overlapping it, and again as a scroll or zoom nears its edge. Calls can overlap - a newer one does not wait for an older one, whose result is dropped. Swapping one delegate for another reloads nothing until the next window is fetched (ReloadAsync fetches it at once). The Config still supplies the resources and the range. Null loads everything up front. |
| LoadBatchSize | int | 10000 | Allocations per interop call; a larger set is streamed in batches of this size. Zero or less sends everything at once. |
| LoadingContent | RenderFragment? | null | Custom content of the loading overlay (a spinner and a text by default). |
| LoadingMinDurationMs | int | 0 | Minimum time in ms the loading overlay stays visible. |
| OnAllocationChanged | EventCallback<BitResourceTimelineAllocation> | Raised after a bar is moved, resized or created, with the Config's own instance already updated - a handler only persists it. | |
| OnAllocationChanging | Func<BitResourceTimelineAllocationChange, Task<bool>>? | null | Called before a single-bar move or resize is committed, with the bar already previewed; false restores it. Unset, the edit goes to OnAllocationsChanging (accepted when neither is set). |
| OnAllocationCreating | Func<BitResourceTimelineCreateRequest, Task<BitResourceTimelineAllocation?>>? | null | Called when a bar was drawn on empty content (EmptyDragAction.Create); returns the allocation with an Id of its own, or null to cancel. |
| OnAllocationsChanging | Func<IReadOnlyList<BitResourceTimelineAllocationChange>, Task<bool>>? | null | Called before a multi-bar commit (and a single-bar one while OnAllocationChanging is unset) with a change per bar; false restores them all. |
| OnAllocationsCopying | Func<BitResourceTimelineCopyRequest, Task<IReadOnlyList<BitResourceTimelineAllocation>?>>? | null | Called on paste (Ctrl/Cmd + V); returns the new allocations (with new ids), or null or empty to cancel. |
| OnAllocationsDeleting | Func<IReadOnlyList<string>, Task<bool>>? | null | Called with the ids of the bars Delete/Backspace is about to remove (Options.AllowDelete); false keeps them. |
| OnClick | EventCallback<BitResourceTimelinePointerArgs> | Raised on a click or tap: the bar, the +N marker's bars, the resource row and the time under the pointer, its surface and viewport coordinates and the modifier keys. | |
| OnContextMenu | EventCallback<BitResourceTimelineContextMenuArgs> | Raised on a right-click of a bar, empty content or a resource row, with the arguments of OnClick (the browser's menu is suppressed). | |
| OnDoubleClick | EventCallback<BitResourceTimelinePointerArgs> | Raised on the second click of a double-click (or a double-tap), with the same arguments as OnClick, in addition to it. | |
| OnResourceAxisWidthChanged | EventCallback<int> | Raised with the new, clamped width once the user finishes resizing the resource column; pass it back as Options.ResourceAxisWidth to keep it. | |
| OnSelectionChanged | EventCallback<BitResourceTimelineAllocation[]> | Raised when the set of selected bars actually changes, with every selected bar in selection order (empty when nothing is selected) - the very instances of the Config. | |
| OnViewChanged | EventCallback<BitResourceTimelineView> | Raised at most once a frame when the visible span or the scale changes, for the chrome around the timeline. | |
| Options | BitResourceTimelineOptions? | null | Dimensions, fonts, colors, time zone, zoom limits, editing and surface. A new instance is merged in: a property left null keeps the value in force (a default, or the theme's for colors and fonts). |
| ResourceTemplate | RenderFragment<BitResourceTimelineRowContext>? | null | Template of each row of the resource column, rendered in an overlay instead of the drawn labels; group rows get an expand/collapse button. |
| Styles | BitResourceTimelineClassStyles? | null | Custom CSS styles for different parts of the BitResourceTimeline. |
| Texts | BitResourceTimelineTexts? | null | The texts of the timeline: its accessible names, loading text, tooltip formats and announcements (English by default). |
| TooltipTemplate | RenderFragment<BitResourceTimelineAllocation>? | null | Template of the hover tooltip, rendered in a positioned overlay instead of the built-in one (a +N marker keeps the built-in one). Needs Options.ShowTooltips. |
| TopStartContent | RenderFragment? | null | Custom content of the top-start corner, where the two axes meet. |
BitResourceTimeline public members
| Name | Type | Default value | Description |
|---|---|---|---|
| ClearSelectionAsync | Func<Task> | Clears the selection of bars. | |
| GetPixelsPerHourAsync | Func<Task<double>> | Returns the current horizontal scale in pixels per hour (0 while the timeline is not ready). | |
| GetSelectedBarsAsync | Func<Task<IReadOnlyList<BitResourceTimelineAllocation>>> | Returns the selected bars in selection order; empty when nothing is selected. | |
| GoToTodayAsync | Func<Task<bool>> | Centers the current time; false when it is outside the time range. | |
| PanByDaysAsync | Func<int, bool?, Task<bool>> | Pans by whole days (negative back, 7 a week): exactly 24 hours, or to a local midnight with Options.PanToDayStart (panToDayStart overrides it). False when already at that end. | |
| ReloadAsync | Func<Task> | Sends the data again in full, after the Config was changed in place. | |
| RemoveAllocationsAsync | Func<IReadOnlyList<string>, Task> | Removes bars by id from the timeline, the selection and the focus; unknown ids are ignored. Config.Allocations is not changed. | |
| ResetZoomAsync | Func<Task<double>> | Returns to the automatic (or configured) scale, and returns the new scale in pixels per hour. | |
| ScrollToAllocationAsync | Func<string, Task<bool>> | Scrolls the bar's start and row into view; false for an unknown id. | |
| ScrollToResourceAsync | Func<string, Task<bool>> | Scrolls the row into view vertically; false for an unknown id. | |
| ScrollToTimeAsync | Func<DateTimeOffset, Task<bool>> | Centers the given time; false when it is outside the time range. | |
| SelectAsync | Func<IReadOnlyList<string>, bool, Task> | Sets the selection to the given allocation ids, or adds them to it when additive is true. Unknown ids are ignored. | |
| SetPixelsPerHourAsync | Func<double?, Task<double>> | Sets the scale in px per hour (clamped), or null for the automatic one; returns the new scale. | |
| UpsertAllocationsAsync | Func<IReadOnlyList<BitResourceTimelineAllocation>, Task> | Merges bars into the timeline by id (the last wins), keeping the selection and the focus. Config.Allocations is not changed. | |
| ZoomInAsync | Func<Task<double>> | Zooms in around the center; returns the new scale (0 while not ready). | |
| ZoomOutAsync | Func<Task<double>> | Zooms out around the center; returns the new scale (0 while not ready). | |
| ZoomToDaysAsync | Func<double, Task<double>> | Fits the given number of days into the content area around its center (clamped); returns the new scale. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitResourceTimelineConfig properties
Everything the timeline renders: the resource rows down the vertical axis, the time range along the horizontal axis and the allocation bars within it. Assign a new instance to the Config parameter to render it.
| Name | Type | Default value | Description |
|---|---|---|---|
| Resources | List<BitResourceTimelineResource> | The resource rows rendered along the vertical axis. Required. | |
| StartDate | DateTimeOffset | The start of the time range rendered along the horizontal axis. Required. | |
| EndDate | DateTimeOffset | The end of the time range rendered along the horizontal axis. Required. | |
| Allocations | List<BitResourceTimelineAllocation> | The allocation bars to display (not read while LoadAllocationsAsync is set). Required. |
BitResourceTimelineResource properties
A row of the timeline (a gate, a vehicle, a machine, a person). Resources nest into a hierarchy of any depth through ParentId: a resource with children renders as a collapsible group row, and can still own allocations of its own.
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | The stable identifier the allocations are associated with. Required. | |
| Name | string | The label of the row on the resource axis. Required. | |
| ParentId | string? | null | The Id of the parent resource. When set (and the parent exists), this resource is nested under it, forming a collapsible group; root resources leave it null. Sibling and root order follows the order of the list. |
| Collapsed | bool | false | The initial state of a resource that has children: when true, its descendants start hidden until the group is expanded. Ignored for a resource without children. |
| Background | string? | null | CSS color painted behind the row of this resource, under the grid and the bars. Wins over the row stripes and the ResourceColors of Options.Surface. |
| LineColor | string? | null | CSS color of the horizontal line along the top of the row of this resource. Wins over the row lines and the ResourceColors of Options.AxisLines. |
BitResourceTimelineAllocation properties
A single allocation period drawn as a bar on a resource row.
| Name | Type | Default value | Description |
|---|---|---|---|
| Id | string | The unique identifier of the bar. Required. | |
| ResourceId | string | The Id of the resource the bar is drawn on. Required. | |
| StartTime | DateTimeOffset | The start of the period. | |
| EndTime | DateTimeOffset | The end of the period. | |
| Color | string? | null | CSS color of the bar fill (for example #e8590c or tomato). Falls back to the bar color of the theme, or Options.Colors.Bar. |
| Height | int? | null | The height of the bar in pixels, vertically centered in its row. Falls back to Options.BarHeight. The edge bars share it. |
| TextAbove | string? | null | A label centered above the bar. |
| TextBelow | string? | null | A label centered below the bar. |
| TextStart | string? | null | A label just before the start edge of the bar. |
| TextEnd | string? | null | A label just after the end edge of the bar. |
| Tooltip | string? | null | The hover text of the bar (requires Options.ShowTooltips), a line break separating its lines. When null, a default is built from the labels, the resource name and the time range. |
| StartBar | BitResourceTimelineEdgeBar? | null | A decorative bar drawn immediately before the start edge, in the row and at the height of the bar - commonly a delay before the planned allocation began. |
| EndBar | BitResourceTimelineEdgeBar? | null | A decorative bar drawn immediately after the end edge, in the row and at the height of the bar - commonly a delay after the planned allocation ended. |
| Icons | List<BitResourceTimelineBarIcon>? | null | Icons or small images drawn around (or within) the bar, each anchored to its own position; several at one position line up away from the bar in list order. |
| Sections | List<BitResourceTimelineBarSection>? | null | Parts of the bar drawn with colors, text and an icon of their own, bounded by times or percentages and always within the bar, in list order. |
| Data | JsonElement? | null | A payload of the app preserved on the instance; the engine never reads or paints it. |
| Locked | bool | false | When true, the bar can be selected and shows its tooltip but cannot be moved or resized, by the pointer or the keyboard. |
| ClassName | string? | null | A CSS class put on the element of the bar by the HTML renderer (canvas and SVG ignore it), for paint through the app's own CSS. Pointer events still go to the surface, so :hover does not fire on it. |
BitResourceTimelineEdgeBar properties
A decorative bar drawn immediately before (StartBar) or after (EndBar) a main bar, in its row and at its height, typically a delay. It is not selectable.
| Name | Type | Default value | Description |
|---|---|---|---|
| Duration | TimeSpan | The length of the edge bar: a start bar extends back from the start of the main bar, an end bar forward from its end. A duration of zero or less is not drawn. | |
| Color | string? | null | CSS color of the edge bar. Falls back to the bar color of the theme. |
BitResourceTimelineBarIcon properties
A small icon or image drawn next to (or within) a bar, scaled to fit a square box while keeping its aspect ratio. It is decorative and not selectable.
| Name | Type | Default value | Description |
|---|---|---|---|
| Source | string | The image source: an absolute or app-relative URL, or a data URI. Required. | |
| Position | BitResourceTimelineBarIconPosition | Start | Where the icon is anchored relative to the bar. |
| Inside | bool | false | Draws the icon within the bar, against the edge its Position names, instead of beside it (Center always draws inside). An icon larger than the bar overhangs it, so give such a bar a Height that fits. |
| Size | int? | null | The side of the square box the icon is fitted in, in pixels. Falls back to Options.BarIconSize. |
BitResourceTimelineBarSection properties
A part of a bar with colors, text and an icon of its own - the phases of a turnaround, the part of a job that has run. Each edge is a time or a percentage of the bar (a time wins), an edge given neither way is the bar's own, and a section always stays within its bar. A time-bounded section stays where it is when the bar is moved, a percentage-bounded one travels with it. Sections are decorative: the whole bar stays the hit target.
| Name | Type | Default value | Description |
|---|---|---|---|
| StartTime | DateTimeOffset? | null | The start of the section; wins over StartPercent. Clamped to the bar. |
| EndTime | DateTimeOffset? | null | The end of the section; wins over EndPercent. Clamped to the bar. |
| StartPercent | double? | null | The start of the section as a percentage (0-100) of the duration of the bar, from its start. Used when StartTime is null. |
| EndPercent | double? | null | The end of the section as a percentage (0-100) of the duration of the bar, from its start. Used when EndTime is null. |
| BackgroundColor | string? | null | CSS color filling the section. When null the fill of the bar shows through. |
| BorderColor | string? | null | CSS color of a 1px border just inside the edges of the section. When null no border is drawn. |
| ForegroundColor | string? | null | CSS color of the Text. Falls back to the bar label color. |
| Text | string? | null | The text drawn within the section, in the bar-label font. Text that does not fit is left out, never cut off. |
| TextPosition | BitResourceTimelineBarSectionPosition | Center | Where the Text sits within the section. |
| Icon | string? | null | An icon drawn within the section: an image URL or a data URI. One sharing a position with the text sits beside it, nearer the edge of the section (before the text when both are centered); one that does not fit is not drawn. |
| IconPosition | BitResourceTimelineBarSectionPosition | Start | Where the Icon sits within the section. |
| IconSize | int? | null | The side of the square box the Icon is fitted in, in pixels. Falls back to Options.BarIconSize, and shrinks to the height of a shorter bar. |
BitResourceTimelineOptions properties
The visual configuration of the timeline (defaults in parentheses). A new instance is merged into what is in force: a property left null keeps the value applied before it.
| Name | Type | Default value | Description |
|---|---|---|---|
| ResourceHeight | int? | null | Minimum row height in px (40). A row grows as overlapping bars stack. |
| TimeAxisHeight | int? | null | Height of the time axis in px (60). |
| ResourceAxisWidth | int? | null | Width of the resource column in px (150). |
| ResourceAxisResizable | bool? | null | Whether the divider of the resource column can be dragged or moved from the keyboard (true); see OnResourceAxisWidthChanged. |
| ResourceAxisMinWidth | int? | null | Minimum width of the resource column in px (80). |
| ResourceAxisMaxWidth | int? | null | Maximum width of the resource column in px; unset, the viewport less 100px. |
| DateRowHeight | int? | null | Height of the date row of the time axis in px (22). |
| BarHeight | int? | null | Height of a bar without a Height of its own in px (4). |
| BarMargin | int? | null | Gap between bars stacked for overlapping in time, in px (2). |
| StackLabelClearance | bool? | null | Whether stacked bars also keep room for their labels and icons (true). Independent of the zoom. |
| StackOnLabelCollision | bool? | null | Whether bars whose labels, icons or edge bars would collide stack too, not only overlapping times (true). |
| MinBarWidth | int? | null | Minimum drawn width of a bar in px (2). |
| MinBarWidthForLabels | int? | null | Minimum bar width for its labels and icons to be drawn, in px (24). |
| BarLabelFont | string? | null | CSS font of the bar labels (11px, theme font family). |
| BarLabelGap | int? | null | Gap between a bar and its labels and icons in px (3). |
| BarIconSize | int? | null | Default box side of a bar icon in px (16). |
| DateLabelFont | string? | null | CSS font of the day labels (12px, theme font family). |
| HourLabelFont | string? | null | CSS font of the hour labels (12px, theme font family). |
| ResourceLabelFont | string? | null | CSS font of the leaf resource names (13px, theme font family). |
| ResourceGroupFont | string? | null | CSS font of the group resource names (bold 13px, theme font family). |
| ResourceChevronFont | string? | null | CSS font of the group chevron (10px, theme font family). |
| ResourceChevronGap | int? | null | Gap between a group's chevron and its name in px (14). |
| DragThreshold | int? | null | Pointer movement in px before a press becomes a drag (4). |
| HitTolerance | int? | null | Extra px around a bar that still hit it (3). |
| TimeZone | string? | null | IANA zone the axis is drawn in (UTC, Europe/Berlin); the viewer's while unset, or empty to return to it. Only the axis moves. |
| ShowUtcTime | bool? | null | Adds a UTC hour row above the TimeZone's (false); raise TimeAxisHeight for room. |
| Locale | string? | null | BCP 47 locale of the labels, tooltips and announcements; the viewer's while unset, or empty to return to it. |
| FirstDayOfWeek | DayOfWeek? | null | Where week stripes start; unset, the week start of the Locale (or the viewer's), else Monday. |
| Hour12 | bool? | null | Labels the hours with a 12-hour clock (false). |
| NonWorkingDays | int[]? | null | Weekdays washed as non-working (0 = Sunday ... 6 = Saturday). Visual only. |
| WorkingHoursStart | int? | null | Start of the working hours in minutes from local midnight (540 = 09:00); hours outside are washed. Visual only. |
| WorkingHoursEnd | int? | null | End of the working hours in minutes from local midnight (1020 = 17:00). Visual only. |
| MaxStackLanes | int? | null | Maximum lanes a cluster of overlapping bars stacks into; 0 is unlimited (the default). The rest hide behind a +N marker. |
| AllowDelete | bool? | null | Lets Delete/Backspace remove the selected bars of an editable timeline, once OnAllocationsDeleting agrees (false). |
| PixelsPerHour | double? | null | Horizontal scale; unset fits one day into the viewport. Clamped to Min/MaxPixelsPerHour; a zoom overrides it until ResetZoomAsync. |
| MinPixelsPerHour | double? | null | Lower bound of the zoom in px per hour (0.25). |
| MaxPixelsPerHour | double? | null | Upper bound of the zoom in px per hour (1200). |
| AutoScrollToNow | bool? | null | Centers the current time as the first load is laid out (false). |
| PreserveScrollOnReload | bool? | null | Keeps a reload showing the same time and row instead of moving the view (false). |
| NowLineRefreshMs | int? | null | How often the now line repaints, in ms (60000); 0 stops it. |
| PanToDayStart | bool? | null | Makes PanByDaysAsync land on a local midnight rather than step exactly 24 hours (false). |
| Editable | bool? | null | Enables moving and resizing bars by pointer and by Alt + arrows (false). |
| EditSnapMinutes | int? | null | Step a move or resize snaps to, in minutes (15); 0 is continuous. |
| SnapToTimeZone | bool? | null | Snaps edits to wall-clock steps of the TimeZone (true) rather than the Unix epoch. |
| EditResizeHandlePx | int? | null | Grab zone at each end of a bar that resizes it, in px (6). |
| EditMinDurationMinutes | int? | null | Shortest duration a resize or a drawn bar can produce, in minutes (5). |
| AllowResourceChange | bool? | null | Whether a move may put a bar on another row (true). |
| AllowOverlap | bool? | null | Whether unlocked bars of a row may overlap in time (true); false refuses such an edit. |
| EmptyDragAction | BitResourceTimelineEmptyDragAction? | null | What a drag on empty content does while Editable: Marquee (the default) or Create (needs OnAllocationCreating). |
| ShowTooltips | bool? | null | Whether hovering a bar or a +N marker shows a tooltip (true). |
| TooltipDelayMs | int? | null | Hover delay before a tooltip appears, in ms (300). |
| WindowBufferFactor | double? | null | On-demand loading: viewport widths of extra time asked for on each side (1). |
| WindowRefetchThreshold | double? | null | On-demand loading: a new window is asked for within this many viewport widths of the loaded edge (0.25). |
| WindowDebounceMs | int? | null | On-demand loading: delay after the last scroll before the window is checked, in ms (150). |
| Renderer | BitResourceTimelineRendererType? | null | What paints the timeline: Canvas (the default), Svg or Html; switchable at runtime. |
| Colors | BitResourceTimelineColors? | null | Color overrides, winning over the theme and the --bit-ResourceTimeline-* variables. |
| Surface | BitResourceTimelineSurface? | null | Stripes, per-resource colors and bands under the grid. Replaced as a whole; empty clears it. |
| AxisLines | BitResourceTimelineAxisLines? | null | Colors of the time and resource lines. Replaced as a whole; empty clears it. |
BitResourceTimelineColors properties
Color overrides of the timeline, each a CSS color string. A color set here wins over the bit theme and the --bit-ResourceTimeline-* variables; one left null keeps the color in force, so a partial instance changes only what it sets.
| Name | Type | Default value | Description |
|---|---|---|---|
| ContentBg | string? | null | Background of the scrollable content area. |
| AxisBg | string? | null | Background of the time and resource axes and of their corner. |
| AxisBorder | string? | null | Lines within and around the axes. |
| Tick | string? | null | Hour ticks of the time axis. |
| Label | string? | null | Hour labels of the time axis and the resource labels. |
| DateLabel | string? | null | Day labels of the time axis. |
| Grid | string? | null | Grid lines across the content area. |
| Bar | string? | null | Fill of a bar that has no Color of its own. |
| BarSelected | string? | null | Fill of a selected bar that has no Color of its own. |
| BarSelectedBorder | string? | null | Outline drawn around a selected bar. |
| BarLabel | string? | null | Labels around the bars (above, below, start and end). |
| Now | string? | null | The current-time line and its marker. |
| SelectionFill | string? | null | Fill of the marquee selection rectangle. |
| SelectionBorder | string? | null | Outline of the marquee selection rectangle. |
| Focus | string? | null | The dashed keyboard focus ring of the focused bar. |
| TooltipBg | string? | null | Background of the built-in tooltip. |
| TooltipText | string? | null | Text of the built-in tooltip. |
| NonWorking | string? | null | The wash over the non-working days and hours. |
BitResourceTimelineSurface properties
Colors the content pane under the grid and the bars, painted bottom to top: the content background, the row fills, the column stripes, the Bands, then the non-working wash. A pattern is worked out for the whole range and resource list, so a stripe stays on its day or row as the user scrolls. Visual only.
| Name | Type | Default value | Description |
|---|---|---|---|
| Columns | BitResourceTimelineColumnStripes? | null | Vertical time stripes; two colors on the day unit alternate the calendar days. |
| Rows | BitResourceTimelineRowStripes? | null | Horizontal stripes down the visible resource rows. |
| Combine | BitResourceTimelineSurfaceCombine? | null | How a row color and a column color share a cell. Null paints the columns over the rows. |
| ResourceColors | Dictionary<string, string>? | null | A CSS color per resource id, for the rows that set no Background of their own. Wins over Rows. |
| Bands | List<BitResourceTimelineSurfaceBand>? | null | Explicit rectangles painted above the patterns; later entries paint over earlier ones. |
| ShadeTimeAxis | bool? | null | Also paints the column colors on the time axis: the date row for day and week stripes, the hour row for hour stripes. The labels stay above the tint. |
| ShadeResourceAxis | bool? | null | Also paints the color of each row in the resource column, behind its label. |
BitResourceTimelineColumnStripes properties
Vertical stripes, one per time unit, cycling Colors - the columns of a Surface or the vertical lines of AxisLines. Two colors on the default unit (a day) alternate the calendar days, and a day keeps its color wherever the loaded window sits.
| Name | Type | Default value | Description |
|---|---|---|---|
| Unit | BitResourceTimelineSurfaceUnit? | null | What one stripe covers. Null is a day. |
| Align | BitResourceTimelineStripeAlign? | null | Whether the cycle runs continuously across the range or restarts each day or week. Null is continuous. |
| Span | int? | null | How many units one color covers before the next; null or below 1 is 1. An hour pattern of three colors with a span of 8 paints three 8-hour shifts. |
| Offset | int? | null | Added to the stripe index before the color is chosen, so the cycle can start on another color without reordering Colors. |
| Colors | string[]? | null | The CSS colors cycled in order. At least one is required; a single color paints every stripe the same. |
BitResourceTimelineRowStripes properties
Horizontal stripes, one per visible resource row, cycling Colors down the rows - the rows of a Surface or the horizontal lines of AxisLines. A collapsed group re-stripes the rows under it; scrolling does not.
| Name | Type | Default value | Description |
|---|---|---|---|
| Colors | string[]? | null | The CSS colors cycled in order; two colors are a zebra. At least one is required. |
| Span | int? | null | How many rows one color covers before the next; null or below 1 is 1. |
| Offset | int? | null | Added to the row index before the color is chosen. |
BitResourceTimelineSurfaceBand properties
An explicit rectangle on the content pane, painted above the column and row patterns: across every visible row, or along the row of one resource.
| Name | Type | Default value | Description |
|---|---|---|---|
| Start | DateTimeOffset | The start of the band (inclusive). | |
| End | DateTimeOffset | The end of the band (exclusive). A band ending at or before its Start is not painted. | |
| Color | string? | null | The CSS color. A null or empty color is not painted. |
| ResourceId | string? | null | When set, only the row of this resource is painted, while it is visible; null paints every visible row. |
BitResourceTimelineAxisLines properties
Colors the grid lines bounding the time columns and the resource rows. A line left without a color keeps Colors.Grid; the day separators of the time axis take the color of their midnight, and a row with a line color of its own draws it across the resource column too. Visual only.
| Name | Type | Default value | Description |
|---|---|---|---|
| Vertical | BitResourceTimelineColumnStripes? | null | The colors of the vertical lines, chosen like column stripes: every vertical grid line takes the color of the stripe it sits in. |
| Horizontal | BitResourceTimelineRowStripes? | null | The colors of the horizontal lines - the top edge of each resource row - cycled down the rows. |
| ResourceColors | Dictionary<string, string>? | null | A CSS color per resource id for the line of its row, for the resources that set no LineColor of their own. |
| BoundariesOnly | bool? | null | When true, only the line at the start of each vertical stripe (each midnight for days, the week boundary, every hour the span covers) is recolored; the others keep Colors.Grid. |
BitResourceTimelineAllocationChange properties
A move or a resize handed to OnAllocationChanging / OnAllocationsChanging before it is committed. Return false to restore the previous resource and times without a reload.
| Name | Type | Default value | Description |
|---|---|---|---|
| Allocation | BitResourceTimelineAllocation | The allocation being changed - the very instance of the Config - already updated with the previewed resource and times. | |
| PreviousResourceId | string | The resource of the allocation before this edit. | |
| PreviousStartTime | DateTimeOffset | The start time before this edit. | |
| PreviousEndTime | DateTimeOffset | The end time before this edit. | |
| Kind | BitResourceTimelineAllocationChangeKind | Move | Whether the edit is a move or a resize. |
BitResourceTimelineCreateRequest properties
A new bar drawn by a drag on empty content, handed to OnAllocationCreating. The app returns the full allocation with an Id of its own, or null to cancel.
| Name | Type | Default value | Description |
|---|---|---|---|
| ResourceId | string | The resource row the new bar is drawn on. | |
| StartTime | DateTimeOffset | The snapped start of the drawn range. | |
| EndTime | DateTimeOffset | The snapped end of the drawn range (at least Options.EditMinDurationMinutes after the start). |
BitResourceTimelineCopyRequest properties
The copied bars a paste (Ctrl/Cmd + V) asks the app to clone, handed to OnAllocationsCopying. The app assigns the new ids.
| Name | Type | Default value | Description |
|---|---|---|---|
| Allocations | IReadOnlyList<BitResourceTimelineAllocation> | The bars on the clipboard, in selection order. | |
| Offset | TimeSpan | The suggested time shift of each clone (typically one edit-snap step). The app may place the copies elsewhere. | |
| ResourceId | string? | null | The resource under the keyboard focus when pasting, or that of the first copied bar when nothing is focused. Null when the timeline has no rows. |
BitResourceTimelinePointerArgs properties
The arguments of OnClick and OnDoubleClick: what was under the pointer (a bar, the bars of a +N marker, a resource row, a time) and where the pointer was, in the surface and in the viewport.
| Name | Type | Default value | Description |
|---|---|---|---|
| Allocation | BitResourceTimelineAllocation? | null | The bar under the pointer - the very instance of the Config - or null when no bar was hit (empty content, an axis, or a +N marker). |
| OverflowAllocations | IReadOnlyList<BitResourceTimelineAllocation> | [] | The hidden bars when the pointer hit the +N marker of a cluster; empty otherwise. |
| Resource | BitResourceTimelineResource? | null | The resource row under the pointer; null on the time axis, the corner, or below the last row. |
| Time | DateTimeOffset? | null | The time at the horizontal position of the pointer; null on the resource axis and the corner, which have no time coordinate. |
| Area | BitResourceTimelineHitArea | Content | The region of the timeline the pointer was in. |
| X | double | 0 | Pointer X in the coordinates of the timeline surface (origin at its top-left, the sticky axes included), independent of the page scroll. |
| Y | double | 0 | Pointer Y in the coordinates of the timeline surface (origin at its top-left, the sticky axes included), independent of the page scroll. |
| ClientX | double | 0 | Pointer X in viewport coordinates, suited for a position: fixed overlay. |
| ClientY | double | 0 | Pointer Y in viewport coordinates, suited for a position: fixed overlay. |
| CtrlKey | bool | false | Whether Ctrl was held. |
| ShiftKey | bool | false | Whether Shift was held. |
| MetaKey | bool | false | Whether Meta (Cmd on macOS, the Windows key elsewhere) was held. |
| AltKey | bool | false | Whether Alt was held. |
BitResourceTimelineRowContext properties
The context of the ResourceTemplate for one visible row, reflecting the current state of the hierarchy.
| Name | Type | Default value | Description |
|---|---|---|---|
| Resource | BitResourceTimelineResource | The resource the row stands for. | |
| Depth | int | 0 | The zero-based depth of the row in the resource hierarchy (0 for root rows). |
| HasChildren | bool | false | Whether the resource has children, i.e. the row is a group header. |
| Collapsed | bool | false | Whether the group is currently collapsed. |
BitResourceTimelineView properties
The time span visible in the content area and the scale in force, raised by OnViewChanged.
| Name | Type | Default value | Description |
|---|---|---|---|
| Start | DateTimeOffset | The time at the left edge of the content area. | |
| End | DateTimeOffset | The time at the right edge of the content area. | |
| PixelsPerHour | double | 0 | The horizontal scale, in pixels per hour. |
BitResourceTimelineWindow properties
The time window LoadAllocationsAsync is asked for, already buffered beyond the visible range. The app returns every allocation overlapping it, across all the resources.
| Name | Type | Default value | Description |
|---|---|---|---|
| Start | DateTimeOffset | The inclusive start of the requested window. | |
| End | DateTimeOffset | The inclusive end of the requested window. |
BitResourceTimelineClassStyles properties
Custom CSS classes/styles for the different parts of the BitResourceTimeline.
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | The root element. |
| Viewport | string? | null | The focusable scroll viewport the renderer draws into. |
| Corner | string? | null | The top-start corner holding the TopStartContent. |
| ResourceOverlay | string? | null | The overlay rendering the ResourceTemplate. |
| ResourceRow | string? | null | Each row of that overlay. |
| ResourceContent | string? | null | The rendered ResourceTemplate of each row. |
| GroupToggle | string? | null | The expand/collapse button of a group row. |
| TooltipOverlay | string? | null | The overlay rendering the TooltipTemplate. |
| Loading | string? | null | The loading overlay. |
| Spinner | string? | null | The default spinner of the loading overlay. |
| LoadingText | string? | null | The default text of the loading overlay. |
BitResourceTimelineTexts properties
The texts of the BitResourceTimeline: its accessible name and role description, the loading text, the labels of its controls, the formats of its tooltips and everything it announces to screen readers. All of them default to English. A text ending in Format is a composite format string.
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string | Resource timeline | Accessible name while AriaLabel is unset. |
| RoleDescription | string | Resource timeline | Role description of the viewport. |
| Loading | string | Loading… | Text of the default loading overlay. |
| ExpandGroupFormat | string | Expand {0} | Name of a collapsed group's button; {0} the resource. |
| CollapseGroupFormat | string | Collapse {0} | Name of an expanded group's button; {0} the resource. |
| ResizeResourceColumn | string | Resize resource column | Name of the resource column's divider. |
| BarLocked | string | Bar is locked | Edit key on a locked bar. |
| SelectionCleared | string | Selection cleared | Escape cleared the selection. |
| EmptyRowFormat | string | {0}, no allocations | Focus on an empty row; {0} the resource. |
| FocusedBarFormat | string | {0}: {1} to {2} | Focus on a bar; {0} the resource, {1} start, {2} end. |
| FocusedLabeledBarFormat | string | {0}: {1}, {2} to {3} | Focus on a labeled bar; {0} the resource, {1} the label, {2} start, {3} end. |
| SelectedBarFormat | string | {0}, selected | A selected focused bar; {0} its announcement. |
| ResizedFormat | string | Resized: {0} to {1} | Keyboard resize; {0} start, {1} end. |
| MovedFormat | string | Moved: {0} to {1} | Keyboard move; {0} start, {1} end. |
| MovedToResourceFormat | string | Moved to {0}: {1} to {2} | Keyboard move to another row; {0} the resource, {1} start, {2} end. |
| EditRefused | string | Edit refused | An edit refused. |
| EditRefusedOverlap | string | Edit refused: overlaps another allocation | An edit refused for overlapping. |
| GroupCollapsed | string | Collapsed group | A group collapsed. |
| GroupExpanded | string | Expanded group | A group expanded. |
| CopiedFormat | string | Copied {0} | Bars copied; {0} the count. |
| PastedFormat | string | Pasted {0} | Bars pasted; {0} the count. |
| DeletedFormat | string | Deleted {0} | Bars deleted; {0} the count. |
| DeleteRefused | string | Delete refused | A delete refused. |
| TimeRangeFormat | string | {0} – {1} | A time range (tooltips, drag readout); {0} start, {1} end. |
| HiddenAllocationFormat | string | {0} hidden allocation | A +N tooltip's first line for one bar; {0} the count. |
| HiddenAllocationsFormat | string | {0} hidden allocations | A +N tooltip's first line; {0} the count. |
| HiddenAllocationItemFormat | string | {0} · {1} | A line of a +N tooltip; {0} the label, {1} the range. |
| MoreHiddenAllocationsFormat | string | … and {0} more | A +N tooltip's last line; {0} the bars left out. |
BitResourceTimelineAllocationChangeKind enum
| Name | Value | Description |
|---|---|---|
| Move | 0 | The bar was moved in time and/or onto another resource. |
| Resize | 1 | The start or the end of the bar was resized. |
| Create | 2 | A new bar is being created. Not handed to the changing callbacks today: a bar drawn on empty content is created through OnAllocationCreating alone. |
BitResourceTimelineBarIconPosition enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | Just before the start edge of the bar, vertically centered on it. |
| End | 1 | Just after the end edge of the bar, vertically centered on it. |
| Above | 2 | Centered above the bar. |
| Below | 3 | Centered below the bar. |
| Center | 4 | On top of the bar, centered horizontally and vertically within it. |
BitResourceTimelineBarSectionPosition enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | Just inside the start edge of the section. |
| Center | 1 | Centered horizontally within the section. |
| End | 2 | Just inside the end edge of the section. |
BitResourceTimelineEmptyDragAction enum
| Name | Value | Description |
|---|---|---|
| Marquee | 0 | A rubber-band selection (the default). |
| Create | 1 | Draws a new allocation. Requires Options.Editable and an OnAllocationCreating handler; Ctrl/Cmd + drag still marquees. |
BitResourceTimelineHitArea enum
| Name | Value | Description |
|---|---|---|
| Content | 0 | The scrollable grid of resource rows and bars, beside the resource column and below the time axis. |
| ResourceAxis | 1 | The sticky resource column. Has a resource but no time. |
| TimeAxis | 2 | The sticky time axis along the top. Has a time but no resource. |
| Corner | 3 | The top-start cell where the time axis and the resource column meet. Neither a time nor a resource. |
BitResourceTimelineRendererType enum
| Name | Value | Description |
|---|---|---|
| Canvas | 0 | An HTML canvas (the default): immediate-mode 2D drawing, crisp on HiDPI screens, and the fastest option for large, dense data sets. |
| Svg | 1 | Inline SVG: resolution-independent vector output that is styleable, inspectable in the developer tools and copy and print friendly. Slower than the canvas on very dense scenes. |
| Html | 2 | Plain HTML elements: each visible bar is a real element carrying its allocation id in data-bar-id (and its ClassName), so it can be styled with CSS. Slower than the canvas on very dense scenes. |
BitResourceTimelineStripeAlign enum
| Name | Value | Description |
|---|---|---|
| Continuous | 0 | The cycle runs across the whole timeline: adjacent days (or hours, or weeks) take the next color, without restarting at midnight or at the start of a week. The default. |
| Repeat | 1 | The cycle restarts each day when the unit is an hour, and each week when it is a day, so the same hour of the day or weekday always gets the same color. A week unit has no larger cycle and is painted as Continuous. |
BitResourceTimelineSurfaceCombine enum
| Name | Value | Description |
|---|---|---|
| Overlay | 0 | The row fills, then the column stripes on top: a translucent column color tints the row under it, an opaque one covers it. The default. |
| RowsOnTop | 1 | The column stripes, then the row fills on top. |
| Checker | 2 | Each cell is painted from the column colors by its column index plus its row index, so two colors make a checkerboard over the whole surface; a resource's own Background still paints its row solid and the row stripes are not used. Cells that would be too thin or too many fall back to full-height column stripes. |
BitResourceTimelineSurfaceUnit enum
| Name | Value | Description |
|---|---|---|
| Day | 0 | A stripe per local calendar day. The default. |
| Hour | 1 | A stripe per clock hour, continuing through midnight. |
| Week | 2 | A stripe per week, starting on Options.FirstDayOfWeek (or the week start of the locale, otherwise Monday). |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.