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.

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!

how do you configure? Render?
Here's my Plunker
http://plnkr.co/edit/kKO0Bnr4gFnQ87VxtMpB?p=preview

Thanks

It'd be nice to know the license for this code, such as Apache, etc.

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 ?

Would be great if this could be registered as a Bower package for quick installation!

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?

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.

In your file timesheet.css.sass and timesheet-white.css.sass, an error at line 20 and 32 : sit and set

Default <section> width is hardcoded to 59px.
I suggest to add function to auto resize each section or div (not prefered) to include all data.
Default settings cover 11 years.

I wanna use this great library in TypeScript projects, and ANY type is disgusting.
Please add @types

Mobile optimization is most important these days.
Can you upload a bootstrap version ?

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.

Please make it available via https://github.com/cdnjs/cdnjs

Hi, I am not a Ruby user. Where can I get information on how to generate the HAML?

Thanks!

Is it possible to put all of time line into one line?

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!
cdnjs/cdnjs#5928

I want to use timesheet.js for display periods in a year. I don' want display the year. It is possible ?
For exemple:

Thanks

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.

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.

Dear @sbstjn,
I'm Peter from @cdnjs, we'll like to add the awesome lib on our cdn project, and automatically add the new versions in the future, would you please add tags for each version so that our updater can recognize them. Thanks!

Is there anyway to make the timeline appear vertical or would that require significant css changes ?

Hello,

I just test timesheet.js, I don' have result. Could you make others exemples.
What is the trigger, an id ?
Where I parameter this id ?
Thanks

Can i send a pull request with the modifications with the new themes black &white ?

It looks like the <ul class="data"></ul> is set to overflow: hidden; which cuts off longer text closer to the right edge. See screenshot.

It would be nice if there was ability to scroll vertically and horizontally.

Great eye-candy project tho!

Using some special value for end ('', 'present', '...'), one could define timeline items that extend to the end of the timeline period.

The current implementation only supports month year. It would be really useful (and awesome) if days are supported as well.

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

From the README, it looks like the last field in each row of data is unused. What is it?

Hello,

I want to build a profiler for my app - can I use this library will milliseconds instead of years/months?

Thanks

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

Not really an issue , this is an awesome plugin ! never knew you could do so much , with so little , one question , what the 39 in the code for ?

https://github.com/sbstjn/timesheet.js/blob/master/source/javascripts/timesheet.js#L35

On the above line i mean.

Thank you.

It would be awesome !!

Sugestion: http://www.polymer-project.org/

Looks great, just a feature request, it would be really cool, for a long time line to have it oriented vertically so it could run down the page.

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