Use Case: how to integrate a nice timeline

Readable Human Format

In this tutorial we'll show how to integrate this nice timeline library in readable human format.
Pre-requisite: Getting Started with Readable

Step-1: Create dataset

Create datas in json format

create a .text block and customize data below in json format. You can enclose within [] for clarity but it isn't mandatory, for example:



Datas: [
    .text: {
    <script>
    window.onload = function() {new Timesheet('timesheet-placeholder', 2018, 2030, [
        ['2018', '12/2018', 'redlang/readable/codeops/quickrun/quickinstall foundations', 'lorem'],
        ['2019', '03/2019', 'redlang/readable/codeops/quickrun/quickinstall documentation', 'lorem'],
        ['03/2019', '04/2019', 'quickinstall ', 'ipsum'],
        ['2020', 'Had very bad luck'],
        ['10/2020', '2023', 'At least had fun', 'dolor'],
        ['02/2021', '05/2025', 'Enjoyed those times as well', 'ipsum']
            ])  };
    </script> 
    }
]

    

Step-2: Create a graphic placeholder

Create a div placeholder

paste this code snippet:



Placeholder: [
    .text: {
        <div id="timesheet-placeholder" class="timesheet color-scheme-default">
        </div>        
    }
]

    

Step-3: Insert the timeline scripts and css files

Create a div placeholder

paste this code snippet:



Scripts: [
    .text: {
        <script type="text/javascript" src="https://sbstjn.com/timesheet.js/script/lib.js"></script>
        <script type="text/javascript" src="https://sbstjn.com/timesheet.js/script/timesheet.min.js"></script>

        <link rel="stylesheet" type="text/css" href="https://sbstjn.com/timesheet.js/styles/timesheet.css">       

    } 
]

    

Step-4: Insert the timeline scripts and css files

optional: override your main css stylesheet

if there is conflict between your stylesheet and the timeline stylesheet, add this snippet at the end of your stylesheet:



/*
*Timeline overlapping
*/
.data{
	margin-top: 15px!important;
}