Feature Idea: Horizontal Scrolling

Scheduler Javascript
#1

Benefits:

  1. The header will remain in place over the scheduler instead of spanning the width the of the scrolling area.
  2. The user won’t have to crunch the description of short events into the visual width of the web page.
  3. Avoid user hacks required to visualize

Current Hack: add a div around the scheduler with style set to overflow-x auto and make the width of the scheduler container longer than normal.

    <div style="width: 100%; height: 400px; overflow-x: auto">
	    <div id="scheduler_here" class="dhx_cal_container" style="width: 3000px; height: 100%">
		    <div class="dhx_cal_navline">
			    <div class="dhx_cal_prev_button">&nbsp;</div>
			    <div class="dhx_cal_next_button">&nbsp;</div>
			    <div class="dhx_cal_today_button"></div>
			    <div class="dhx_cal_date"></div>
			    <div class="dhx_cal_tab" name="timeline_tab"></div>
		    </div>
		    <div class="dhx_cal_header"></div>
		    <div class="dhx_cal_data"></div>		
	    </div>
    </div>

Proposed Fix:

  1. Add a new config setting horizontal_scrolling (true/false)
  2. Add a new config setting scroll_width (default to the same as the width of the parent div)

Wrap the scheduler div in another div and set the properties accordingly. Move the navline outside the container to properly maintain the width (it should probably be there already. The scroll_width property would allow the user to override the container width when horizontal_scrolling is false.

#2

Unfortunately the above solution will not be good in common case.
If you have vertical scroll ( which is quite common for week, day view ) - it will not be shown ( as you will need to x-scroll to the right to see it )

We have horizontal scrolling in our long term list, but it requires serious reworking of scheduler to make both scrolls always visible and usable. Anyway, thanks for your suggestion :slight_smile: