jc-timeline/doc/js/genericTimeline.js

const timeline = document.getElementById("timeline");
const rows = [ 
    {id:'1',title:"Ressource 1 DarkSlate",eventBgColor:"DarkSlateBlue"},
    {id:'3',title:"Ressource 3"},
    {id:'4',title:"Ressource 4"},
    {id:'5',title:"Ressource 5"}];
    rows[0].parent = rows[1];
    rows[2].parent = rows[1];

const data = dayjs().startOf("hour").hour(9);
const timeslots = [
    {id:'1', title:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
    {id:'2', title:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
    {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate()},
    {id:'4', ressourceId:'3', start:data.startOf("day").subtract(1,"h").toDate(), end:dayjs().endOf("hour").add(1,"h").toDate()}
]
console.log(timeline.addRessources(rows));

timeline.addEvents(timeslots);

const timeline2 = document.getElementById("timeline2");
            timeline2.setLegendUnitFormat("d","MMM D")