ngx-resource-timeline v19.0.0

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.

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

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:

Models

Period

Section

Item

Text

Events

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.