Event display

Scheduler Javascript
#1

Hi,

I have a problem since some days. My display disappear after an event, like change week or drag an another event.
I’m using scheduler.update_render = true; but it don’t work. I tried scheduler.setCurrentView and scheduler.updateView, but it still don’t work.

I would like my display “stay” on the “cube” under the date, you can see it in the picture :
http://prntscr.com/ftr7n2

How I process :

[code]//#region fonction affiche hour

function nombHeurDay(dateEvent1, dateEvent2) { //Arg “objet Date” exp: new Date(2017,3,23); pour que la fonction marche il faut précisé l’heure des objet Date pour avoir un intervale de sélection correcte

 var Arg1 = dateEvent1.toString(); // argument de sélection Arg1 est une Date
 var Arg2 = dateEvent2.toString();
 

var chain1 = Arg1[0] + Arg1[1] + Arg1[2] + Arg1[3] + Arg1[4] + Arg1[5] + Arg1[6] + Arg1[7] + Arg1[8] + Arg1[9] + Arg1[10] + Arg1[11] + Arg1[12] + Arg1[13] + Arg1[14] + Arg1[15]; // de 00:00
var chain2 = Arg1[0] + Arg1[1] + Arg2[2] + Arg2[3] + Arg2[4] + Arg2[5] + Arg2[6] + Arg2[7] + Arg2[8] + Arg2[9] + Arg2[10] + Arg2[11] + Arg2[12] + Arg2[13] + Arg2[14] + Arg2[15] + ",23:59"; // à 23:59 
var convdate1 = new Date(chain1); // on crée l'objet Date avec le premier Argument
var convdate2 = new Date(chain2); // le deuxiéme 
var evs = scheduler.getEvents(convdate1, convdate2); // on utilise la méthode getEvents sur l'intervale de récupération voulue / exp : je veux tout les events du 27/03 au 27/03 (une journée) le retour est un tableau d'évenement
var table = []; // Création d'un tableau pour stoké les événements

for (var i = 0; i < evs.length; i++) { //Je boucle par rapport au nombre d'événement récupérer sur la période

    var firstArg = evs[i].start_date; // je réucpérer la premiére Date
    var lasdtArg = evs[i].end_date; // la deuxiéme
    var strFirst = firstArg.toString(); // je convertie en string pour pouvoir manipuler
    var strLast = lasdtArg.toString(); // pareille

    var stringDay = strFirst[0] + strFirst[2]; // le jour de la semaine en anglais exemple "Fi" pour vendredi

    var hourF = strFirst[16] + strFirst[17] + strFirst[18] + strFirst[19] + strFirst[20]; //exp: 09:00
    var hourS = strLast[16] + strLast[17] + strLast[18] + strLast[19] + strLast[20]; //exp: 18:36 
    if (hourS == "00:00") { hourS = "23:59"; }
    var resultH = hourDiff(hourF, hourS); // j'utilise la méthode hourDiff pour avoir la duré de mon événement en Heure
    table[i] = resultH; // j'associe le nombre d'heure a m'on éléménet Tableau 
}
sum = 0; // j'initialise une variable somme pour pouvoire affiché le nompbre d'heure TOTALE d'une Journée. additionne le nombre d'heure des événements d'une journée
for (var y = 0; y < table.length; y++) {
    sum += Number(table[y]);
}
return sum; // passé le retour à la méthode writeHour pour pouvoir affiché le résultats d'heure sur la journée

}

//#endregion

//#region nombre heure affichage par jour

function writeHour(DiffHour, Day) { // Affiche le nombre d’heure par jour en fonction du jour voulue

var divParentHeader = document.getElementsByClassName("dhx_cal_header");   // l'élément html oû ce situe les jours de la semaine 
var childnode = divParentHeader[0].childNodes; // je récupére les enfant du noeud header
var nbDeJour = childnode.length;
var mode = scheduler.getState().mode; // pour savoir sur qu'elle vue nous somme    

var childL = childnode[0]; // Div 1 : Lundi
var childM = childnode[1]; // Div 2 : Mardi
var childMe = childnode[2]; // etc ...
var childJ = childnode[3];
var childV = childnode[4];
var childS = childnode[5];
var childD = childnode[6]; // Div 7 : Dimanche  
if (mode == "day") {

    var divParentDay = document.getElementsByClassName("dhx_cal_header");
    var nodeChildDay = divParentDay[0].childNodes;
    var childDay = nodeChildDay[0];

    var contenueChildDay = childDay.innerHTML;
    childDay.innerHTML = contenueChildDay[0] + contenueChildDay[1] + contenueChildDay[2] + contenueChildDay[3] + contenueChildDay[4] + contenueChildDay[5] + contenueChildDay[6] + contenueChildDay[7] + contenueChildDay[8] + contenueChildDay[9] + contenueChildDay[10] + "<br/>" + DiffHour + "  <b>H</b> " + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
} else {

    switch (Day) { // format : "Mn" pour Monday
        case "Mn":
            var ContenueDiv1 = childL.innerHTML; // Je récupére le contenue de la Div actuel : "Mars, Lun 20"              
            childL.innerHTML = ContenueDiv1[0] + ContenueDiv1[1] + ContenueDiv1[2] + ContenueDiv1[3] + ContenueDiv1[4] + ContenueDiv1[5] + ContenueDiv1[6] + ContenueDiv1[7] + ContenueDiv1[8] + ContenueDiv1[9] + ContenueDiv1[10] + ContenueDiv1[11] + "<br/>" + DiffHour + "  <b>H</b> " + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>"; // je remet le contenue de la Div plus le résultat du nombre d'heure de la journée ce qui donne "Mardi - 7.5 Heure" par exemple
            break;
        case "Te":
            var ContenueDiv2 = childM.innerHTML;
            childM.innerHTML = ContenueDiv2[0] + ContenueDiv2[1] + ContenueDiv2[2] + ContenueDiv2[3] + ContenueDiv2[4] + ContenueDiv2[5] + ContenueDiv2[6] + ContenueDiv2[7] + ContenueDiv2[8] + ContenueDiv2[9] + ContenueDiv2[10] + ContenueDiv2[11] + "<br/>" + DiffHour + "  <b>H</b> " + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>"; //etc ...
            break;
        case "Wd":
            var ContenueDiv3 = childMe.innerHTML;
            childMe.innerHTML = ContenueDiv3[0] + ContenueDiv3[1] + ContenueDiv3[2] + ContenueDiv3[3] + ContenueDiv3[4] + ContenueDiv3[5] + ContenueDiv3[6] + ContenueDiv3[7] + ContenueDiv3[8] + ContenueDiv3[9] + ContenueDiv3[10] + ContenueDiv3[11] + "<br/>" + DiffHour + "  <b>H</b> " + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
            break;
        case "Tu":
            var ContenueDiv4 = childJ.innerHTML;
            childJ.innerHTML = ContenueDiv4[0] + ContenueDiv4[1] + ContenueDiv4[2] + ContenueDiv4[3] + ContenueDiv4[4] + ContenueDiv4[5] + ContenueDiv4[6] + ContenueDiv4[7] + ContenueDiv4[8] + ContenueDiv4[9] + ContenueDiv4[10] + ContenueDiv4[11] + "<br/>" + DiffHour + "  <b>H</b> " + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
            break;
        case "Fi":
            var ContenueDiv5 = childV.innerHTML;
            childV.innerHTML = ContenueDiv5[0] + ContenueDiv5[1] + ContenueDiv5[2] + ContenueDiv5[3] + ContenueDiv5[4] + ContenueDiv5[5] + ContenueDiv5[6] + ContenueDiv5[7] + ContenueDiv5[8] + ContenueDiv5[9] + ContenueDiv5[10] + ContenueDiv5[11] + "<br/>" + DiffHour + " <b>H</b>" + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
            break;
        case "St":
            var ContenueDiv6 = childS.innerHTML;
            childS.innerHTML = ContenueDiv6[0] + ContenueDiv6[1] + ContenueDiv6[2] + ContenueDiv6[3] + ContenueDiv6[4] + ContenueDiv6[5] + ContenueDiv6[6] + ContenueDiv6[7] + ContenueDiv6[8] + ContenueDiv6[9] + ContenueDiv6[10] + ContenueDiv6[11] + "<br/>" + DiffHour + " <b>H</b>" + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
            break;
        case "Sn":
            var ContenueDiv7 = childD.innerHTML;
            childD.innerHTML = ContenueDiv7[0] + ContenueDiv7[1] + ContenueDiv7[2] + ContenueDiv7[3] + ContenueDiv7[4] + ContenueDiv7[5] + ContenueDiv7[6] + ContenueDiv7[7] + ContenueDiv7[8] + ContenueDiv7[9] + ContenueDiv7[10] + ContenueDiv7[11] + "<br/>" + DiffHour + " <b>H </b>" + "<br/><b>Forfait </b>" + DiffHour + "<b>€ </b>" + "<br/><b>Ticket Restaurant</b> " + "<input type= checkbox>";
            break;
        default: alert("Erreur ! Vérifié les paramétres.");
    }
}
scheduler.callEvent("onViewChange", [this._mode, this._date]);
return DiffHour;

}

function hourDiff(hour1, hour2) { // format string “09:30”

    if (hour1 && hour2 != null) {
        if (hour2 == "00:00") { hour2 = "23:59"; }
        var premsplit = hour1.split(":");
        var deuxsplit = hour2.split(":");

        var convh1 = parseInt(premsplit[0]);
        var convm1 = parseInt(premsplit[1]);
        var convh2 = parseInt(deuxsplit[0]);
        var convm2 = parseInt(deuxsplit[1]);

        var convhour1 = convh1 * 60;
        var minhour1 = convm1;

        var convhour2 = convh2 * 60;
        var minhour2 = convm2;

        var SomminuteH1 = (convhour1 + minhour1);
        var SomminuteH2 = (convhour2 + minhour2);

        var resultDif = (SomminuteH2 - SomminuteH1) / 60;
        var arrondi = resultDif * 10;
        arrondi = Math.round(arrondi);
        arrondi = arrondi / 10;
    }
    return arrondi;

}

//#endregion[/code]

There is an event to “stay” the display ? After drag / open lightbox / create new event / …

Thanks !
Dargie

#2

Hello,

As I see in your code, you set additional information to the X-scale cell by innerHTML.
It’s not a good solution because after any changes this information dissapears. It’s connected with the Scheduler updates and your function writeHour can’t be called to redraw the Scheduler after each changes.

To solve it, you need to use week_scale_date template.
docs.dhtmlx.com/scheduler/week_ … lates.html

#3

Thanks you ! I am gonna to change that !

#4

Hi !

I have a problem with the date. I would like I have only the date and not the date with the time :
prntscr.com/fy040b

There is my code :

[code]//#Region recupererForfait

// renvoie forfait avec l'id correspondant a mon paramètre id

/*instruction si tableau vide se passe rien

si tableau pas vide,affiche coucou
si tableau pas vide mais se passe rien, ne rien afficher */

function recupererForfait(date) {

for (var i = 0; i < scheduler.forfaits.length; i++) { //parcourir tableau
    if (scheduler.forfaits[i].Date.getTime()== date.getTime())
        return scheduler.forfaits[i]; //envoie valeur si y a résultat
}
return null; //null si pas de résultat

}
//#EndRegion recuperer forfait

//#Region afficher en tête

// Fonction appelée pour définir le contenu d'une entête (donc à chaque rafraichissement du calendrier)
// Renvoi le texte à afficher dans l'entête du jour défini par "date"

scheduler.templates.week_scale_date = function (date) {

if (scheduler.forfaits.length == 0) {
    //retourne la date du jour
    return date;
}
else {
    //retourne les informations du forfait
    var forfait = recupererForfait(date);
    if (forfait == null) {
        return date;
    } else {
        return forfait.Date + "<br>" + forfait.Hours + " H" + "<br>" + "Forfait :" + forfait.Cout + "<br>" + "Ticket Restaurant " + "<input type= checkbox>";
    }
}

};[/code]

[code] // recupère l’évenement qui vient d’être crée
var eventObj = scheduler.getEvent(id);

if (eventObj) {
    // calculer nombre d'heure entre date début et date de fin
    var hour = eventObj.end_date - eventObj.start_date;   //operation to find number hours
    //Calcul le cout de l'évènement 
    var cout = 18 + 113; //operation to find the cost of forfait
    // Vérifier si l'utilisateur a coché 'ticket'
    var ticket = true; //operation to find if user have a ticket or not

    //Je récupère le jour / mois / année dans la date de départ de l'évènement
    var dd = eventObj.start_date.getDate();
    var mm = eventObj.start_date.getMonth();
    var yyyy = eventObj.start_date.getFullYear();

    // Je crée une nouvelle date avec les jours mois année récupérés
    var forfait_date = new Date(yyyy, mm, dd);
    // Je crée un forfait avcec les propriétés calculées précedemment
    var forfait = {
        Hours: hour,
        Ticket: ticket,
        Cout: cout,
        Date: forfait_date
    };[/code]

How I can display only the date ?

#5

Hi,

Please specify date format at week_scale_date template:
docs.dhtmlx.com/scheduler/week_ … lates.html