Cracking work - having loads of fun with it. Had an issue with classes not being parsed correctly for periods with only one time so altered line 88 to read:

var cat = data[n].length === 4 ? data[n][3] : data[n].length === 3 ? data[n][2] : 'default';

Hope that it helps.

In the data, what's the 4th column for? I mean the the lorem one.

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

May be good to add it to the readme

Thanks for making this fun visualization tool!

I thought it could be a nice idea if there was a simple example project within the repository that could be launched with an express server using a grunt _dev_ task and then edited while debugging.

Within this dev task, the watch task could be run to rebuild all files on any changes utilising livereload and css injection. This could make for really nice debugging.

So for example, in the grunt file you could have something like this:

....

express: {
      all: {
        options: {
          port: 6080,
          hostname: "0.0.0.0",
          bases: ['example'],  // working on the assumption that the example project is in root/example
        }
      }
    },

watch: {
     options: { livereload: true }
     stylesheets: {
        files: ['dist/timesheet.css'],
      }
      sass: {
        files: ['source/stylesheets/timesheet.css.sass'],
        tasks: ['sass'],
        options: {livereload: false } // dont live reload on sass changes, but on css changes instead for injection
      },
      scripts: {
        files: ['Gruntfile.js', 'source/javascripts/timesheet.bubble.js', 'source/javascripts/timesheet.js'],
        tasks: ['jshint', 'uglify']
      }
    },
  });

  grunt.registerTask('lint', 'Perform a lint on all the js source files', ['jshint']);
  grunt.registerTask('build', 'minify all js source files', ['lint', 'uglify']);
  grunt.registerTask('dev', 'Watch all js and css files for changes and rebuld appropriatly',
                    ['lint', 'build', 'express', 'watch']);

Furthermore, a source map could be used in the uglify task for nice in browser debugging in the chrome tools:

 uglify: {
      target: {
        options: {
          sourceMap: true,
          sourceMapIncludeSources: true,
          sourceMapRoot: 'source/javascripts'
        },
        files: { 'dist/timesheet.js': 'source/javascripts/timesheet.bubble.js', 'source/javascripts/timesheet.js' }
      },
    },

I have a js project template i usually use, it has a working build file with these features, here is the gruntfile and a blog post describing it.

Is this something anybody would want me to implement ?

I fixed an issue in spacing in the README. There was an unnecessary space between "Middleman" and the ellipses. Please see screenshot for the issue:

Hi timesheet-white.min.css not working, suppose i will see a white color style timesheet on screen. Please help

<link rel="stylesheet" href="<?= plugin_dir_url(__FILE__) ?>/library/timesheet/timesheet-white.min.css">
<script src="<?= plugin_dir_url(__FILE__) ?>/library/timesheet/timesheet.min.js"></script>
<div id="timesheet-default"></div>
<script>
new Timesheet('timesheet-default', 2002, 2013, [
  ['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']
]);
</script>

Thanks Peter

Hi there,

Awesome plugin! I've been trying to use it with bootstrap by inserting the timesheet in a row and the years section is aligned to the center. Need some guidance please?! Any suggestions?

No support for days, no responsiveness, no scrolling, no export as image. Actually, I am not even mad, its amazing.

Tried to change to scale to days. too much work for me. So i am using jquery gantt. Not as pretty, but gets the job done.

It would be great if Timesheet could use only a single Timesheet global variable rather than using TimesheetBubble as well. the Bubblecould be stored atTimesheet.Bubble`` if it needs to be exposed

It would be great to allow passing a DOM element for the container rather than forcing to pass an id. This would allow building a timesheet on elements which don't have an id.

Could the container ID be more consistent in the hosted page, or instead mention it in the instruction or readme file? My initial experience was a console error.

On the GitHub hosted page: <div id='timesheet-default'></div> could just become <div id='timesheet'></div>, or mention you can specify a container ID.

Edit: Also related to #4, add a note describing what the array values do.

From the example,

  new Timesheet('timesheet', 100, 105, [
    ['103', 'Had very bad luck'],
    ['10/103', '106', 'At least had fun', 'dolor'],
    ['02/105', '05/106', 'Enjoyed those times as well', 'ipsum'],
    ['07/105', '09/105', 'Bad luck again', 'default'],
    ['10/105', '108', 'For a long time nothing happened', 'dolor'],
    ['01/108', '05/109', 'LOST Season #4', 'lorem'],
    ['01/109', '05/109', 'LOST Season #4', 'lorem'],
    ['02/110', '05/110', 'LOST Season #5', 'lorem'],
    ['09/108', '06/110', 'FRINGE #1 & #2', 'ipsum']
  ]);

works fine, but

  new Timesheet('timesheet', 50, 55, [
    ['53', 'Had very bad luck'],
    ['10/53', '56', 'At least had fun', 'dolor'],
    ['02/55', '05/56', 'Enjoyed those times as well', 'ipsum'],
    ['07/55', '09/55', 'Bad luck again', 'default'],
    ['10/55', '58', 'For a long time nothing happened', 'dolor'],
    ['01/58', '05/59', 'LOST Season #4', 'lorem'],
    ['01/59', '05/59', 'LOST Season #4', 'lorem'],
    ['02/60', '05/60', 'LOST Season #5', 'lorem'],
    ['09/58', '06/60', 'FRINGE #1 & #2', 'ipsum']
  ]);

yields a blank timeline with correct years marked.

Hi,

Great improvement of TimeSheet.js !

I'm looking for a "day" feature (not only months). Would you plan to add it ? I found https://github.com/gisce/timesheet.js but I can't manage to make it work...

Thanks for your answer :)

I added these css properties to make years columns equal width... Thanks for you code.

.timesheet .scale { height: 100%; width: 100%; display: table; table-layout: fixed; } .timesheet .scale section { min-width: 10%; display: table-cell; text-align: center; height: 100%; } .timesheet .data { overflow: hidden; margin-top: 50px; }

Hi, I'm going to host this lib on cdnjs.

Can you add the version tag? It can help me to config git auto-update.

Thanks! https://github.com/cdnjs/cdnjs/issues/5928