Timesheet Style Timeline JavaScript Library – Timesheet.js

Preview:

Description:

Timesheet.js is a JavaScript library to visualize your data and events in a timesheet-style timeline chart.

This timeline-style presentation lets users quickly grasp the chronological flow of events, milestones, and other time-based data, providing a clear and comprehensive understanding of your information.

How to use it:

1. Download and import the Timesheet.js library.

<!-- Dark Theme -->
<link rel="stylesheet" href="timesheet.min.css" />
<!-- White Theme -->
<link rel="stylesheet" href="timesheet-white.min.css" />
<!-- Core JavaScript -->
<script src="timesheet.min.js"></script>

2. Create a DIV element to hold the timeline.

<div id="example"></div>

3. Initialize the Timesheet, set min/max years, and define your own events as follows:

new Timesheet('example', 2015, 2023, [
    ['09/2013', '09/2014', 'iPhone 5C / 5S', 'Custom Lable Here'],
    ['09/2014', '09/2015', 'iPhone 6 / 6P', 'Custom Lable Here'],
    ['09/2015', '09/2016', 'iPhone 6S / 6SP', 'Custom Lable Here'],
    ['09/2016', '09/2017', 'iPhone 7 / 7P', 'Custom Lable Here'],
    ['09/2017', '09/2018', 'iPhone X / iPhone 8 / 8P', 'Custom Lable Here'],
    ['09/2018', '09/2019', 'iPhone XS', 'Custom Lable Here'],
    ['09/2019', '09/2020', 'iPhone 11', 'Custom Lable Here'],
    ['09/2020', '09/2021', 'iPhone 12', 'Custom Lable Here'],
    ['09/2021', '09/2022', 'iPhone 13', 'Custom Lable Here'],
    ['09/2022', '09/2023', 'iPhone 14', 'Custom Lable Here'],
]);