ProjectTimeline

TYPESCRIPT / BROWSER

Live TypeScript example

Try the component here, then use the source below in your application.

Component sizePro v0.2.1 · minified + gzip

JavaScript: 6.8 KiB
Component CSS: 2.3 KiB
Shared theme CSS: 5.5 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 16.9 KiB; component CSS 9.5 KiB. These figures describe browser assets, not the complete package download.

View all component measurements →

Preview

Interact with the example to explore its inputs and callbacks.

import '@blukavantui/community/theme.css'

import {createProjectTimeline} from '@blukavantui/pro/project-timeline';
import '@blukavantui/pro/project-timeline.css';
export function mount(host:HTMLElement){
 const output=document.createElement('p');output.setAttribute('role','status');host.append(output);
 const timeline=createProjectTimeline(host,{
  Resources:[{Key:"maya",Name:"Maya Chen",Position:"Product lead",Color:"Purple"},{Key:"luis",Name:"Luis Rivera",Position:"Engineer",Color:"Red"}],
  ShowFilters:true,ShowDescriptions:true,
  "Items": [
    {
      "Key": "research", "ResourceKey":"maya", "EstimateHours":16,"ProjectTag":"Launch",
      "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", "ResourceKey":"maya", "EstimateHours":24,
      "Label": "Design the experience",
      "StartDate": "2026-10-08",
      "EndDate": "2026-10-16",
      "Progress": 65,
      "Color": "Primary"
    },
    {
      "Key": "build", "ResourceKey":"luis", "EstimateHours":40,
      "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
},{
  FiltersChanged:(resource,start,end,search,kind)=>{output.textContent=`Filter: ${resource||'everyone'}, ${start} to ${end}, ${kind||'all'}, ${search}`;},
  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-community-0.4.0.tgz
# Install your licensed Pro archive alongside Community
npm install ./blukavantui-pro-0.2.1.tgz

<div id="example"></div>

Download .ts source ↓TypeScript interfaces →Web API reference →Installation guide →

Download Community library ↓Community starter · 9 templates ↓Pro add-on & license →

Connect your application data

Community components use @blukavantui/community. The ten Pro components use the separate @blukavantui/pro add-on alongside Community. Your application handles persistence and authentication through its typed callbacks. Choose the matching edition when installing the example.

Build on your platform

Choose the reference that matches your application.

WEB · TYPESCRIPT

createProjectTimeline

Supply stable keys, inclusive YYYY-MM-DD dates and Resources. Link each item using ResourceKey; EstimateHours and ProjectTag add planning context. Built-in filters cover resource, date overlap, task/milestone type and search, with optional resource grouping. IsInteractive emits ItemClick for your detail view. Your application owns scheduling, dependencies, resource calendars, persistence and authorization.

v0.2.1

import { createProjectTimeline } from '@blukavantui/pro/project-timeline';
import '@blukavantui/pro/project-timeline.css';

Load @blukavantui/community/theme.css once in your app shell.

createProjectTimeline(host: HTMLElement, options: ProjectTimelineOptions, events?: ProjectTimelineEvents)

Reference for @blukavantui/pro 0.2.1. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.

Options

Name	Type / requirement	Usage
`Resources`	`BluResource[]`Optional	People with Key, Name, ImageUrl, Color and Position. Item.ResourceKey links a task to a person.
`ShowFilters`	`boolean`Optional	Show search, resource, task/milestone and date-range filters plus grouping by resource.
`ShowDescriptions`	`boolean`Optional	Show task descriptions below task labels.
`ResetKey`	`string`Optional	Change to reset filters to the supplied date range.
`Items`	`BluProjectTimelineItem[]`Required	Task and milestone records with stable unique keys. Up to 1,000 items.
`AccessibleLabel`	`string`Optional	Accessible name of the timeline region.
`RangeStart`	`string`Optional	Inclusive visible bounds; empty values derive the range from the tasks.
`RangeEnd`	`string`Optional	Inclusive YYYY-MM-DD visible end. Empty derives it from the tasks.
`Locale`	`string`Optional	BCP 47 locale for display dates. Stored dates remain ISO.
`ShowToday`	`boolean`Optional	Display the today date and a dashed marker when it is in range.
`TodayDate`	`string`Optional	Optional fixed reference date. Defaults to the browser's local calendar date.
`ShowProgress`	`boolean`Optional	Display numeric progress and the completed portion of each task bar.
`IsInteractive`	`boolean`Optional	Makes each task a button that emits ItemClick; does not edit task dates.
`IsCompact`	`boolean`Optional	Use reduced vertical row spacing.
`IsAnimated`	`boolean`Optional	Finite bar entrance; reduced motion overrides this.
`IsLoading`	`boolean`Optional	Replace rows with an announced loading state.
`EmptyText`	`string`Optional	Message displayed for an empty list.
`ExtendedClass`	`string`Optional	Additional classes on the outer Block wrapper.

Callbacks

Name	Type / requirement	Usage
`FiltersChanged`	`(resourceKey: string, startDate: string, endDate: string, search: string, kind: string) => void \| Promise<void>`Optional	Reports resource, start date, end date, search and kind.
`ItemClick`	`(key: string) => void \| Promise<void>`Optional
`Error`	`(message: string) => void \| Promise<void>`Optional

Instance methods & properties

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 {
    ResourceKey?: string;
    EstimateHours?: number;
    ProjectTag?: string;
    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;
}

BluResource

interface BluResource {
    /** Stable application-owned person/resource key. */
    Key: string;
    Name: string;
    ImageUrl?: string;
    Color?: ComponentColor;
    /** Role, title or position displayed next to the person. */
    Position?: string;
}

Events0No events yet.View events

Interact with an example to see its events.

Live TypeScript example

createProjectTimeline

Options

Callbacks

Instance methods & properties

Related data types

Purpose and use

Keyboard design guidance

In your application

Search BluKavantUI