Comments (2)
Hi there,
The screenshot of demo you said is image for tutorial and debug I'm writing now. Therefore that is not published yet.
FYI, an example codes for that debug are as follows:
<div id="my-timeline">
<ul class="timeline-events">
<li>Deactive event pattern 1</li>
<li data-timeline-node="">Deactive event pattern 2</li>
<li data-timeline-node="{}">Deactive event pattern 3</li>
<li data-timeline-node="{start:'2018-10-18 9:50',end:'2018-10-18 19:15',content:'The start point and the end point are out of range (before the time line range)'}">Out of range event</li>
<li data-timeline-node="{eventId:'7',start:'2018-10-26 5:35',end:'2018-10-26 6:15'}"><label class="event-label">Label only</label></li>
<li data-timeline-node="{eventId:0,start:'2018-10-26 9:50',end:'2018-10-26 18:50'}"><div class="event-content">Body only</div></li>
<li data-timeline-node="{eventId:1,start:'2018-10-26 00:00:00',end:'2018-10-31 23:59:59',row:2,label:'Label in attribute',content:'Body in attribute',bgColor:'#CFC',color:'#33E'}">End point out of range</li>
<li data-timeline-node="{eventId:4,start:'2018-10-25 12:00:00',end:'2018-10-26 22:59:59',row:3,bgColor:'#CCF',color:'#E3E'}"><p class="event-label">Label in child element</p><p class="event-content">Body in child element</p></li>
<li data-timeline-node="{eventId:null,start:'2018-10-26 10:03:48',end:'2018-10-26 13:21:16',row:4,label:'Label in attribute',content:'Body in attribute',extend:'{toggle:\'popover\',placement:\'top\',trigger:\'hover\'}'}"><p class="event-label">Test of Bootstrap Popover</p><span class="event-label">"duplicated" label in child element</span><p class="event-content">The correspondence to the Bootstrap popover became a little easier</p><div class="event-content">"duplicated" body in child element</div></li>
<li data-timeline-node="{start:'2018-10-01 00:00:00',end:'2018-10-24 23:59:59',row:4,extend:'{toggle:\'modal\',target:\'#myModal\'}'}"><h4 class="event-label">Test of Bootstrap Modal</h4><p class="event-content">Also the start point of this event is also outside the range</p></li>
<li data-timeline-node="{start:'2018-11-01 00:00:00',end:'2018-11-9 23:59:59',row:5,callback:'$(\'#myModal\').modal()'}"><h4 class="event-label">Test of Bootstrap Modal 2</h4><p class="event-content">Also the start point of this event is also outside the range</p></li>
<li data-timeline-node="{eventId:1,start:'2018-10-28 5:48',end:'2018-10-28 6:37',row:6,callback:'$(document).localFunction( event )'}"><div class="event-content">Start point out of range (after timeline range)</div></li>
<li data-timeline-node="{start:'2018-10-15 13:05',end:'2018-11-2 16:27',row:7,image:'imgs/thumb_014.png',rangeMeta:'Individual meta'}"><div class="event-content">An event has image</div></li>
<li data-timeline-node="{start:'0079-10-18 9:50',end:'0079-12-18 19:15',content:'sample'}">Test of zerofill years</li>
<li data-timeline-node="{id:14,start:'2018-10-15 10:50',content:'Set size of \"large\"',size:'large',relation:{before:-1}}">Events set only at the start point</li>
<li data-timeline-node="{id:15,start:'2018-10-17 13:45',row:2,content:'Set size of \"normal\"',size:'normal',relation:{before:16,curve:'lb'}}">An event for "pointer" - 1</li>
<li data-timeline-node="{id:16,start:'2018-10-21 10:50',row:2,content:'Set size of \"small\"',size:'small',relation:{before:15,after:-1,lineSize:8,color:'red'}}">An event for "pointer" - 2</li>
<li data-timeline-node="{id:17,start:'2018-10-23 3:45',row:3,content:'Set size of pixel value',size:4,bdColor:'blue',relation:{before:16,lineColor:'blue',size:1}}">An event for "pointer" - 3</li>
<li data-timeline-node="{id:18,start:'2018-10-24 0:00',row:4,content:'No sizing',relation:{before:17,curve:'lb'}}">An event for "pointer" - 4</li>
</ul>
</div>
let test_options = {
type : 'bar',
startDatetime : '2018-10-14 0:00',
scale : 'day',
minGridSize : 24 * 2,
showHeadline : true,
headline : {
display : true,
title : 'jQuery Timeline Ver.2.0.0a3',
range : true,
},
footer : {
display : true,
content : `<small>© ka2.org ${new Date().getFullYear()}</small>`,
range : true,
format : { hour12: false, year: 'numeric', month: 'short', day: '2-digit' }
},
sidebar : {
sticky : true,
list : [
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_002.png" class="rounded"></span> "Tony" Stark</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_003.png" class="rounded"></span> Steve Rogers</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_004.png" class="rounded"></span> Thor</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_005.png" class="rounded"></span> Hulk</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_006.png" class="rounded"></span> Natasha Romanoff</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_007.png" class="rounded"></span> Stephen Strange</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_008.png" class="rounded"></span> Peter Quill</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_013.png" class="rounded"></span> T\'Challa</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_001.png" class="rounded"></span> Peter Parker</a>',
'<a href="#"><span class="avatar-icon"><img src="imgs/thumb_015.png" class="rounded"></span> Wanda Maximoff</a>',
]
},
ruler : {
top : {
lines : [ 'year', 'month', 'day', 'weekday' ],
height : 26,
fontSize : 13,
color : '#777',
background : '#FFF',
format : { timeZone: 'Asia/Tokyo', hour12: false, decade: 'ordinal', lustrum: 'ordinal', year: 'zerofill', month: 'long', weekday: 'short', hour: 'numeric', minute: 'numeric' },
},
bottom : {
lines : [ 'week', 'year' ],
}
},
eventMeta : {
display : true,
scale : 'hour',
},
zoom : true,
debug : true
}
$('#my-timeline').Timeline( test_options )
I'm writing now full documentation for this plugin with tutorial. About detail of plugin options, please wait until will be published that documents.
Thank you,
from jquery.timeline.
@ka215 thank you very much for quick reply and useful informations. You are awesome 👍
I will make sure to follow your project! Cheers.
from jquery.timeline.
Related Issues (20)
- Vertical Timeline? HOT 1
- use of git version breaks example HOT 1
- Are dynamic row heights possible? My events shall have different heights and the row shall adapt HOT 1
- Months in Spanish are lowercase, also wrong ordinal translation. HOT 1
- Fixed height and vertical scroll bar HOT 1
- Alignment crash on firefox HOT 1
- hoverEvent HOT 1
- eventMeta formatting HOT 1
- Getting error Cannot read properties of undefined (reading 'fn') HOT 3
- Ignore dates without data
- Possibility to make header ruler sticky HOT 2
- add event issue
- import with requireJS
- Events being copied after reload HOT 1
- Overlapping Events should display on different lines but in the same row
- Conflict with Vuejs
- test.js:3 Uncaught TypeError: $(...).timeline is not a function HOT 5
- Remote events data HOT 2
- event drag and drop feature HOT 1
- Scale half-hour
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery.timeline.