Custom lightbox and create button and multiple forms

Hi !

I have a very specific and complex dev using DHTMLX. Let’s see what I have to do :

  • I have three buttons to create event (I must not create event from calendar directly)
  • Every button must open specific form :
    • two buttons open forms defined in form_sections
    • one button must open an iframe with a document form specific to project model

Here is my actual code :

var urlLoad = "?app=CALENDAR&action=GET_EVENTS&id=[CALENDAR_ID]";
    var sections_type = {
        module: [
            {name: "description", type: "textarea", map_to: "description"},
            {name: "module", type: "select", map_to: "module_id", options: scheduler.serverList("module")},
            {name: "cours", type: "select", map_to: "cours_id", options: scheduler.serverList("cours")},
            {name: "recurring", type: "recurring", map_to: "rec_type", button: "recurring"},
            {name: "time", height: 72, type: "time", map_to: "auto"}
        ],
        corps: [
            {name: "libelle", type: "textarea", map_to: "libelle"},
            {name: "description", type: "textarea", map_to: "description"},
            {name: "time", height: 72, type: "time", map_to: "auto"}
        ]
    };
    var current_type = null;
    var current_form = null;

function init_scheduler()
    {
        scheduler.config.full_day = true;               // enable parameter to get full day event option on the lightbox form
        scheduler.config.details_on_dblclick = true;    // Détail sur double click
        scheduler.config.multi_day = true;              // Permet l'affichage d'événement durant plusieurs jours
        scheduler.config.repeat_precise = true;         // Permet, lors de la création d'un événement récurrent, de ne pas créer
                                                        // les événements avant la date du premier événement créé
        scheduler.config.time_step = 15;                // Pas des événements en minutes
        scheduler.config.xml_date="%d/%m/%Y %H:%i";     // Format de date
        scheduler.config.day_date = "%l %j %F";         // Format de date
        scheduler.config.scroll_hour = 8;               // Scroll de l'écran jusqu'à l'heure indiquée
        scheduler.config.details_on_create = true;      // Ouverture de la lightbox à la création
        scheduler.config.xml_date="%Y-%m-%d %H:%i";     // Format de date utilisé

        // suppression de la barre de détail
        scheduler.xy.menu_width = 0;
        scheduler.attachEvent("onClick",function(){ return false; });

        // configuration du contenu de la box
        scheduler.templates.event_text = function(start,end,ev){
            return ev.description;
        };

        scheduler.attachEvent("onEventSave",function(id,data){
            ev = scheduler.getEvent(id);
            if (ev.type != undefined && ev.type != "")
            {
                data.type = ev.type;
            }
            else
            {
                data.type = current_type;
            }
            return true;
        });

        // configuration de la lightbox
            // labels des sections du formulaire
        scheduler.locale.labels.section_cohorte = "Cohorte";
        scheduler.locale.labels.section_module = "Module";
        scheduler.locale.labels.section_cours = "Cours";
        scheduler.locale.labels.section_description = "Description";
        scheduler.locale.labels.section_libelle = "Libellé";

        scheduler.config.lightbox.sections = sections_type["module"];

        // initialisation de l'affichage du calendrier à la date du jour
        scheduler.init('scheduler_here', new Date(), "week");
        // chargement des données à l'initialisation du calendrier
        scheduler.load(urlLoad);

        // configuration de l'url des actions pour les événements (create/update/delete)
        var dp = new dataProcessor("?app=CALENDAR&action=EVENT_ACTION&cal_id=[CALENDAR_ID]");
        // initialisation de l'objet avec ses configurations
        dp.init(scheduler);

        // workaround : rafraichissement du calendrier après une création (bug récurrence)
        scheduler.attachEvent("onEventAdded", clearCalendar);
    }

scheduler.showLightbox = function(id){
        var ev = scheduler.getEvent(id);
        var form_id = "div-form-";
        var type = null;
        // édition d'un évément existant
        if (ev.type != undefined && ev.type != "")
        {
            form_id += ev.type;
            type = ev.type;
        }
        else
        {
            // création d'un événement à partir d'un bouton
            form_id += current_type;
            type = current_type;
        }
        if (type == "cours")
        {
            // chargement de l'iframe
            var iframe = document.getElementById("form-iframe-cours");
            iframe.src = "?app=GENERIC&action=GENERIC_EDIT&id=FICHE_SEANCE";
            scheduler.startLightbox(ev.id, document.getElementById("div-form-cours"));
        }
        else
        {
            scheduler.config.lightbox.sections = sections_type[current_type];
            scheduler.startLightbox(ev.id);
        }
    }

When I click on my button to open iframe, it’s works perfectly. But when I click on the others buttons, it’s only display the div

<div class="dhx_cal_cover" style="height: 533px;"></div>

without content, nothing appear but the screen is locked (grey color and impossible to click anywhere, escape touch don’t do anything).

How can I make the scheduler behave like I want ?

Thanks in advance.

Finally, I replace my code by

function init_scheduler()
    {
        scheduler.config.full_day = true;               // enable parameter to get full day event option on the lightbox form
        scheduler.config.details_on_dblclick = true;    // Détail sur double click
        scheduler.config.multi_day = true;              // Permet l'affichage d'événement durant plusieurs jours
        scheduler.config.repeat_precise = true;         // Permet, lors de la création d'un événement récurrent, de ne pas créer
                                                        // les événements avant la date du premier événement créé
        scheduler.config.time_step = 15;                // Pas des événements en minutes
        scheduler.config.xml_date="%d/%m/%Y %H:%i";     // Format de date
        scheduler.config.day_date = "%l %j %F";         // Format de date
        scheduler.config.scroll_hour = 8;               // Scroll de l'écran jusqu'à l'heure indiquée
        scheduler.config.details_on_create = true;      // Ouverture de la lightbox à la création
        scheduler.config.xml_date="%Y-%m-%d %H:%i";     // Format de date utilisé

        // suppression de la barre de détail
        scheduler.xy.menu_width = 0;
        scheduler.attachEvent("onClick",function(){ return false; });

        // configuration du contenu de la box
        scheduler.templates.event_text = function(start,end,ev){
            return ev.description;
        };

        // lors de la soumission d'un formulaire lightbox, on ajoute le type de données que l'on sauvegarde
            // ce hook n'est pas appelé lors de la création d'un document dynacase dans l'iframe
        scheduler.attachEvent("onEventSave",function(id,data){
            ev = scheduler.getEvent(id);
            if (ev.type != undefined && ev.type != "")
            {
                data.type = ev.type;
            }
            else
            {
                data.type = current_type;
            }
            return true;
        });

        // avant l'affichage d'une lightbox, on regarde le type de box pour charger son contenu
        scheduler.attachEvent("onBeforeLightbox", function(event_id) {
            // remise à zéro de la lightbox
            scheduler.resetLightbox();
            var ev = scheduler.getEvent(event_id);
            var type = null;
            // récupération du type d'événement
            if (ev.type != undefined && ev.type != "")
            {
                // sur un évément existant
                type = ev.type;
            }
            else
            {
                // ou sur un nouvel événement
                type = current_type;
            }
            // si type cours, alors on charge l'iframe avec son contenu
            if (type == "cours")
            {
                // chargement de l'iframe
                $('#div-form-cours').html('<iframe src="?app=GENERIC&action=GENERIC_EDIT&id=FICHE_SEANCE"></iframe>');
                scheduler.startLightbox(event_id, document.getElementById("div-form-cours"));
            }
            else
            {
                scheduler.config.lightbox.sections = sections_type[current_type];
            }
            return true;
        });

        // configuration de la lightbox
            // labels des sections du formulaire
        scheduler.locale.labels.section_cohorte = "Cohorte";
        scheduler.locale.labels.section_module = "Module";
        scheduler.locale.labels.section_cours = "Cours";
        scheduler.locale.labels.section_description = "Description";
        scheduler.locale.labels.section_libelle = "Libellé";

        // initialisation de l'affichage du calendrier à la date du jour
        scheduler.init('scheduler_here', new Date(), "week");
        // chargement des données à l'initialisation du calendrier
        scheduler.load(urlLoad);

        // configuration de l'url des actions pour les événements (create/update/delete)
        var dp = new dataProcessor("?app=CALENDAR&action=EVENT_ACTION&cal_id=[CALENDAR_ID]");
        // initialisation de l'objet avec ses configurations
        dp.init(scheduler);

        // workaround : rafraichissement du calendrier après une création (bug récurrence)
        scheduler.attachEvent("onEventAdded", clearCalendar);
    }

and it’s works. I only have one error. I can open lightbox with sections defined, but I have an error when it’s try to open my iframe in lightbox : TypeError: s[1] is undefined. Why ?

TypeError: s[1] is undefined. Why ?

It can occur when some API attempts to fill the lighbox with data, but lightbox is not rendered yet.
Be sure that code sets valid lightbox.sections
Also, if you are calling startLightbox from onBeforeLightbox event, be sure to return false, to prevent default lightbox.

No more error. But nothing is displayed. Only the grey overlay div which disable the all page, but no overlay lightbox appear. The div generated

is empty. Here is my entire js code :
<script language="JavaScript">
    // url du loader pour récupérer les événements du calendrier
    var urlLoad = "?app=LAGON_CALENDAR&action=GET_EVENTS_FOR_CALENDAR&id=[CALENDAR_ID]";
    var sections_type = {
        module: [
            {name: "description", type: "textarea", map_to: "description"},
            {name: "module", type: "select", map_to: "module_id", options: scheduler.serverList("module")},
            {name: "cours", type: "select", map_to: "cours_id", options: scheduler.serverList("cours")},
            {name: "recurring", type: "recurring", map_to: "rec_type", button: "recurring"},
            {name: "time", height: 72, type: "time", map_to: "auto"}
        ],
        corps: [
            {name: "libelle", type: "textarea", map_to: "libelle"},
            {name: "description", type: "textarea", map_to: "description"},
            {name: "time", height: 72, type: "time", map_to: "auto"}
        ]
    };
    var current_type = null;
    var current_form = null;

    /**
     * Initialisation du calendrier
     *
     * @access public
     * @returns void
     */
    function init_scheduler()
    {
        scheduler.config.full_day = true;               // enable parameter to get full day event option on the lightbox form
        scheduler.config.details_on_dblclick = true;    // Détail sur double click
        scheduler.config.multi_day = true;              // Permet l'affichage d'événement durant plusieurs jours
        scheduler.config.repeat_precise = true;         // Permet, lors de la création d'un événement récurrent, de ne pas créer
                                                        // les événements avant la date du premier événement créé
        scheduler.config.time_step = 15;                // Pas des événements en minutes
        scheduler.config.xml_date="%d/%m/%Y %H:%i";     // Format de date
        scheduler.config.day_date = "%l %j %F";         // Format de date
        scheduler.config.scroll_hour = 8;               // Scroll de l'écran jusqu'à l'heure indiquée
        scheduler.config.details_on_create = true;      // Ouverture de la lightbox à la création
        scheduler.config.xml_date="%Y-%m-%d %H:%i";     // Format de date utilisé

        // suppression de la barre de détail
        scheduler.xy.menu_width = 0;
        scheduler.attachEvent("onClick",function(){ return false; });

        // configuration du contenu de la box
        scheduler.templates.event_text = function(start,end,ev){
            return ev.description;
        };

        // lors de la soumission d'un formulaire lightbox, on ajoute le type de données que l'on sauvegarde
            // ce hook n'est pas appelé lors de la création d'un document dynacase dans l'iframe
        scheduler.attachEvent("onEventSave",function(id,data){
            ev = scheduler.getEvent(id);
            if (ev.type != undefined && ev.type != "")
            {
                data.type = ev.type;
            }
            else
            {
                data.type = current_type;
            }
            return true;
        });

        // avant l'affichage d'une lightbox, on regarde le type de box pour charger son contenu
        scheduler.attachEvent("onBeforeLightbox", function(event_id) {
            // remise à zéro de la lightbox
            scheduler.resetLightbox();
            var ev = scheduler.getEvent(event_id);
            var type = null;
            // récupération du type d'événement
            if (ev.type != undefined && ev.type != "")
            {
                // sur un évément existant
                type = ev.type;
            }
            else
            {
                // ou sur un nouvel événement
                type = current_type;
            }
            // si type cours, alors on charge l'iframe avec son contenu
            if (type == "cours")
            {
                // chargement de l'iframe
                //$('#div-form-cours').html('<iframe src="?app=GENERIC&action=GENERIC_EDIT&id=LAGON_FICHE_SEANCE"></iframe>');
                scheduler.startLightbox(ev.id, document.getElementById("div-form-cours"));
                return false;
            }
            else
            {
                scheduler.config.lightbox.sections = sections_type[current_type];
            }
            return true;
        });

        // configuration de la lightbox
            // labels des sections du formulaire
        scheduler.locale.labels.section_cohorte = "Cohorte";
        scheduler.locale.labels.section_module = "Module";
        scheduler.locale.labels.section_cours = "Cours";
        scheduler.locale.labels.section_description = "Description";
        scheduler.locale.labels.section_libelle = "Libellé";

        // initialisation de l'affichage du calendrier à la date du jour
        scheduler.init('scheduler_here', new Date(), "week");
        // chargement des données à l'initialisation du calendrier
        scheduler.load(urlLoad);

        // configuration de l'url des actions pour les événements (create/update/delete)
        var dp = new dataProcessor("?app=LAGON_CALENDAR&action=EVENT_ACTION&cal_id=[CALENDAR_ID]");
        // initialisation de l'objet avec ses configurations
        dp.init(scheduler);

        // workaround : rafraichissement du calendrier après une création (bug récurrence)
        scheduler.attachEvent("onEventAdded", clearCalendar);
    }

    /**
     * Mise à jour du calendrier (workaround bug récurrence)
     *
     * @access public
     * @param evt_id : integer, Id de l'événement courant
     * @returns void
     */
    var clearCalendar = function (evt_id)
    {
        scheduler.clearAll();
        scheduler.load(urlLoad);
    }

    /**
     * Affichage du mini-calendrier
     *
     * @access public
     * @returns void
     */
    function show_minical()
    {
        if (scheduler.isCalendarVisible())
        {
            scheduler.destroyCalendar();
        }
        else
        {
            scheduler.renderCalendar({
                position:"dhx_minical_icon",
                date:scheduler._date,
                navigation:true,
                handler:function(date,calendar){
                    scheduler.setCurrentView(date);
                    scheduler.destroyCalendar()
                }
            });
        }
    }

    /**
     * Divers bind à mettre en place pour les filtres
     */
    $(document).ready(function(){
        // lorsque l'on clique sur "Créer un événement de type xxx", on initialise la lightbox
        $('.create-event').click(function(){
            current_type = $(this).attr('data-type');
            scheduler.addEventNow();
        });
    });
</script>

and here is my HTML :

<p>
    <button id="lagon-calendar-create-corps" class="btn btn-default pull-left create-event" data-type="corps" type="button">Créer un événement de type "corps"</button>
    <button id="lagon-calendar-create-cours" class="btn btn-default pull-left create-event" data-type="cours" type="button">Créer un événement de type "cours"</button>
    <button id="lagon-calendar-create-module" class="btn btn-default pull-left create-event" data-type="module" type="button">Créer un événement de type "module"</button>
</p>

<div id="div-form-cours"><iframe src="?app=GENERIC&action=GENERIC_EDIT&id=LAGON_FICHE_SEANCE"></iframe></div>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>

any idea ?

Problem solved by adding class=“dhx_cal_light dhx_cal_light_rec” in my div container !