How to render/inject custom html into dhtmlxScheduler UI

Scheduler Javascript
#1

I’m interesting in proper ways of rendering/injecting custom html into existing dhtmlxScheduler UI.

Please take a look on areas marked in yellow on image attached.

Could you suggest the proper way for doing such modifications.

Thanks in advance,

RUSH

dhtmlxScheduler-UI-modification.png1155×163 9.81 KB

#2

Hello,

You can edit scheduler html template to include new elements. Be sure though to edit
scheduler.xy.nav_height
option to add that new line height there.
By default scheduler.xy.nav_height = 22

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; 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="day_tab" style="right:350px;">New elements</div> <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> </div> <div class="dhx_additional_header"></div> <div class="dhx_cal_header"> </div> <div class="dhx_cal_data"> </div> </div>
“dhx_additional_header” should have absolute position set up. Be sure to check “dhx_cal_navline” attributes then scheduler is loaded.

Kind regards,
Ilya

#3

Basically scheduler locates all elements in the navigation header by their class-names, it doesn’t care about their order or positions - so you can move them or add extra content.

If you want to remove some element - just add style=“display:none” to it.

#4

Thank you for your quick responses.

One more question.

Do you have any general rules how to write custom extensions to the scheduler?

I think that ability to customize UI of scheduler, add new functionality will be very useful.

#5

Normally the customization done through assigning custom handlers to the existing events ( there are very rare cases, when you need to change anything in the actual code ). And scheduler done in such case that events can be attached in any moment of time ( you need not wait for init or any other similar event ). So just create a new js files, and store the customization there

scheduler.attachEvent(... scheduler.config...

scheduler is a global name, so it will be available from the start

Also, if you are using public API calls - there will not be any problems with updating to the next version of scheduler