Lightbox display multiple custom field in the same line

Scheduler Javascript
#1

Everyone,

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

#2

Hello,

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

scheduler.config.lightbox.sections=[
    { 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">
    </div>
    <br>
    <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;'>
</div>

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").focus();
    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.deleteEvent(event_id);
}
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);

Styles:

#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

#3

Wonderful , Let me try and feedback. Many thanks anyway