Горизонтальная временная шкала. js с jQuery - как настроить параметры

Question

Я создаю горизонтальную временную шкалу, используя jQuery временную шкалу. js. Я в основном хочу повторить демонстрацию, которую они имеют здесь на эту текущую неделю: https://www.jqueryscript.net/demo/Timeline-Generator-jQuery-Timeline-js/

Однако всякий раз, когда я пытаюсь настроить параметры, это не дает мне четкого разделения между часами и дни наверху. Я действительно новичок в JavaScript / jQuery, поэтому, возможно, мне не хватает чего-то действительно очевидного, несмотря на то, что я просмотрел документацию.

HTML:

<!-- Timeline Block -->
        <div id="myTimeline">
          <ul class="timeline-events">
            <li data-timeline-node="{ start:'2020-27-01 10:00',end:'2020-27-01 16:00',bgColor:'#89c757',content:'<p>Event Body...</p>' }">Event Label</li>
            <li data-timeline-node="{ start:'2020-27-01 06:10',end:'2020-27-01 18:30',row:2,bgColor:'#89c997',color:'#ffffff',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event Label</li>
            <li data-timeline-node="{ start:'2020-27-01 3:00',end:'2020-27-01 22:30',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:{toggle:'popover',placement:'bottom',content:'An event label goes here'} }">Event Label</li>
            <li data-timeline-node="{ start:'2020-27-01 3:10',end:'2020-27-01 12:30',row:4,bgColor:'#a1d8e8',color:'#008db7',extend:{toggle:'popover',placement:'bottom',content:'An event label goes here'} }">Event Label</li>
            </li>
          </ul>
        </div>

JS

$("#myTimeline").Timeline({
  type: "bar",
  startDatetime: "2020-27-01 00:00",
  scale: "hours",
  rows: 4,
    // displays headline
  headline: {
    display: true,
    title: "Sample Timeline",
    range: true,
    locale: "en-US",
    format: { hour12: true }
  },
  ruler: {
   top: {
        lines: [],
        height: 30,
        width: 700,
        fontSize: 14,
        color: "#777777",
        background: "#FFFFFF",
        locale: "en-US",
        format: { hour12: false }
        },
     },
});