<div id="myTimeline"
  data-options="{
    start: '2024-06-01',
    end  : '2024-06-30',
    scale: 'day',
    header: { display: true, label: 'My Timeline Name' },
    footer: { display: true, label: '&copy; copyright' },
    sidebar: { placement: 'left', itemHeight: 200, items: [ { type: 'text', label: 'Pointer Events' }, { type: 'text', label: 'Bar Events'} ] },
    ruler: { placement: 'bottom', top: { rows: ['month', 'day', 'weekday'] }, bottom: { rows: ['weekday', 'day', 'month'] } },
    layout: { outlined: 'both', width: 'auto', height: 'auto' },
    zoomable: true,   
  }"
></div>

Sunorhc.Timeline.create('myTimeline')