TimelineSchedule

Timeline schedule component for Angular 4+

The component not ready yet, please do not use it.

Getting started

Options

Property	Description	Type	Default
start	The date from which to begin the schedule	Date or string	current data
end	The date where the schedule will be end	Date or string	current data + 7 days
periods	Schedule periods configuration(i.e scale, date labels e.t.)	Period[]	Hours/Days/Weeks
classes	Addition classes	string[]	null
sectionWidth	Column width of sections	string	'200px'
minRowHeight	Min rows height in pixels	number	40

Example

app.component.html:

<timeline-schedule [dataSource]="dataSource" [sections]="sections" [options]="options" (onItemDragged)="onItemDragged($event)" (onItemResized)="onItemResized($event)" ></timeline-schedule>

app.components.ts:

` import { Component } from '@angular/core'; import { Item, Section } from 'timeline-shedule';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public dataSource: Item[] = []; public sections: Section[] = []; public options = { classes: ['my-custom-class'] }

public jobs = [ { id: 1, name: 'Job name 1', worker_id: 2, startAt: '2018-09-28T06:00:00', endAt: '2018-10-05T03:00:00', payload: 10 }, { id: 2, name: 'Job name 2', worker_id: 1, startAt: '2018-09-15T00:00:00', endAt: '2018-09-16T13:00:00', payload: 7 } ];

public workers = [ { id: 1, name: 'Rob', payload: 2 }, { id: 2, name: 'Tom', payload: 5 } ];

constructor() { }

ngOnInit() { this.jobs.forEach(job => { this.dataSource.push({ id: job.id, name: job.name, sectionId: job.worker_id, start: job.startAt, end: job.endAt, color: 'red', classes: ['test-class'], data: job }); });

this.workers.forEach(worker => {
  this.sections.push({
    id: worker.id,
    label: worker.name
  })
})

}

onItemDragged(event) { console.log(event); }

onItemResized(event) { console.log(event); } } `