Lightbox display multiple custom field in the same line


How i display on the lightbox 3 customs fields but rather to be display line by line on the lightbox, i would like display the 3 of them on the same line

Thanks you


You can customize CSS styles for lightbox controls. For example, for a lightbox with the following configuration:

    { name: "description", height: 200, map_to: "text",     type: "textarea" , focus: true },
    { name: "details1",    height: 22,  map_to: "details1", type: "textarea" },
    { name: "details2",    height: 22,  map_to: "details2", type: "textarea" },
    { name: "details3",    height: 22,  map_to: "details3", type: "textarea" },
    { name: "time",        height: 72,  map_to: "auto",     type: "time" }

Styles might look like this:

   .dhx_cal_light.dhx_cal_light_wide {
        width: 800px;  

    .dhx_cal_larea {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

    .dhx_wrap_section:nth-child(1) {
        flex: 1 0 100%;

    .dhx_wrap_section:nth-child(n+2):nth-child(-n+4) {
        flex: 0 0 calc(30% - 10px);

    .dhx_wrap_section:nth-child(5) {
        flex: 1 0 100%;

Here is an example: DHTMLX Snippet Tool

As another option, you can use a fully custom lightbox ( Fully Custom Lightbox Scheduler Docs ).
Container with lightbox:

<div id="my_form">
    <label for="description">Event text </label><input type="text" name="description" value="" id="description"><br>
    <div class="custom-inputs">
        <label for="custom1">Custom 1 </label><input type="text" name="custom1" value="" id="custom1">
        <label for="custom2">Custom 2 </label><input type="text" name="custom2" value="" id="custom2">
    <input type="button" name="save" value="Save" id="save" style='width:100px;'>
    <input type="button" name="close" value="Close" id="close" style='width:100px;'>
    <input type="button" name="delete" value="Delete" id="delete" style='width:100px;'>

JS code:

const html = function(id) {
    return document.getElementById(id);

scheduler.showLightbox = function(id) {
    const ev = scheduler.getEvent(id);
    scheduler.startLightbox(id, html("my_form"));

    html("description").value = ev.text;
    html("custom1").value = ev.custom1 || "";
    html("custom2").value = ev.custom2 || "";

function save_form() {
    const ev = scheduler.getEvent(scheduler.getState().lightbox_id);
    ev.text = html("description").value;
    ev.custom1 = html("custom1").value;
    ev.custom2 = html("custom2").value;

    scheduler.endLightbox(true, html("my_form"));

function close_form() {
    scheduler.endLightbox(false, html("my_form"));

function delete_event() {
    const event_id = scheduler.getState().lightbox_id;
    scheduler.endLightbox(false, html("my_form"));
scheduler.event(document.querySelector("#my_form [name='save']"), "click", save_form);
scheduler.event(document.querySelector("#my_form [name='close']"), "click", close_form);
scheduler.event(document.querySelector("#my_form [name='delete']"), "click", delete_event);


#my_form {
    position: absolute;
    top: 100px;
    left: 200px;
    z-index: 10001;
    display: none;
    background-color: white;
    border: 2px outset gray;
    padding: 20px;
    font-family: Tahoma;
    font-size: 10pt;

#my_form label {
    width: 200px;

Please see an example: DHTMLX Snippet Tool

Wonderful , Let me try and feedback. Many thanks anyway