Timesheet.js Example
Last active
December 22, 2018 07:41
-
-
Save infographicstw/16fc37413bce0810d84b to your computer and use it in GitHub Desktop.
Play With Timesheet.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #timesheet-default { | |
| margin-top: 15px; | |
| box-shadow: 0 1px 1px rgba(0,0,0,0.3); | |
| background: #fff; | |
| border-radius: 3px; | |
| } | |
| #timesheet-default .scale section { | |
| font-family: 'calibri'; | |
| color: #444; | |
| border-color: #ddd; | |
| } | |
| #timesheet-default .scale section:first-of-type { | |
| border: none; | |
| } | |
| #timesheet-default .data { | |
| font-family: 'calibri'; | |
| } | |
| #timesheet-default .data li .date, | |
| #timesheet-default .data li .label { | |
| color: #777; | |
| } | |
| #timesheet-default .bubble-default { | |
| background-color: #f77; | |
| } | |
| #timesheet-default .bubble-lorem { | |
| background-color: #fa7; | |
| } | |
| #timesheet-default .bubble-ipsum { | |
| background-color: #f99; | |
| } | |
| #timesheet-default .bubble-dolor { | |
| background-color: #ff7; | |
| } | |
| #timesheet-default .bubble-sit { | |
| background-color: #9ff; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><link rel="icon" type="image/x-icon" href="thumbnail.png"><script type="text/javascript" src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script><link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"><script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="timesheet.min.css"><script type="text/javascript" src="timesheet.min.js"></script><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><div id="timesheet-default"></div></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){return new Timesheet("timesheet-default",2008,2018,[["10/2008","07/2012","D3X","default"],["07/2009","07/2014","D300s","lorem"],["10/2009","01/2012","D3S","default"],["01/2012","01/2014","D4","default"],["01/2012","04/2014","D800/D800E","dolor"],["07/2012","10/2013","D600","lorem"],["10/2013","12/2015","Df","dolor"],["10/2013","12/2015","D610","lorem"],["01/2014","12/2015","D4s","default"],["04/2014","12/2015","D810/D810A","dolor"],["07/2014","12/2015","D750","dolor"]])}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .timesheet{width:720px;height:292px;margin:0 auto}.timesheet{border-top:1px solid rgba(250,250,250,0.5);background-color:#333;position:relative}.timesheet.color-scheme-default .bubble-default{background-color:RGBA(252, 70, 74, 1)}.timesheet.color-scheme-default .bubble-lorem{background-color:RGBA(154, 202, 39, 1)}.timesheet.color-scheme-default .bubble-ipsum{background-color:RGBA(60, 182, 227, 1)}.timesheet.color-scheme-default .bubble-dolor{background-color:RGBA(244, 207, 48, 1)}.timesheet.color-scheme-default .bubble-sit{background-color:RGBA(169, 105, 202, 1)}.timesheet.color-scheme-alternative .bubble-default{background-color:#f3552e}.timesheet.color-scheme-alternative .bubble-lorem{background-color:#88c33a}.timesheet.color-scheme-alternative .bubble-ipsum{background-color:#436ae0}.timesheet.color-scheme-alternative .bubble-dolor{background-color:#f4d234}.timesheet.color-scheme-alternative .bubble-sit{background-color:#707d86}.timesheet .scale{height:100%;position:absolute;top:0;left:0;float:left}.timesheet .scale section{float:left;width:59px;text-align:center;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;line-height:24px;font-weight:lighter;border-left:1px dashed rgba(250,250,250,0.2);height:100%}.timesheet .data{margin:28px 0 0 0;padding:0;text-align:left;list-style-type:none;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;overflow:hidden}.timesheet .data li{margin:0 0 3px 0;line-height:22px;height:21px;display:block;clear:both;position:relative;white-space:nowrap}.timesheet .data li:hover .bubble{opacity:1}.timesheet .data li .date{color:#b5b5b5;font-size:14px}.timesheet .data li .label{font-weight:lighter;font-size:14px;padding-left:5px;line-height:21px;color:#979796;white-space:nowrap}.timesheet .data li .bubble{width:24px;height:7px;display:block;float:left;position:relative;top:7px;border-radius:4px;margin:0 10px 0 0;opacity:0.7}#timesheet-alternative{background-color:RGBA(247, 247, 247, 1);border-radius:5px}#timesheet-alternative section{color:RGBA(63, 68, 72, 1);border-left:1px dashed RGBA(63, 68, 72, 0.2)}#timesheet-alternative section:first-child{border-left:1px dashed transparent}#timesheet-alternative .date{display:none}#timesheet-alternative .bubble{margin-right:7px}#timesheet-alternative .label{padding-left:0px;color:RGBA(48, 48, 48, 1)} | |
| /*# sourceMappingURL=timesheet.min.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !function(){"use strict";var Timesheet=function(container,min,max,data){this.data=[],this.year={min:min,max:max},this.parse(data||[]),"undefined"!=typeof document&&(this.container="string"==typeof container?document.querySelector("#"+container):container,this.drawSections(),this.insertData())};Timesheet.prototype.insertData=function(){for(var html=[],widthMonth=this.container.querySelector(".scale section").offsetWidth,n=0,m=this.data.length;m>n;n++){var cur=this.data[n],bubble=this.createBubble(widthMonth,this.year.min,cur.start,cur.end),line=['<span style="margin-left: '+bubble.getStartOffset()+"px; width: "+bubble.getWidth()+'px;" class="bubble bubble-'+(cur.type||"default")+'" data-duration="'+(cur.end?Math.round((cur.end-cur.start)/1e3/60/60/24/39):"")+'"></span>','<span class="date">'+bubble.getDateLabel()+"</span> ",'<span class="label">'+cur.label+"</span>"].join("");html.push("<li>"+line+"</li>")}this.container.innerHTML+='<ul class="data">'+html.join("")+"</ul>"},Timesheet.prototype.drawSections=function(){for(var html=[],c=this.year.min;c<=this.year.max;c++)html.push("<section>"+c+"</section>");this.container.className="timesheet color-scheme-default",this.container.innerHTML='<div class="scale">'+html.join("")+"</div>"},Timesheet.prototype.parseDate=function(date){return-1===date.indexOf("/")?(date=new Date(parseInt(date,10),0,1),date.hasMonth=!1):(date=date.split("/"),date=new Date(parseInt(date[1],10),parseInt(date[0],10)-1,1),date.hasMonth=!0),date},Timesheet.prototype.parse=function(data){for(var n=0,m=data.length;m>n;n++){var beg=this.parseDate(data[n][0]),end=4===data[n].length?this.parseDate(data[n][1]):null,lbl=4===data[n].length?data[n][2]:data[n][1],cat=4===data[n].length?data[n][3]:3===data[n].length?data[n][2]:"default";beg.getFullYear()<this.year.min&&(this.year.min=beg.getFullYear()),end&&end.getFullYear()>this.year.max?this.year.max=end.getFullYear():beg.getFullYear()>this.year.max&&(this.year.max=beg.getFullYear()),this.data.push({start:beg,end:end,label:lbl,type:cat})}},Timesheet.prototype.createBubble=function(wMonth,min,start,end){return new Bubble(wMonth,min,start,end)};var Bubble=function(wMonth,min,start,end){this.min=min,this.start=start,this.end=end,this.widthMonth=wMonth};Bubble.prototype.formatMonth=function(num){return num=parseInt(num,10),num>=10?num:"0"+num},Bubble.prototype.getStartOffset=function(){return this.widthMonth/12*(12*(this.start.getFullYear()-this.min)+this.start.getMonth())},Bubble.prototype.getFullYears=function(){return(this.end&&this.end.getFullYear()||this.start.getFullYear())-this.start.getFullYear()},Bubble.prototype.getMonths=function(){var fullYears=this.getFullYears(),months=0;return this.end?this.end.hasMonth?(months+=this.end.getMonth()+1,months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1)):(months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1>0?fullYears-1:0)):months+=this.start.hasMonth?1:12,months},Bubble.prototype.getWidth=function(){return this.widthMonth/12*this.getMonths()},Bubble.prototype.getDateLabel=function(){return[(this.start.hasMonth?this.formatMonth(this.start.getMonth()+1)+"/":"")+this.start.getFullYear(),this.end?"-"+((this.end.hasMonth?this.formatMonth(this.end.getMonth()+1)+"/":"")+this.end.getFullYear()):""].join("")},window.Timesheet=Timesheet}(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
請問，怎麼修改可以讓日期顯示出來？
我只是要做一個小範圍的時間而已，一年中的某月某日到某月某日。