Angular Resource Timeline

A simple Angular timeline scheduler library, now reimagined as Angular Resource Timeline.

---

Compatibility

This release is v19.0.0 and is compatible with Angular 19. Future releases will target newer Angular versions.

Library Version	Angular Compatibility	Notes
19.0.0	Angular 19	Latest release
18.0.0	Angular 18	Legacy release
17.0.0	Angular 17	Legacy release
16.0.0	Angular 16	Legacy release
15.0.2	Angular 15	Legacy release
Upcoming	-	Planned releases for newer Angular versions

---

Installation

Install via npm:

npm i ngx-resource-timeline

Note: Version v19.0.0 is compatible with Angular v19.0.0.

---

Getting Started

1. Import the NgxResourceTimelineModule

In your app module, import the module from ngx-resource-timeline:

import { NgxResourceTimelineModule } from 'ngx-resource-timeline';

@NgModule({
  imports: [
    BrowserModule,
    NgxResourceTimelineModule,
  ],
  // ... other properties
})
export class AppModule { }

2. Use the <ngx-rt> Component

Add the <ngx-rt> component in your template (e.g., app.component.html):

<ngx-rt
  [items]="items"
  [periods]="periods"
  [sections]="sections"
  [events]="events"
  [showBusinessDayOnly]="false"
  [allowDragging]="true"
></ngx-rt>

3. Configure Your Component

Set up your component (e.g., app.component.ts) as follows:

import { Component, OnInit } from '@angular/core';
import { Item, Period, Section, Events, NgxResourceTimelineService } from 'ngx-resource-timeline';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  events: Events = new Events();
  periods: Period[];
  sections: Section[];
  items: Item[];

  constructor(private service: NgxResourceTimelineService) { }

  ngOnInit() {
    this.events.SectionClickEvent = (section) => console.log('Section clicked:', section);
    this.events.ItemClicked = (item) => console.log('Item clicked:', item);
    this.events.ItemDropped = (item) => console.log('Item dropped:', item);

    this.periods = [
      {
        name: '3 days',
        timeFramePeriod: 60 * 3,
        timeFrameOverall: 60 * 24 * 3,
        timeFrameHeaders: ['Do MMM', 'HH'],
        classes: 'period-3day'
      },
      {
        name: '1 week',
        timeFrameHeaders: ['MMM YYYY', 'DD(ddd)'],
        classes: '',
        timeFrameOverall: 1440 * 7,
        timeFramePeriod: 1440,
      },
      {
        name: '2 week',
        timeFrameHeaders: ['MMM YYYY', 'DD(ddd)'],
        classes: '',
        timeFrameOverall: 1440 * 14,
        timeFramePeriod: 1440,
      }
    ];

    this.sections = [
      { name: 'A', id: 1 },
      { name: 'B', id: 2 },
      { name: 'C', id: 3 },
      { name: 'D', id: 4 },
      { name: 'E', id: 5 }
    ];

    this.items = [
      {
        id: 1,
        sectionID: 1,
        name: 'Item 1',
        start: moment().startOf('day'),
        end: moment().add(5, 'days').endOf('day'),
        classes: ''
      },
      {
        id: 2,
        sectionID: 3,
        name: 'Item 2',
        start: moment().startOf('day'),
        end: moment().add(4, 'days').endOf('day'),
        classes: ''
      },
      {
        id: 3,
        sectionID: 1,
        name: 'Item 3',
        start: moment().add(1, 'days').startOf('day'),
        end: moment().add(3, 'days').endOf('day'),
        classes: ''
      }
    ];
  }

  addItem() {
    this.service.itemPush({
      id: 4,
      sectionID: 5,
      name: 'Item 4',
      start: moment().startOf('day'),
      end: moment().add(3, 'days').endOf('day'),
      classes: ''
    });
  }

  popItem() {
    this.service.itemPop();
  }

  removeItem() {
    this.service.itemRemove(4);
  }
}

---

Inputs

Name	Required	Type	Default	Description
periods	Yes	Period[]	null	An array of Period objects defining the periods to display and traverse.
sections	Yes	Section[]	null	An array of Section objects to populate the timeline.
items	Yes	Item[]	null	An array of Item objects to render on the timeline.
events	No	Events	new Events()	An object containing events for user interactions.
currentTimeFormat	No	string	'DD-MMM-YYYY HH:mm'	The moment.js format used for concise areas such as tooltips.
showHeaderTitle	No	boolean	true	Controls the display of the header title.
showActionButtons	No	boolean	true	Controls the display of header action buttons.
showCurrentTime	No	boolean	true	Determines if the current time is marked on the timeline.
showGoto	No	boolean	true	Determines if the Goto button is displayed.
showToday	No	boolean	true	Determines if the Today button is displayed.
showBusinessDayOnly	No	boolean	false	If true, only business days (Mon-Fri) are displayed.
allowDragging	No	boolean	false	If true, items can be dragged.
headerFormat	No	string	'Do MMM YYYY'	The moment.js format for the header's date range display.
minRowHeight	No	number	40	The minimum height (in pixels) for a section.
maxHeight	No	number	null	The maximum height of the timeline.
text	No	Text	new Text()	An object for customizing textual elements in the timeline.
start	No	moment	moment().startOf('day')	The timeline's start time; it is recommended to use the start of the day.
locale	No	string	(empty, defaults to 'en')	Sets the locale for moment.js. Defaults to English (United States).

NOTE: Date locale is not available for the Goto button datepicker; it will default to the user's system settings. Suggestions are welcome.

---

Methods

Use these methods to dynamically manipulate items and sections:

Name	Parameter	Return Type	Description
itemPush	item: Item	void	Adds a new item to the timeline.
itemPop	None	void	Removes the last item from the timeline.
itemRemove	id: number	void	Removes the item with the specified ID.
sectionPush	section: Section	void	Adds a new section to the timeline.
sectionPop	None	void	Removes the last section from the timeline.
sectionRemove	id: number	void	Removes the section with the specified ID.
refresh	None	void	Refreshes/re-renders the timeline view.

---

Models

Period

Name	Type	Required	Default	Description
name	string	Yes	null	The unique name for selecting this period.
classes	string	Yes	null	Any CSS classes to apply to this period.
timeFramePeriod	number	Yes	null	The interval (in minutes) between time frames.
timeFrameOverall	number	Yes	null	The total number of minutes this period covers.
timeFrameHeaders	string[]	Yes	null	An array of moment.js formats for header rows; merged if identical.
timeFrameHeadersTooltip	string[]	No	null	Formats for header tooltips.
tooltip	string	No	null	Tooltip text for the period button.

Section

Name	Type	Required	Default	Description
id	number	Yes	null	A unique identifier for the section.
name	string	Yes	null	The display name for the section.
tooltip	string	No	null	Tooltip text for the section.

Item

Name	Type	Required	Default	Description
id	number	Yes	null	An identifier for the item (need not be globally unique).
name	string	Yes	null	The display name for the item.
start	any	Yes	null	A moment.js object indicating when the item starts.
end	any	Yes	null	A moment.js object indicating when the item ends.
classes	string	Yes	null	Any CSS classes to apply to the item.
sectionID	number	Yes	null	The ID of the section the item belongs to.
tooltip	string	No	null	Tooltip text for the item.

Text

Name	Type	Default
NextButton	string	'Next'
PrevButton	string	'Prev'
TodayButton	string	'Today'
GotoButton	string	'Go to'
SectionTitle	string	'Section'
HeaderTitle	string	null

Events

Name	Parameters	Return Type	Description
ItemClicked	item: Item	void	Triggered when an item is clicked.
ItemContextMenu	item: Item, event: MouseEvent	void	Triggered when an item is right-clicked (context menu).
SectionClickEvent	section: Section	void	Triggered when a section is clicked.
SectionContextMenuEvent	section: Section, event: MouseEvent	void	Triggered when a section is right-clicked (context menu).
ItemDropped	item: Item	void	Triggered when an item is dropped; item reflects its updated state.
PeriodChange	start: moment.Moment, end: moment.Moment	void	Triggered when the displayed period changes (e.g., via Next/Prev buttons).

NOTE: To prevent the default browser context menu, call event.preventDefault() in your ItemContextMenu or SectionContextMenuEvent handlers.

---

Demo

Demo

---

Credits

This project is based on the work originally created by Zallist and further developed by abhishekjain12.
Angular Resource Timeline updates this work to support Angular 15, Angular 16, Angular 17, Angular 18 and Angular 19. Future releases will target newer Angular versions.

---

License

Released under the MIT License.

---

Enjoy using Angular Resource Timeline! If you find it useful, please star the repository, submit issues, or contribute.