timeline-schedule v0.0.16
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 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); } } `