Hide time scaler with showing column borders

Scheduler
#1

Hi everyone,

I would like to hide the bottom time scaler.

image
image1007×86 10.6 KB

But the column borders are needed.

image
image1006×417 33.8 KB

Like this:

image
image1012×278 29.2 KB

(I used css for the above layout but it’s a bit messy… :sweat_smile: if possible, I wonder there is the better way to write…)

Would it be possible using something options?

FYI, my codes are following:

const myScheduler1 = Scheduler.getSchedulerInstance()
const myScheduler2 = Scheduler.getSchedulerInstance()
:
myScheduler1.xy.scale_height = 10

myScheduler1.setCurrentView(currentDate, 'timeline')

hideTimeScaler()

 const hideTimeScaler = () => {
    const timeScaleHeader = document.querySelector('#MyScheduler1 .dhx_timeline_scale_header')
    if (timeScaleHeader) {
      timeScaleHeader.classList.remove('show-time-scale-header')
      timeScaleHeader.classList.add('hide-time-scale-header')
    }
    const timeScaler = document.querySelector('#MyScheduler1 .dhx_bottom_scale_container')
    if (timeScaler) timeScaler.classList.add('hide-time-scaler')
  }

▼CSS

  .hide-time-scaler {
    display: none !important;
  }
  .show-time-scale-header {
    height: 40px !important;
  }

And also, this code sadly has a problem… the scaler layout is broken after clicking the button of prev/today/next. :smiling_face_with_tear:

image
image1005×166 18.3 KB

Thank you for your many helps as always.

meicom

#2

Hi @meicom,

I would like to hide the bottom time scaler.
But the column borders are needed.

As I understand, you want to remove the row with hours, but you want to keep the borders of each hour and display them in the timeline, am I right?

It’s kinda complicated to configure it using API, as you still have to keep the x_unit: hour, to display day borders in the timeline, so using CSS trick looks like the best choice in this case.

The idea could be to hide the bottom row(with hours), add additional height and borders to the top row(with days), the CSS may look like follows:

    .dhx_bottom_scale_container .dhx_scale_bar {
        display: none;
    }
    .dhx_scale_bar.dhx_second_scale_bar {
        height: 40px !important;
        border-right: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        padding-top: 10px;
    }

Here is a demo:
https://snippet.dhtmlx.com/bvucbza9

Kind regards,

1 Like
#3

Hi Siarhei,

Thank you for giving me the good idea. I’ll try it on my end.

meicom