jc-timeline/doc/js/genericTimeline.js

// eslint-disable-next-line no-undef
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];

// eslint-disable-next-line no-undef
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()}
]
timeline.addRessources(rows);

timeline.addTimeSlots(timeslots);

// eslint-disable-next-line no-undef
const timeline2 = document.getElementById("timeline2");
timeline2.setLegendUnitFormat("d","MMM D")