ProjectTimeline
Show project schedules with date-based task bars, progress, milestones and a today marker. Available for web and Enterprise OutSystems.
Live TypeScript example
Try the component here, then use the source below in your application.
- JavaScript
- 3.8 KiB
- Component CSS
- 1.4 KiB
- Shared theme CSS
- 3.8 KiBonce per application
How sizes are measured
The JavaScript figure includes this component’s required helpers. CSS includes its styling dependencies. Each entry is bundled separately for ES2022, minified, then compressed with gzip level 9. Your bundler may share helpers across components. Images, fonts, examples and application code are excluded.
Before compression: JavaScript 9.2 KiB; component CSS 5.0 KiB. These figures describe browser assets, not the complete package download.
View all component measurements →Interact with the example to explore its inputs and callbacks.
import '@blukavantui/web/theme.css'
import {createProjectTimeline} from '@blukavantui/web/project-timeline';
import '@blukavantui/web/project-timeline.css';
export function mount(host:HTMLElement){
const output=document.createElement('p');output.setAttribute('role','status');host.append(output);
const timeline=createProjectTimeline(host,{
"Items": [
{
"Key": "research",
"Label": "Discover the opportunity",
"StartDate": "2026-10-05",
"EndDate": "2026-10-09",
"Progress": 100,
"Color": "Success",
"Description": "Customer interviews and a focused brief"
},
{
"Key": "design",
"Label": "Design the experience",
"StartDate": "2026-10-08",
"EndDate": "2026-10-16",
"Progress": 65,
"Color": "Primary"
},
{
"Key": "build",
"Label": "Build and connect",
"StartDate": "2026-10-12",
"EndDate": "2026-10-23",
"Progress": 25,
"Color": "Blue"
},
{
"Key": "review",
"Label": "Accessibility review",
"StartDate": "2026-10-19",
"EndDate": "2026-10-23",
"Progress": 0,
"Color": "Warning"
},
{
"Key": "launch",
"Label": "Launch",
"StartDate": "2026-10-26",
"IsMilestone": true,
"Color": "Success"
}
],
"RangeStart": "2026-10-01",
"RangeEnd": "2026-10-31",
"TodayDate": "2026-10-14",
"AccessibleLabel": "October release plan",
"IsInteractive": true
},{
ItemClick:key=>{output.textContent='Open task: '+key;},
Error:message=>{output.textContent=message;},
});
// Load your data, then call timeline.update({Items:tasks,IsLoading:false}).
// Use ItemClick to open your application's Drawer; persist changes on your server.
return {destroy(){timeline.destroy();output.remove();}};
}
const instance = mount(document.getElementById('example')!)
// When this page or framework component is removed:
// instance.destroy()
Install the library and add the host element
npm install https://blukavantui.blutekmedia.com/downloads/blukavantui-web-0.9.0.tgz<div id="example"></div>This example uses the downloadable @blukavantui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.
createProjectTimeline
Import the selective JavaScript entry and CSS. Supply stable keys and inclusive YYYY-MM-DD dates. Milestones use StartDate only. RangeStart and RangeEnd clip the chart; full dates stay readable. IsInteractive emits ItemClick for opening your own Drawer or detail view. Your application owns loading, editing and saving. Available for web and Enterprise OutSystems only; dependencies, drag scheduling and resource calendars are outside this version.
import { createProjectTimeline } from '@blukavantui/web/project-timeline';
import '@blukavantui/web/project-timeline.css';Load @blukavantui/web/theme.css once in your app shell.createProjectTimeline(host: HTMLElement, options: ProjectTimelineOptions, events?: ProjectTimelineEvents)Reference for @blukavantui/web 0.9.0. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.
Options
14| Name | Type / requirement | Usage |
|---|---|---|
Items | BluProjectTimelineItem[]Required | Task and milestone records with stable unique keys. Up to 1,000 items. |
AccessibleLabel | stringOptional | Accessible name of the timeline region. |
RangeStart | stringOptional | Inclusive visible bounds; empty values derive the range from the tasks. |
RangeEnd | stringOptional | Inclusive YYYY-MM-DD visible end. Empty derives it from the tasks. |
Locale | stringOptional | BCP 47 locale for display dates. Stored dates remain ISO. |
ShowToday | booleanOptional | Display the today date and a dashed marker when it is in range. |
TodayDate | stringOptional | Optional fixed reference date. Defaults to the browser's local calendar date. |
ShowProgress | booleanOptional | Display numeric progress and the completed portion of each task bar. |
IsInteractive | booleanOptional | Makes each task a button that emits ItemClick; does not edit task dates. |
IsCompact | booleanOptional | Use reduced vertical row spacing. |
IsAnimated | booleanOptional | Finite bar entrance; reduced motion overrides this. |
IsLoading | booleanOptional | Replace rows with an announced loading state. |
EmptyText | stringOptional | Message displayed for an empty list. |
ExtendedClass | stringOptional | Additional classes on the outer Block wrapper. |
Callbacks
2| Name | Type / requirement | Usage |
|---|---|---|
ItemClick | (key: string) => void | Promise<void>Optional | |
Error | (message: string) => void | Promise<void>Optional |
Instance methods & properties
3| Name | Signature / type | Usage |
|---|---|---|
element | HTMLElement | Root owned by this instance. Dispose before removing its host. |
update | (patch: Partial<ProjectTimelineOptions>) => void | Apply a partial options update to this instance. |
destroy | () => void | Dispose the instance and its listeners when the view is removed. |
Related data types
Expand a type for its fields and allowed values.
BluProjectTimelineItem
Dates are inclusive ISO calendar dates, YYYY-MM-DD, without a timezone.
interface BluProjectTimelineItem {
Key: string;
Label: string;
StartDate: string;
/** Defaults to StartDate. Milestones use only StartDate. */
EndDate?: string;
IsMilestone?: boolean;
/** Percentage, 0–100. */
Progress?: number;
Color?: ComponentColor;
Description?: string;
IsDisabled?: boolean;
}Callback
type Callback<T extends unknown[] = []> = (...args: T) => void | Promise<void>;CommonOptions
interface CommonOptions {
ExtendedClass?: string;
}ComponentColor
type ComponentColor = typeof componentColors[number];Use these inputs, events, actions and structures in Service Studio. Names and data bindings are specific to the native Blocks.
Enterprise OutSystems only. Reference ProjectTimeline and BluProjectTimelineItem from BluKavantUi_Data. Map your Aggregate results into the typed Items list. Dates use YYYY-MM-DD Text, and the Block owns its CSS and runtime. Use OnItemClick to open your own Drawer; loading, validation and persistence remain in your application. Community does not include this component.
- Web runtime
- Supported
- TypeScript
- Supported
- OutSystems
- Supported
Statuses describe the component’s rendered code and interactions. Supply accessible content and follow the component guidance when integrating it.
Accessibility guidance → · Review evidence →Purpose and use
Show project schedules with date-based task bars, progress, milestones and a today marker. Available for web and Enterprise OutSystems.
Keyboard design guidance
When interactive, Tab visits enabled task rows; Enter or Space activates a row. Task names, dates, progress and milestones are exposed as text. Narrow containers stack labels above bars. Reduced-motion preferences disable the finite entrance animation.
See the support status above for review coverage and any limitations.
In your application
Provide useful labels, preserve visible focus, and test the component with your actual content. Use text alongside status colors and check contrast in each state.
Events0No events yet.
Interact with an example to see its events.