Customizing buttons in the lightbox

Customizing buttons in the lightbox

There is a possibility to redefine the default buttons in the lightbox.

Costumizing Lightbox buttons

Let's start from the collection where all these buttons are stored.
By default, the lightbox contains 3 buttons ('Save', 'Cancel', 'Delete') that are specified by the buttons_left and buttons_right configuration options.

scheduler.Config.buttons_left = new LightboxButtonList{
            LightboxButtonList.Save,
            LightboxButtonList.Cancel
};
//and
scheduler.Config.buttons_right = new LightboxButtonList{
            LightboxButtonList.Delete
};

To redefine the default sets of buttons you have 2 ways:

  1. Add a new member to the existing set:

    scheduler.Config.buttons_left.Add(new EventButton
          {
                Label = "Location",
                OnClick = "some_function",
                Name = "location"
    });
  2. Redefine the existing set:

    scheduler.Config.buttons_left = new LightboxButtonList
    {
                LightboxButtonList.Save,
                LightboxButtonList.Cancel,
                new EventButton
                {
                      Label = "Location",
                      OnClick = "some_function",
                      Name = "location"
                }
    };

The 'OnClick' handler function must be defined in the global scope on the client side:

function some_function(event_id){
     var event = scheduler.getEvent(event_id);
     //do something
}



To set the icon for the button (and/or apply some other styling) you should specify the CSS class as in:

.dhx_btn_set.location_set
{
      border: 1px solid #CECECE;
}
.dhx_btn_set.location_set .location
{
      display:none;
}

Note, an EventButton object defines a div consisted of 2 more divs: a div for the icon and a div for the title:

<div class="dhx_btn_set dhx_left_btn_set location_set">
    <div dhx_button="1" class="location"></div>
    <div>Location</div>
</div>
  • The main div has a css class - .dhx_btn_set.[nameOfButton]_set
  • The icon div has a css class - .dhx_btn_set.[nameOfButton]_set .[nameOfButton]
  • The label div doesn't have any css classes assigned.

Note, if you aren't going to specify the icon for your button, it's better to set display:none; to hide the icon's div:

Lightbox Button


comments powered by Disqus