sbstjn / timesheet.js Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for HTML5 & CSS3 time sheets
Home Page: https://sbstjn.github.io/timesheet.js
License: MIT License
JavaScript library for HTML5 & CSS3 time sheets
Home Page: https://sbstjn.github.io/timesheet.js
License: MIT License
Is there anyway to make the timeline appear vertical or would that require significant css changes ?
It would be awesome !!
Sugestion: http://www.polymer-project.org/
Would be great if this could be registered as a Bower package for quick installation!
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 ?
In your file timesheet.css.sass and timesheet-white.css.sass, an error at line 20 and 32 : sit and set
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
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.
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.
Using some special value for end (''
, 'present'
, '...'
), one could define timeline items that extend to the end of the timeline period.
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.
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, I am not a Ruby user. Where can I get information on how to generate the HAML?
Thanks!
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!
Hello,
I want to build a profiler for my app - can I use this library will milliseconds instead of years/months?
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.
Is it possible to put all of time line into one line?
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
Please make it available via https://github.com/cdnjs/cdnjs
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.
It would be great if Timesheet could use only a single Timesheet
global variable rather than using TimesheetBubble
as well. the Bubblecould be stored at
Timesheet.Bubble`` if it needs to be exposed
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.
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;
}
The current implementation only supports month year. It would be really useful (and awesome) if days are supported as well.
From the README, it looks like the last field in each row of data is unused. What is it?
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.
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 wanna use this great library in TypeScript projects, and ANY type is disgusting.
Please add @types
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.