The code is potentially vulnerable to XSS injections[1].<p>[1] <a href="https://github.com/sbstjn/timesheet.js/blob/master/source/javascripts/timesheet.js#L39-L41" rel="nofollow">https://github.com/sbstjn/timesheet.js/blob/master/source/ja...</a><p>edit: Thanks for the downvotes, lesson learned! Never talk about vulnerabilities of a code which is #1 on HN and people will blindly put in production.<p>edit 2: So here is my new comment: "Awesome library! The fact that users can easily enhance its behaviour by using <script> tags in labels is a great feature!"
Quite pretty but I can't figure out why anyone would invent their own non-ISO date format and then have to write a parser for it. Is it <i>really</i> so hard to start with the year?
After we were acquired, I designed an extensive timeline of our company history, people and apps released. It sometimes looks bad on mobile, but in general works pretty well, loading data from JSON.<p><a href="http://lemonlabs.co/timeline.html" rel="nofollow">http://lemonlabs.co/timeline.html</a>
1: I made this: <a href="http://imgur.com/pPMYqAB" rel="nofollow">http://imgur.com/pPMYqAB</a><p>Angularjs + SVG.<p>2: And this: <a href="http://imgur.com/JfNBd2o" rel="nofollow">http://imgur.com/JfNBd2o</a><p>Also Angularjs + SVG.<p>My first solution is a Gantt style graph where I input tasks I need to do and estimate how long they take. Then I click start on a task, and track the time I spend on it. My job needs me to track in high detail what I work on, so I made this system after getting bored of pen and paper.<p>The second solution I made was a real Gantt diagram, I used the same knowledge I had from the pervious solution, angularjs and svg, but this time I implemented dependencies between the activities. For the first solution I implemented a very simple scheduler based on the fact that I can't possibly be working on two things at the same time (unless I work during a meeting), but for this second solution I didn't make a scheduler so instead I just specify a start and duration for a task.
I found a similar solution few weeks back which is beautiful and scrolls horizontally.<p>Believe it is vanilla JS.<p><a href="http://cheeaun.github.io/life/" rel="nofollow">http://cheeaun.github.io/life/</a>
Since you seem to care about good Javascript practices given you're linting your code, I'm going to point out that all your modules are exposed in the global scope, which isn't the best practice. I'll suggest using something like browserify (as opposed to require.js due to the smaller overhead) to "require" smaller modules within closures to expose one final Timesheet constructor.
You should put the .css and .js on the frontpage (some people don't know how to use github). Also some basics explanation on how to use it would be nice as well. I'm using right now and I just see the background no event get displayed.<p>Also Haml is cool but it makes your project hard to understand if you do not use haml (like me).<p>edit:fixed halm->haml, thx :)
Pretty cool - there's a similar library at <a href="http://timeline.knightlab.com/" rel="nofollow">http://timeline.knightlab.com/</a> that approaches the problem in a slightly different way. Rather than having an axis per event they try to present multiple events on the same axis.
I once made a declarative, pure XML XSL-T system like this, no Javascript at all: <a href="http://nicolas.kruchten.com/content/2010/09/context/" rel="nofollow">http://nicolas.kruchten.com/content/2010/09/context/</a>
I've been doing a lazy search (i.e., passively watching) for a library like this with per-second resolution vs the per-month resolution in both timesheet.js and Chee Aun's Life.<p>Anyone have a recommendation?
Looks pretty cool man. Thanks for sharing!<p>Just curious. What are some examples of the most interesting uses you've seen from users? Are they mostly using it for tracking work hours during the week etc.?
Neat! I did something pretty much "identical" some time ago but I lost interest. It had different zoom levels.<p>Prints <a href="http://imgur.com/a/eOI39" rel="nofollow">http://imgur.com/a/eOI39</a>
<a href="http://www.simile-widgets.org/timeline/" rel="nofollow">http://www.simile-widgets.org/timeline/</a> (Web Widget by MIT for Visualizing Temporal Data)
i quite like the interactive timeline component [1] at vis.js. it's zoomable, scrollable, highly customizable and even editable.<p>[1] <a href="http://visjs.org/timeline_examples.html" rel="nofollow">http://visjs.org/timeline_examples.html</a>