Ng2-timesheet, a timesheet.js copy of the ANGULAR2 version.

Angular 2 copy of a timesheet.js (JavaScript library for HTML5 & CSS3 time sheets)

Usage:

NPM Install Ng2-timesheet--save

App.component.ts

Import Models and Componentimport {timesheetitem} from ' Ng2-timesheet/src/models/timesheet-item '; import {timesheet} From ' Ng2-timesheet/src/models/timesheet ', import {timesheetcomponent} from ' Ng2-timesheet/src/timesheet.component '    ; ...//Add Directive Reference directives: [Timesheetcomponent] ...//define data Model Timesheet = new Timesh 2002, [New Timesheetitem (' 2002 ', ' 2002-09 ', ' A freaking awesome time ', ' Lorem '), New Timesheetitem (' 2 002-06 ', ' 2003-09 ', ' Some great Memories ', ' ipsum '), New Timesheetitem (' 2003 ', ' 2004 ', ' had very bad luck ', ' default ') ), New Timesheetitem (' 2003-10 ', ' 2006 ', ' at least had fun ', ' dolor '), New Timesheetitem (' 2005-02 ', ' 2006-05 ', ' E  Njoyed those times as well ', ' ipsum '), New Timesheetitem (' 2005-07 ', ' 2005-09 ', ' bad luck again ', ' Default '), new Timesheetitem (' 2005-10 ', ' z ', ' for a long time ' nothing happened ', ' dolor '), New Timesheetitem (' 2008-01 ', ' 2009-05 ', ' LOST Season #4 ', ' LoREM '), New Timesheetitem (' 2009-01 ', ' 2009-05 ', ' LOST Season #4 ', ' sit '), new Timesheetitem (' 2010-02 ', ' 2010-05 ', ' LOST Season #5 ', ' Lorem '), New Timesheetitem (' 2008-09 ', ' 2010-06 ', ' FRINGE #1 & #2 ', ' ipsum ')]);

App.component.html

<timesheet [timesheet]= ' Timesheet ' ></timesheet>

　　

Effect:

Source:

Https://github.com/zhongzf/ng2-timesheet

Ng2-timesheet, a timesheet.js copy of the ANGULAR2 version.