Vertical lines are misaligned at Bar mode of Timeline

meicom · January 23, 2024, 2:57am

Hi there,

I have an issue the vertical lines to divide each day are misaligned.
Are there something wrong settings in my code?

↓ the target lines:

The code for top timeline(Car No./Car Model):

scheduler1.plugins({ treetimeline: true, tooltip: true })
    scheduler1.skin = commonConfig.skin
    scheduler1.i18n.setLocale('en')
    scheduler1.config.header = ['date', 'prev', 'today', 'next']
    scheduler1.locale.labels.timeline_tab = 'Timeline'
    scheduler1.locale.labels.timeline_scale_header =
      "<div class='timeline_item_cell' style='width: 50%;'>Car No.</div>" +
      "<div class='timeline_item_separator'></div>" +
      "<div class='timeline_item_cell' style='width: 50%;'>Car Model</div>"
    scheduler1.xy.nav_height = 24
    scheduler1.xy.scale_height = 20

    scheduler1.createTimelineView({
      name: 'timeline',
      render: 'bar',
      x_unit: 'hour',
      x_date: '%G',
      second_scale: {
        x_unit: 'day',
        x_date: '%F/%j(%D)',
      },
      x_step: 2,
      x_size: 36,
      x_length: 12,
      y_unit: reservedCarNoList,
      y_property: 'code',
      folder_dy: 25,
      dy: 25,
      section_autoheight: false,
    })

    scheduler1.templates.timeline_date = (start, _) => {
      const convertToStringDate = scheduler1?.date.date_to_str('%Y')
      return convertToStringDate(start)
    }
    scheduler1.templates.timeline_scale_label = (_, label, event) =>
      `<div class='timeline_item_cell' style='width:50%;text-align:start;border-right:1px #e0e0e0 solid;'>${label}</div>` +
      `<div class='timeline_item_cell' style='width:50%;text-align:start;'>${
        reservationList.find((x) => x.code=== event.code)?.label ?? ''
      }</div>`

    scheduler1.templates.timeline_second_scalex_class = (date) =>
      (['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][date.getDay()] ?? '') +
      (holidayList.find((x) => x.holiday === moment(date).format('YYYYMMDD')) ? ' holiday' : '')
    scheduler1.templates.timeline_scalex_class = (date) => ([0, 1, 2, 3, 4, 5, 22, 23].includes(date.getHours()) ? 'extra-time' : '')
    scheduler1.timeline_scaley_class = (_, __, event) => colorEvenRow(event.index)
    scheduler1.timeline_cell_class = (_, __, event) => colorEvenRow(event.index)
    scheduler1.templates.event_class = (_, __, event) => setLineStyle(event)

    scheduler1.init('TimelineView1', viewDate, 'timeline')
    scheduler1.parse(reservationList)

the code for second timeline(Available Cars):

    scheduler2.plugins({ timeline: true })
    scheduler2.skin = ''material'
    scheduler2.i18n.setLocale('en')
    scheduler2.config.header = ['date', 'prev', 'next']
    scheduler2.xy.nav_height = 18
    scheduler2.xy.scale_height = 24

    scheduler2.createTimelineView({
      name: 'timeline',
      render: 'bar',
      x_unit: 'day',
      x_date: '%n/%j',
      x_step: 1, 
      x_size: 3,
      x_length: 1,
      y_unit: unreservedCarNoList,
      y_property: 'code',
      folder_dy: 18,
      dy: 18,
      section_autoheight: false,
    })

    scheduler2.templates.timeline_date = (_, __) => 'Available Cars'
    scheduler2.templates.timeline_scaley_class = (_, __, event) => colorEvenRow(event.index)
    scheduler2.templates.timeline_cell_class = (_, __, event) => colorEvenRow(event.index)

    scheduler2.init('StatusView', viewDate, 'timeline')
    scheduler2.parse(statusList)

HTML:

    <div id="TimelineView1" class="dhx_cal_container">
      <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button"></div>
        <div class="dhx_cal_next_button"></div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
      </div>
      <div class="dhx_cal_header"></div>
      <div class="dhx_cal_data"></div>
    </div>

    <div id="StatusView" class="dhx_cal_container">
      <div class="dhx_cal_navline">
        <div class="dhx_cal_date"></div>
      </div>
      <div class="dhx_cal_data"></div>
    </div>

It would be appreciated if you had any solutions.
Thank you for your kind support in advance.

meicom

Siarhei · January 23, 2024, 3:57pm

Hi @meicom,

Looks like misalignment comes from different columns count in bottom and top scheduler(difference in the left side), but I can’t say for sure, as there is not enough code to run scheduler and check it out.

It will be helpful if you reproduce the current config in the following demo:
https://snippet.dhtmlx.com/sydrh2cn
(open the demo => reproduce the issue => click the “Save” button => post here the new link).

So I will be able to research what exactly goes wrong, and is there a possibility to fix the misalignment.

The other possible reasons are - additional CSS applied to schedulers, specific browser rendering, using browser zoom different from 100%.

Kind regards,

meicom · January 30, 2024, 7:46am

Hi @Siarhei ,

【1】As your kind suggestion, I added a part of my codes into the snippet but it sadly didn’t work and display the layout having its issue well.
my version:
(By the way, is the snippet compatible with the multiple timeline feature from Scheduler Pro version…?)
https://snippet.dhtmlx.com/m3g2t93f

As you told me, it seems that the issue of misaligned vertical borderline occurs difference with the below setting in each view:

x_step
x_size

For example,
▼View1 (that expresses the outlook of assigned drivers at each LOCAL bus for 3 days)

      name: 'timeline3days',    //*we have some patterns like 1day and 3days
      render: 'bar',
      x_unit: 'hour',
      x_date: '%G',
      second_scale: {
        x_unit: 'day',
        x_date: '%n%j',
      },
      x_step: 2,    //*this option
      x_size: 36,   //*this option
      x_length: 12,

▼View2 (that expresses the outlook of assigned drivers at each EXPRESS bus for 3 days)

      name: 'timeline3days',    //*we have some patterns like 1day and 3days
      render: 'bar',
      x_unit: 'day',
      x_date: '%n/%j',
      x_step: 1,   //*this option
      x_size: 3,   //*this option
      x_length: 1,

The problem is that we need the 2 layouts like above.

【2】Also, I found the another issue.
When there were 2 labels in the left section area, the 2nd label element drops down under the 1st label.
Asis: