How to add a hidden field in dhtmlx scheduler lightbox

Question

I am trying to modify dhtmlx scheduler lightbox, i have added some new fields here, but now the problem i need a hidden field to it, and will pass the value through JavaScript. But dhtmlx scheduler do not have any field type hidden and i am unable to push any custom class or id there. I know there is a example which will create custom lightbox view here, but i do not want to use that just for one field.

Here is My code :

function init() {
    var role = <%= role %> ;
    var custom_form = document.getElementById("custom_form");
    scheduler.config.lightbox.sections = [
        {   name: "Post on",type: "radio",map_to: "post_on",
            options: [
                { key: "facebook", label: '<i class="fa fa-facebook"> </i>' },
                { key: "google", label: '<i class="fa fa-google-plus"> </i>' },
                { key: "twtter", label: '<i class="fa fa-twitter"> </i>' }
            ]
        },
        { name: "files", height: 50, map_to: "files", type: "textarea", focus: true }, //This one need to be a hidden field with a unique class or id
        { name: "text", height: 50, map_to: "description", type: "textarea", focus: true },
        {   name: "Tags: ", type: "multiselect",map_to: "tags",
            options: [
                { key: "funny", label: 'Funny' },
                { key: "promotions", label: 'Promotions' },
                { key: "Branding", label: 'Branding' },
            ]
        },
        {name: "time",height: 72,type: "time",map_to: "auto",},
    ];
    scheduler.config.first_hour = 0;
    scheduler.config.event_duration = (60 * 14) - 10;
    scheduler.config.auto_end_date = true;
    scheduler.config.include_end_by = true;
    scheduler.locale.labels.section_priority = 'Priority';
    // Adding custom button
    scheduler.config.buttons_left = ["dhx_save_btn", "dhx_cancel_btn", "add_file"];
    scheduler.locale.labels["add_file"] = "Add Files";
    scheduler.config.buttons_right = ["dhx_delete_btn", "select_file"]
    scheduler.locale.labels["select_file"] = "Select File";
    scheduler.attachEvent("onLightboxButton", function(button_id, node, e) {
        if (button_id == "add_file") showUploader();
        else if (button_id == "select_file") showFilemanager();
    });
    scheduler.config.xml_date = "%Y-%m-%d %H:%i";
    scheduler.init('scheduler_here', new Date(), "month");
    var user_id = <%= locals.user_id %> ;
    scheduler.templates.xml_date = function(value) { return new Date(value); };
    scheduler.load("/cdata?user_id=" + user_id, "json");
    var dp = new dataProcessor("/cdata?user_id=" + user_id);
    dp.init(scheduler);
    dp.setTransactionMode("POST", false);
    scheduler.templates.event_bar_text = function(text, start, end, event) {
        return "<b>" + end.post_on + "<b> <i>" + end.description + "</i> " + end.tags;
    };
    scheduler.templates.event_bar_date = function() { return ""; };
}

So is this possible to make the files field hidden and push a special class to it?

Thanks in advance.

score 1 · Answer 1 · answered Jan 08 '18 at 13:54

The easiest way is to redefine scheduler.config.lightbox.sections according to your conditions when onBeforeLightbox event fires. I.e. you need to create 2 configurations for lightbox: with files(1) and without(2).

Check the sample how it works. Hidden section is displayed only for 'Full access' event

score 0 · Answer 2 · answered Feb 09 '20 at 01:46

In case you can't use a separated lightbox you can make any field hidden in the lightbox by hiding its parent div and add a special class to its node directly, so in your case:

scheduler.attachEvent("onBeforeLightbox", function(id){
    scheduler.formSection('Files').node.classList.add('yourclass')
    scheduler.formSection('Files').node.parentNode.style.display = 'none'
    return true 
});

How to add a hidden field in dhtmlx scheduler lightbox

2 Answers2