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); } } `