You can easily create the horizontal timeline with two types by using this jQuery plugin.

Overview

  jQuery.Timeline V2

Bar Type Point Type Mixed Type Switch Theme

You are able to easily create two types of horizontal timeline with this jQuery plugin.

Report bug · Request feature · Blog

Build Status GitHub release GitHub All Releases npm download Packagist


Table of Contents

Quick start

Several quick start options are available:

  • npm: npm i jq-timeline
  • bower: bower install jq-timeline
  • Download the latest release.
  • Clone the repository: git clone https://github.com/ka215/jquery.timeline.git
  • Load via CDN:
<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing compiled and minified variations. You'll see something like this:

jquery.timeline/
└── dist/
    ├── jquery.timeline.min.css
    └── jquery.timeline.min.js

We provide compiled and minified CSS and JS (jquery.timeline.min.*). When deployed by using task for develop, generated source maps (jquery.timeline.*.map) are available for use with certain browsers' developer tools.

Usage

Include the installed files into your html:

<link rel="stylesheet" src="/path/to/jquery.timeline.min.css">

<script src="/path/to/jquery.timeline.min.js"></script>

Note: You should include the jquery core script before including this plugin javascript file. Also we recommend that would like to add defer attribute into script tag.

Bind this plugin in the scope had imported the jQuery:

$('#myTimeline').Timeline()

Supported browsers

jQuery.Timeline version 2.x supports the following browsers:

PC Mobile
Chrome Firefox Safari IE Edge Opera Android iOS Safari
Ok Ok Ok Non-compliant Ok Ok Ok Ok

Unfortunately as for the Internet Explorer etc., several methods of this plugin does not work because JavaScript implementation of browser is too immature. Please note that we are not go to support for these legacy browsers in the future.

Tutorials

The tutorial as a detailed usage of jQuery.Timeline is released here.

Documentation

jQuery.Timeline's documentation, included in this repository in the root directory, is built with ESDoc and publicly hosted on GitHub Pages at https://ka215.github.io/jquery.timeline/. The docs may also be run locally.

Documentation for previous releases

Example as demonstration

Contributions

Your donations for plugin development will help us.

Donate URL: https://ka215.github.io/jquery.timeline/donation.html

Creators

ka2 (Katsuhiko Maeno)

Contributors

Copyright and license

Code and documentation copyright 2011-2020 the ka2. Code released under the MIT License.

Comments
  • Propose most upgrade of timeline.js

    Propose most upgrade of timeline.js

    I have modify your code for :

    • for bar : Show bullet event in timeline for event width < 1, and change limit 1 to 15
    • Add MessageLoading in Default parameters
    • Add setColorEvent for defined color with function
    • Add onOpenEvent for defined action in function in clicking on event
    • Add option to show period in period by startHour and endHour (for day in work who start to 8:00 to 18:00 for example)
    • Add bootstrap chevron for event out of period
    • Add move Y position when most event in same cell
    • Add "Category" property on Event
    Capture d’écran 2019-06-25 à 10 02 34 Capture d’écran 2019-06-25 à 10 03 41 Capture d’écran 2019-06-25 à 10 03 55 Capture d’écran 2019-06-25 à 10 04 08

    In dev : I have making 2 function for nextPeriod and previousPeriod show

    Thanks for good base file! timeline.js.txt

    enhancement 
    opened by GBonnaire 14
  • Doesn't work (events are not clickable)

    Doesn't work (events are not clickable)

    Hello,

    I use:

    1. Google Chrome
    2. Default libraries from examples

    But timeline work not correct.

    In console have no errors.

    Example: https://vvt.maxmg.com/assets/uploads/timeline

    opened by AntonFix 12
  •  jQuery.Deferred exception: Property

    jQuery.Deferred exception: Property "rulers"

    jQuery.Deferred exception: Property "rulers" cannot set because undefined or invalid variable. TypeError: Property "rulers" cannot set because undefined or invalid variable.

    image

    bug 
    opened by EndersonPro 8
  • cannot change events' height

    cannot change events' height

    If options.rowHeight is changed compare to the default value, the height of the events remains unchanged. It seems that the height of the events is based only on the "Default" options and not on the given options (it is not recalculated). It therefore remains equal to 44 = Default.rowHeight - Default.marginHeight * 2 = 48 - 2*2

    https://github.com/ka215/jquery.timeline/blob/2e9de82a056744a87f3b78f0f2356130fa68ead6/src/timeline.js#L131

    bug 
    opened by AlexandrePlus 7
  • i18n not easy to use in multilanguage project

    i18n not easy to use in multilanguage project

    Hi i tried and it's work fine

       $("#myTimeline").timeline({
        i18n : {
        month: { "Jan.": "Janvier", "Fév.": "Février", "Mars": "Mars", "Avr.": "Avril", "Mai": "Mai", "Juin": "Juin", "Juillet": "Juillet", "Août.": "Août", "Sept.": "Septembre", "Oct.": "Octobre", "Nov.": "Novembre", "Déc.": "Décembre" },
        day: { "Lu": "Lundi", "Ma": "Mardi", "Me": "Mercredi", "Jeudi": "Jeudi", "Ve": "Vendredi", "Sa": "Samedi", "Di": "Dimanche" },
        ma: [ "vorm.", "nachm." ]
      },
    

    but why not extend the object and use lang files ... with something about like this !function(a){a.fn. timeline.i18n.de={month:[ ....... or

    (function($) {
          timeline.i18n = $.extend(true,  timeline.i18n, {
            'fr_FR': { ..................
    

    this will be more convienient

    opened by jipexu 7
  • Tooltips are not visible for the first row

    Tooltips are not visible for the first row

    When playing with the demo of jQuery.Timeline at https://ka2.org/jqtl-v2/index.php when you toggle to display tooltips then tooltips for the first row are not displayed. Tooltips for any other rows are.

    opened by rkorzeniewski 5
  • date range with same day not showing

    date range with same day not showing

    thank you for the plugin firstly

    im using your timeline plugins for leave system https://prnt.sc/o7a6id

    <li data-timeline-node='{"row":"1","start":"2019-02-01 00:00","end":"2019-02-01 00:00","bgColor":"#ffc107","color":"#FFFFFF","label":"Annual Leave"}'></li>

    because some people only apply a day leave, start date and end date are the same, but it do not showing out, please help.

    opened by teddybugs 5
  • Issue with a particular day

    Issue with a particular day

    With the grid set up with months and days the 27th October is taking 2 days of the grid and pushing a day all the events afterwards.

    https://imgur.com/a/lcie3r6

    Thanks

    opened by potimaripoti 5
  • how i can create smaller time scale like (seconds)

    how i can create smaller time scale like (seconds)

    i working on an app for tracking small time scales (seconds) and i found your plugin and it is really awesome ,but the problem is my event is overlapped on each others because ( as i imagine time deference between them is seconds) screenshot

    opened by salamaashoush 5
  • Wrong year displayed in header

    Wrong year displayed in header

    When displaying the year on the top ruler the value is one year less then the data. The bottom ruler displays the correct year. By using the browser debugger, you can see that the "year-2018" element has the value "2017".

    Timeline Ruler wrong - Html

    bug 
    opened by Flemmingc 4
  • npm: npm i jquery-timeline

    npm: npm i jquery-timeline

    Hi dear @ka215, how are you?

    I'm trying to use the plugin as a module in my project, but when I execute the command (npm i jquery-timeline), that operation download another plugin, not yours, do you knew about it?

    This is the plugin that it command download https://github.com/d-ashesss/jquery-timeline

    Have a nice day, Regards.

    opened by danycr90 4
  • Conflict with Vuejs

    Conflict with Vuejs

    Describe the bug

    I have some code written in Vuejs when I am activating this library it's throwing error Event.$on is not a function and Event.$emit is not a function.

    Sample of my code is below.

        Event.$on('eventFailed', function(message) {
            self.alertClass = 'alert-danger';
            self.alertContent = message;
        });
    
        Event.$on('eventSucceed', function(message) {
            self.alertClass = 'alert-success';
            self.alertContent = message;
        });``
    

    In timeline js Event is written in line 463 to `511. As per my opinion this is getting conflict with Vuejs Event.

    opened by jatindv 0
  • Overlapping Events should display on different lines but in the same row

    Overlapping Events should display on different lines but in the same row

    Current overlapping events in the same row are displayed on top of each other, would be great of timeline.js would display them below each of it detects overlapping events. https://github.com/ka215/jquery.timeline/issues/39 seems to have the solution but was never merged I guess as it does not work?

    opened by otto24 0
  • Events being copied after reload

    Events being copied after reload

    After reloading the timeline the events get copied. This results in events displaying double on the timeline. How can I prevent the timeline to copy the old events to the timeline after reloading? I have the reloadCacheKeep setting set to false, but it keeps happening.

    opened by jcsdesterke 1
  • import with requireJS

    import with requireJS

    I am trying to use jquery.timeline but with requireJS. The platform I am using only allow me to import using requireJS

    But when I do it, I receive the console error : $(...).Timeline is not a function

    what kind of change do I need to make in requireJS ou timeline code to allow requireJS import the Timeline initializer?

    Thanks

    opened by hzozimo 0
  • add event issue

    add event issue

    I'm using the plugins and call add event js function but the event doesn't fired

    js Code:

    $('#roadmap').Timeline('addEvent', [ {start:'2022-05-16 00:00:00',end:'2022-12-20 23:59:59',row:3,label:'Add Event',content:'test test test...'}, {start:'2022-06-18 00:00:00',end:'2022-09-22 23:59:59',row:4,label:'Add Event 2',content:'test2 test2 test2...'}, ], function( elm, opts, usrdata, addedEvents ){ console.log( usrdata.msg ); // show "Added Events!" in console }, { msg: 'Added Events!' } );

    is there any mistake ?

    opened by danyaGharbieh 0
Releases(v2.1.3)
  • v2.1.3(Nov 28, 2020)

    • Fixed the bug that fails to rendering the headline meta when a "endDatetime" of the timeline option is defined to "auto" (Issue#72).
    • Modified several styles of headline and footer in Timeline.
    • Changed the branch name representing the repository from "master" to "main".
    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(Nov 13, 2020)

    • Fixed a bug where the grid width specified minGridSize did not work properly when the scale is "week" (Issue#54).
    • Added the "disableLimitter" option to avoid validation of the maximum of the scale grids (Issue#71).
    // "disableLimitter" is default to "false", or if omit that too.
    $('#myTimeline').Timeline({ disableLimitter: true })
    
    • Modified the styles of sidebar item elements in the timeline.
    <style>
    /* If you want to insert margins before and after the sidebar string: */
    .jqtl-side-index-item::before,
    .jqtl-side-index-item::after {
      width: 1em;
    }
    </style>
    
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 10, 2020)

    • Fixed a bug that some methods did not work if the selector of the timeline instance contained uppercase letters (Issue#56).
    • Fixed a bug that the side-scroll bar is displayed when the width of the element of the timeline instance overflows the parent element (Issue#59).
    • Upgraded all modules for plugin builds to the latest configuration.
    • Ignored testing resources from the master branch (Note: they still exist in the develop branch).
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Sep 29, 2020)

    • Fixed the event ID generation process by the addEvent method (Issue#13).

      Since ver.2.1.0, the events with duplicate IDs cannot be added and an error will occur. And if you specify a unique ID, it will be added with that event ID. An ID is automatically generated as in the past when an event with an unspecified ID is added.

    • Prevented flicker when replacing any events by using addEvent method (Issue#51).
    • Fixed a bug with some curved relation lines (Issue#57).
    • Added the theme color setting option for timeline instances (Issue#58).

      If you want to enable a custom theme, you need to change the theme name to something other than "default" and set various colors.

    • Fixed a bug that there is a difference in locale processing between the top and bottom rulers (Issue#61).
    • Added an argument that can refer to the newly added event data to the callback function of the addEvent method.

      If user data is specified in the 4th argument of the method, the event data added in the 4th argument of the callback can be referenced, and if user data is not specified, the event data added in the 3rd argument of the callback can be referenced. The event data is an array with the issued event ID as the key and the event data object as the value.

    • Changed the wrapping process for custom user data arguments for each method.
    • Adjusted and added various styles.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Nov 19, 2019)

    • Revised as first public version from beta version.
    • Registered this package to the npm and the bower.
    • Fixed some bugs which are issue#48 etc.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0b5(Sep 10, 2019)

    • Fixed a bug that the event node height does not work to be adjusted with depending on a "rowHeight" option.
    • Fixed a bug that different ruler is displayed from actual date-time when has timezone diff times as like on while DST.
    • Changed an "openEvent" method to be able to bind custom user function that fire just before opening event. (instead of "onOpenEvent" option in PR#37) Usage:
    $('#my-timeline').Timeline().Timeline('openEvent', (targetEvent, viewerContents) => {
        // Called just before inserting content to the viewer for the timeline.
        console.log( targetEvent, viewerContents )
    
        // If return false at this function then you can skip default viewer rendering process
        // built in this plugin.
        return false
    })
    
    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0b5.zip(64.63 KB)
  • v2.0.0b4(Sep 2, 2019)

    • Changed the order of priority of overwriting to "hook function > event params > colorScheme.event object".
    • Fixed a bug that does not hide the loader when empty event.
    • Fixed a bug that does not overflow the event container.
    • Added optional option type definition to the documentation of an esdoc.
    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0b4.zip(64.22 KB)
  • v2.0.0b3(Aug 27, 2019)

    • Fixed a bug that occurred error if an option does not have the ruler settings when binding the Timeline.
    • Changed to use webpack for deploying the scripts.
    • Synchronized several internal processing during timeline initialization by the Promise.
    • Added the "colorScheme" option for setting the default color of every event. (by @Guillaume-Bo, PR#37)
    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0b3.zip(64.07 KB)
  • v2.0.0b2(Jul 9, 2019)

    • Added the "firstDayOfWeek" option to define a start day of one week on the timeline.
    • Added the "truncateLowers" property in the ruler option to ignore outputting lower ruler scale than global scale.
    • Fixed the bug when zooming the scale.
    • Changed the default preloading animation to indicator type from strings type.
    • Added the "loadingMessage" option for using the custom loader content (by @Guillaume-Bo , PR#37)
    • Became to able to include the initial events to the plugin option by the "eventData" option.
    • Added the "mixed" type to be able to place the events of bar and point type together on the timeline.
    • Added some properties that "presentTime", "stripedGridRow", "horizontalGridStyle", "verticalGridStyle".
    • Added a property of "custom" to output the custom datetime format.
    • Added the events to be able to swipe the timeline container on the PC browser too.
    • Supported to summer time (Daylight Savings Time).
    • Fixed the bugs that broke some layouts.
    • Fixed some internal processing bugs and stabilized the operation of various methods.
    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0b2.zip(60.28 KB)
  • v2.0.0b1(May 24, 2019)

    • Added tasks into gulp for deploying on production.
    • Added new methods named "dateback" and "dateforth".
    • Added new option named "effects" for timeline UI enhancement.
    • Fixed a bug that does not remove specific events on "removeEvent" method.
    • Fixed a bug that the vertical position of the relation line deviates in multiple rows of containers.
    • Fixed a bug that method chain did not work due to asynchronous initialization.
    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0b1.zip(52.99 KB)
  • v2.0.0a3(Nov 14, 2018)

    Although this version is a release candidate, it is still under development and it is possible that malfunctions and undetermined specifications are included.

    Also, at the version of alpha-2 it's added some new methods as for "reload", "zoomScale".

    And fixed a bug that does not open event detail when clicked event on the timeline.

    Source code(tar.gz)
    Source code(zip)
    jquery.timeline.v2.0.0a3.zip(376.49 KB)
  • v1.0.5(Nov 6, 2018)

  • v1.0.3(Jun 10, 2017)

  • v1.0.2(Jun 7, 2017)

  • v1.0.1(May 29, 2017)

  • v1.0.0(May 26, 2017)

Owner
ka2
I'm a freelance Web application developer. I work extensively in IT as sole proprietor, while also developing open source applications.
ka2
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
Portable Activity Timeline that draws the Timeline based on data given in JSON or CSV format

Portable Activity Timeline that draws the Timeline based on data given in JSON or CSV format. By clicking on any activity a detailed modal window is displayed. Initially developed for post incident investigations to get a overview of the situation in an it-environment.

Daniel 5 Oct 11, 2022
Compile-time tests for types. Useful to make sure types don't regress into being overly-permissive as changes go in over time.

expect-type Compile-time tests for types. Useful to make sure types don't regress into being overly-permissive as changes go in over time. Similar to

Misha Kaletsky 82 Jan 8, 2023
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
jQuery Plugin for Ticker, News Ticker with Vertical, Horizontal, Marquee and Typewriting effects

AcmeTicker - News Ticker A very lightweight jQuery plugin for creating advanced news ticker. Demo: Gutentor News Ticker Ticker Type Vertical Horizonta

Santosh Kunwar 11 Sep 3, 2022
Zero Two Bot,A fully Modular Whatsapp Bot to do everything possible in WhatsApp by Team Zero Two

?? ???????? ?????? ???? ?? A Moduler WhatsApp Bot designed for both PM and Groups - To take your boring WhatsApp usage into a whole different level. T

Sam Pandey 69 Dec 25, 2022
A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles

range-slider-input A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles. Ex

Utkarsh Verma 42 Dec 24, 2022
well yes, but can you do it in types?

Yes, but can you do it in types? A collection of challenges which you complete in solely the type system. Everyone knows you can write code to do thin

catgirlkelly 11 Oct 27, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto 41 Jan 4, 2023
Horizontal Scaler for https://railway.app

Horizontal Scaler for Railway Railway doesn't offer first-party support for horizontal scaling.Thus, I have built a workaround for now that allows sca

Wyzlle 12 Jan 1, 2023
A plugin that can find the paths between two notes. Not sure who will want to use it...

Obsidian Path Finder Plugin Install BRAT Install Obsidian42-BRAT plugin. Click Add new beta plugin and fill in jerrywcy/obsidian-path-finder. Activate

jerrywcy 29 Dec 31, 2022
jQuery pop-up script displaying various types of content in corner of browser

Corner Popup v1.30 Fully customizable pop-up box created to display all types of messages in corner of your browser. Website: https://espritdesign.pl/

Łukasz Brzostek 24 Nov 27, 2022
A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.

file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file

Anton Bardov 1 May 31, 2021
A compact JavaScript animation library with a GUI timeline for fast editing.

Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. Check it out in this example: http://vorg.github.io/timeline.

Marcin Ignac 516 Nov 26, 2022
Hides all the @saveToNotion @memdotai @threadreaderapp tweets from your Twitter timeline

This is a Plasmo extension project bootstrapped with plasmo init. Getting Started First, run the development server: pnpm dev # or npm run dev Open yo

null 2 Oct 11, 2022