Trying too add a button too the Lightbox

Dear DHtmlx Support,
I have tried to add a button too the lightbox as directed in the following URL: … ion_header

to make thinks simple, I implemented the code as follows:

        scheduler.config.lightbox.sections = [
            { name:"description", map_to:"text", type:"textarea", focus:true, button:"help"},
        scheduler.locale.labels.button_help="Help label";
        scheduler.form_blocks.textarea.button_click=function(index, src, sec, data){
                 //called on button click
                 // index - index of section
                 // sec - html element of section header
                 // sec - html element of section editor

And within my CSS document, I added the following style:

       background-image: url(imgs/help.gif);

And I cant get the button too pop up. I tried assigning an absolute URL too the background image, rather than a relative URL, and that made no difference.

Any help would be greatly appreciated.
Kind regards
Greg Goldberg

Hello, Greg Goldberg.

Thank you for pointing our attention to this issue :slight_smile:

And I cant get the button too pop up.

Button should be displayed correctly with the text defined in the scheduler.locale.labels.button_help variable. But indeed icon for it won’t be displayed:
Right now it uses name of the section instead of button in the CSS class:
.dhx_custom_button_description instead of .dhx_custom_button_help

Fix will be included in the upcoming version though you can apply it yourself right now:

  1. Open dhtmlxscheduler.js
  2. Locate

function declaration.
3. Locate following part (variable names may differ):

if (sns[i].button) button = "<div style='float:right;' class='dhx_custom_button' index='"+i+"'><div class='dhx_custom_button_"+sns[i].button+"'></div>

and change

<div class='dhx_custom_button_"+sns[i].name+"'></div>


<div class='dhx_custom_button_"+sns[i].button+"'></div>

Now your CSS class styles will be applied but image still won’t be displayed as you also need to specify it sizes (height, width).

Hope this helps.

Best regards,

Hi Ilya,
Thanks for your advice, pointing me to that scope of the code managed to resolve my issue. To do this, I had to make the following change to the code. The code you mentioned is now

                A="<div style='float:right;'  class='dhx_custom_button' index='"+B+"'><div class='dhx_custom_button_"+E[B].button+"'></div><div>"+this.locale.labels["button_"+E[B].button]+"</div></div>";

however, I also had to change the following code (The next line)

C+="<div id='"+E[B].id+"'  style='display:none' class='dhx_cal_lsection'>"+A+this.locale.labels["section_"+E[B].name]+"</div>",E[B]);

so that it is:

C+="<div id='"+E[B].id+"' class='dhx_cal_lsection'>"+A+this.locale.labels["section_"+E[B].name]+"</div>",E[B]);

Thanks for all your great help, as usual.
Kind regards
Greg Goldberg

P.S. This is probably a fix i implemented too hide the section text.