Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Phil on Mar 18, 2009 05:57
open dhtmlx forum
dhtmlxCalendar and dhtmlxWindow

Hello,

When i open a modal window, the calendar in the main page is still available and clickable. If i move the window, the calendar always stay on top.

Is it the standard behaviour of the calendar component ?

Thanks in advance

Phil
Answer posted by Alex (support) on Mar 18, 2009 06:46

Hello,

The issue wasn't reproduced locally.

Was the calendar rendered inside window viewport ?

Please, provide the sample to reproduce the issue. 

Answer posted by phil on Mar 18, 2009 09:01
Code for the main page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ESIC 1J.942 - COSIC</title>
<link rel="stylesheet" type="text/css" href="Suite/dhtmlx.css">
<link rel="stylesheet" type="text/css" href="Css/Style.css">
<script src="Suite/dhtmlx.js"></script>
</head>
<body style="width: 100%; height: 100%;    margin: 0px; overflow: hidden;">
<div align="center" id="cal" style="display:none; width:100%; height:100%; margin-top:5px">
<script>
function mSelectDate(date) {
accordeon.cells("quinzaine").attachURL("Liste_Systeme_Jour.php?Date="+ mCal.getFormatedDate("%Y-%m-%d", date));
accordeon.cells("messages").attachURL("Liste_Messages_Jour.php?Date="+ mCal.getFormatedDate("%Y-%m-%d", date));
accordeon.cells("actualites").attachURL("Liste_Actualites_Jour.php?Date="+ mCal.getFormatedDate("%Y-%m-%d", date));
accordeon.cells("actualites").open();
    return true;
}

dhtmlxCalendarLangModules = new Array();
 
//set new language and date format
dhtmlxCalendarLangModules['fr'] = {
    langname:    'fr',
    dateformat:    '%d/%m/%Y',
    monthesFNames:    ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
    monthesSNames:    ["Jan", "Feb", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    daysFNames:    ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
    daysSNames:    ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
    weekend:    [0, 6],
    weekstart:    1,
    msgClose:     "Fermer",
    msgMinimize: "Minimiser",
    msgToday:     "Aujourd'hui"
}
    mCal = new dhtmlxCalendarObject("cal", false, {isYearEditable: true,isMonthEditable: true});
    mCal.setYearsRange(2000, 2020);
    mCal.setSkin("dhx_blue");
    mCal.loadUserLanguage("fr");
    mCal.attachEvent("onClick",mSelectDate);
    mCal.draw();
    </script>
</div>

<script>
    var wins = new dhtmlXWindows();
    wins.setImagePath("Suite/imgs/");
    var cadre = new dhtmlXLayoutObject(document.body, "3W");
    var menu = cadre.attachMenu();
    menu.loadXML("Menu.xml");
    menu.attachEvent("onClick", function (id) {
    switch(id){
        case "mnu_synthese":window.location= "index.php";
        break;
        case "mnu_actualite":window.location= "Actualites.php";
        break;
        }
    });
    var barre = cadre.attachToolbar();
    var status = cadre.attachStatusBar();
    cadre.cells("a").setWidth(250);
    cadre.cells("c").setWidth(250);
    cadre.cells("a").setText("Synthèse journalière");
    cadre.cells("b").setText("");
    cadre.cells("c").setText("0pérationnel");
    var cadre1 = new dhtmlXLayoutObject(cadre.cells("a"), "2E");
    cadre1.cells("a").hideHeader();
    cadre1.cells("b").hideHeader();
    cadre1.cells("a").attachObject("cal");
    cadre1.cells("a").setHeight(185);
    cadre1.cells("a").fixSize(false, true);
    var accordeon = cadre1.cells("b").attachAccordion();
    accordeon.addItem("actualites", "Actualité(s)");
    accordeon.addItem("messages", "Message(s)");
    accordeon.addItem("quinzaine", "Arrêts système");
    accordeon.addItem("maintenance", "Maintenance(s)");
    accordeon.cells("quinzaine").attachURL("Liste_Systeme_Jour.php");
    accordeon.cells("messages").attachURL("Liste_Message_Jour.php");
    accordeon.cells("actualites").attachURL("Liste_Actualites_Jour.php");
    var cadre2 = new dhtmlXLayoutObject(cadre.cells("c"), "2E");
    cadre2.cells("a").setText("Etat des réseaux");
    cadre2.cells("a").attachURL("Liste_Reseaux_Etat.php");
    cadre2.cells("b").setText("M.I.S en cours");
    cadre2.cells("b").attachURL("Liste_Mis_Cours.php");
    mSelectDate(mCal.getDate());
</script>
</body>
</html>

code where the windows is created, this function is in the file "Liste_Reseaux_Etat.php" which is the attachURL of cadre2.cells("a")

function Chargediag(id,entete)
{
var win = parent.wins.createWindow("win1",0,0,500,300);
win.setModal(true);
win.button("park").hide();
win.center();
win.setText("Cause(s) de la panne pour le réseau "+entete);
win.attachURL("Fiche_Reseau.php?Reseau="+id, true);
}

Answer posted by Alex (support) on Mar 19, 2009 02:41

You can try to modify the calendar style - to decrease it z-index (the default is 99):

<link rel="stylesheet" type="text/css" href="Css/Style.css">

<style> 

.dhtmlxcalendar_dhx_blue{
  background: url(imgs/__dhxCal_skin_Blue/cal_bg_single.gif) no-repeat;
  font-family: Arial;
  z-index:40;
  height:173px;
  padding: 14px 10px 0px 8px;
  width:161px;  
}
</style>

Answer posted by Phil on Mar 19, 2009 04:35
Thanks a lot, now it's ok.