php timesheet,vue版本的timesheet图表

Github

说明

由于工作需要，将 timesheet 改为一个以两个时间段内所有周作为参考的组件，所以把它重写成了一个Vue的组件，保留了原有的以年为参考的方式，另外引入moment.js来操作时间比原来作者的更简单了。

安装与使用

npm install vue-timesheet -s

Javascript Code:

// please make sure install moment.js this weeks table driver it, thanks.

import 'vue-timesheet/dist/vue-timesheet.min.css'

import vueTimeSheet from 'vue-timesheet';

export default {

components: {

vueTimeSheet

},

data() {

return {

// years table

tsData: [

['2002', '09/2002', 'A freaking awesome time', 'lorem'],

['06/2002', '09/2003', 'Some great memories', 'ipsum'],

['2003', 'Had very bad luck'],

['10/2003', '2006', 'At least had fun', 'dolor'],

['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],

['07/2005', '09/2005', 'Bad luck again', 'default'],

['10/2005', '2008', 'For a long time nothing happened', 'dolor'],

['01/2008', '05/2009', 'LOST Season #4', 'lorem'],

['01/2009', '05/2009', 'LOST Season #4', 'lorem'],

['02/2010', '05/2010', 'LOST Season #5', 'lorem'],

['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']

],

startYear: '2000',

endYear: '2018',

// weeks table, for the moment, the weeks data need to complete, it's not like years table

tsData1: [

['2017-11-01', '2017-11-11', 'A freaking awesome time', 'lorem'],

['2017-11-02', '2017-11-22', 'Some great memories', 'ipsum'],

['2017-11-08', '2017-11-22', 'Had very bad luck', 'default'],

['2017-11-01', '2017-11-01', 'At least had fun', 'dolor'],

['2017-11-20', '2017-11-22', 'Enjoyed those times as well', 'ipsum'],

['2017-11-09', '2017-11-09', 'Bad luck again', 'default'],

['2017-11-05', '2017-11-08', 'For a long time nothing happened', 'dolor'],

['2017-11-18', '2017-11-28', 'LOST Season #4', 'lorem'],

['2017-11-25', '2017-11-30', 'LOST Season #4', 'lorem'],

['2017-11-11', '2017-11-12', 'LOST Season #5', 'lorem'],

['2017-11-15', '2017-11-30', 'FRINGE #1 & #2', 'ipsum']

]

startDate: new Date('2017-11-01'),

endDate: new Date('2017-11-30')

}

}

}

Template

效果