probléme de date (stage) par JonathanPruvost - page 1

hello les zéro,

j'ai un problème et je m’arrache les cheveux je ne trouve des information nul part !!

je suis actuellemtn en stage et je dois coder une application de gestion de tache mon probléme etant que je ne trouve presque pas d'info sur un genre de planning en js et je cherche tous les jours pendant des heures ! en gros mon app doit gérer des ressources en fonction des jour. le probléme etant que je n'arrive même pas a faire defiller les semaines ! et de plus je ne sais pas du tout comment gérer le back-end donc pour le front je suis encore ++ perdu. je vous laisse mon code si vous pouvez me donner un coup de main . je suis preneur de tous les conseil code simplifié ect .. a oui j’oublié de vous parler egalement de la gestion des jours dans le mois evidemment in ne faut pas quel depasse le nombre de jour dans le mois

mon code :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/0c284509d8.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">

    <title>Pope</title>

</head>

<body>

    <div>
        <div class="navbar bg-dark">
            <div class="d-flex col-12">
                <div class="mr-3">
                    <a href="#" id="semaine-"><i class="fas fa-chevron-left"></i></a>
                </div>
                <div>
                    <p id="mois"></p>
                </div>
                <div>
                    <p id="semaine"></p>
                </div>
                <div class="ml-3">
                    <a href="#" id="semaine+"><i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
        </div>

        <div class="conteneur1 row m-0">
            <input class="form-control col-1 p-0" type="search" placeholder="Search" aria-label="Search">
            <table class="col-11 text-center dateTitre">
                <td class="date border font-weight-bold col-1">jour 1</td>
                <td class="date border font-weight-bold col-1">jour 2</td>
                <td class="date border font-weight-bold col-1">jour 3</td>
                <td class="date border font-weight-bold col-1">jour 4</td>
                <td class="date border font-weight-bold col-1">jour 5</td>
                <td class="date border font-weight-bold col-1">jour 6</td>
                <td class="date border font-weight-bold col-1">jour 7</td>
            </table>
        </div>
        <div class="resource text-center col-12 pr-0 row m-0 p-0">

        </div>

        <div class="text-center border col-1">
            <button id="add" class="btn btn-primary col-12 p-0 mt-3" type="button">+</button>
            <p>Nouvelle Resource</p>
        </div>

        <div id="modal-bg">
            <div id="form" class="model-content offset-4 col-4">
                <div class="text-center">
                    <img src="https://picsum.photos/400/400" id="avatar" alt="">
                </div>
                <h1 id="modal-title">Ajouter une nouvelle Resource !</h1>
                <div class="form-group">
                    <label class="col-3" for="nom">Nom : </label><input class="col-9" type="text" id="nom"
                        placeholder="Nom"><br>
                </div>
                <div class="form-group">
                    <label class="col-3" for="prenom">Prenom : </label><input class="col-9" type="text" id="prenom"
                        placeholder="prenom"><br>
                </div>
                <div class="form-group">
                    <label class="col-3" for="email">Email : </label><input class="col-9" type="email" id="email"
                        placeholder="email"><br>
                </div>

                <div class="form-group row">
                    <label for="avatar" class="col-3 pt-2 pb-2">avatar: </label>

                    <a class="nav-link dropdown-toggle border bg-primary text-light" href="#" id="drop" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        avatar
                    </a>

                    <div class="dropdown-menu text-center" id="drop">
                        <a class="dropdown-item" selected><img src="image/homme.svg" alt="avatar homme"></a>
                        <a class="dropdown-item"><img src="image/femme.svg" alt="femme"></a>
                        <a class="dropdown-item"><img src="image/chantier.svg" alt="chantier"></a>
                        <a class="dropdown-item"><img src="image/livreur.svg" alt="livreur"></a>
                    </div>
                </div>
                <p style="color:red" id="erreur"></p>
                <div class="row justify-content-end">
                    <button id="annule" class="btn btn-danger mr-2">Annuler</button>
                    <button id="save" class="btn btn-success">Save</button>
                </div>
            </div>
        </div>

        <!-- <div id="select-année" class="modal d-flex justify-content-center align-items-center" tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-primary text-center w-100">Bienvenue sur Pope</h5>
                    </div>
                    <div class="modal-body">
                        <p>quel format de date voulez vous utilisez ?<br>
                            <span class="text-danger font-weight-bold">attention ce choix est definitif</span>
                        </p>
                        <select class="w-100 text-center" name="date" id="selectTemps">
                            <option value="">--choisir une option--</option>
                            <option value="Journée"> a la journée</option>
                            <option value="Semaine"> a la semaine</option>
                             <option value="Quinzaine">Quinzaine</option>
                            <option value="Mois"> au mois</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button id="confirm" type="button" class="btn btn-primary">Confirmer</button>
                    </div>
                </div>
            </div> -->
        </div>

        <button class="btn btn-primary mt-3" id="design">changer de design</button>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
        <script src="js/main.js"></script>
</body>

</html>

var add = document.getElementById("add");
var form = document.getElementById("form");
var save = document.getElementById("save");
var modalBg = document.getElementById("modal-bg");
var annule = document.getElementById("annule");
var select = document.getElementById("drop");

var resource = document.getElementsByClassName("resource")[0];

var nom = document.getElementById("nom");
var prenom = document.getElementById("prenom");
var email = document.getElementById("email");

var id = document.getElementById("design");
var selectFormat = document.getElementById("select-année");
var selectTemps = document.getElementById("selectTemps");
var confirm = document.getElementById("confirm");

var semaineplus = document.getElementById("semaine+");

var drop = document.getElementsByClassName("dropdown-item");
for (var i = 0; i < drop.length; i++) {
    drop[i].addEventListener("click", ajouteAvatar);
}

function show() {
    form.style.display = "flex";
    modalBg.style.backgroundColor = "gray";
    modalBg.style.position = "absolute"
    add.style.display = "none";
    modalBg.style.position = "fixed";
}

function saveform() {
    if (!nom.value || !prenom.value || !email.value) {
        alert("veuillez renseignez tous les champs");
    } else {
        createResource();
        createTable();
        hide();
    }
}

function hide() {
    form.style.display = "none";
    modalBg.style.backgroundColor = "transparent";
    modalBg.style.opacity = "1";
    add.style.display = "block";
    modalBg.style.position = "static";
    nom.value = "";
    prenom.value = "";
    email.value = "";
}

function datejournée() {
    var date = document.getElementsByClassName("date");
    dateL = date.length;
    var c = 0;
    var j = 0;
    for (var i = 0; i < dateL; i++) {
        if (c <= 6) {
            date[i].textContent = affichejour(c, i, j);
        } else {
            c = -1;
            date[i].textContent = affichejour(c, i, j);
        }
        c++
    }
}

function dateMois(){
    var date = document.getElementsByClassName("date");

    for (var i = 0; i < dateL; i++) {
        date[i].textContent = mois;
        mois += 1;
    }
}

function affichejour(c, i, j) {
    var tab = ["Lun", "Mar", "Mer", "Jeu", "Vend", "Sam", "Dim"];

    /**
    //!d = new Date(); 
    //!d.getDate(); : Renvoie le jour du mois (1-31);
    //!d.getDay(); : Renvoie le jour de la semaine (0-6);
    //!getMonth(); : Renvoie le mois (0-11);
    //!d.getFullYear(); : Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres)
    */

    var a = new Date();
    a.setDate(a.getDate() + j);
    var soustraction = a.getDay() - 1;
    var dM = (a.getDate() - soustraction) + i;
    var dS = 0 + c;

    if (dM < 10) {
        dM = "0" + (a.getDate() + i);
    } else if (dM > 10) {
        dM = (a.getDate() - soustraction) + i;
    }

    dS = tab[dS];

    if ((a.getMonth() + 1) < 10) {
        var mois = "0" + (a.getMonth() + 1);
    } else {
        var mois = a.getMonth() + 1;
    }
    var annee = a.getFullYear();
    moisCalcul = mois - 1;
    return (dS + dM + "-" + mois + "-" + annee);

}

function createTable() {
    var divTab = document.createElement("div");
    var newTable = document.createElement("table");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
    var td5 = document.createElement("td");
    var td6 = document.createElement("td");
    var td7 = document.createElement("td");



    newTable.classList.add("col-12");

    divTab.classList.add("col-11", "p-0")
    newTable.appendChild(td1);
    newTable.appendChild(td2);
    newTable.appendChild(td3);
    newTable.appendChild(td4);
    newTable.appendChild(td5);
    newTable.appendChild(td6);
    newTable.appendChild(td7);

    td1.style.height = "157px"
    td2.style.height = "157px"
    td3.style.height = "157px"
    td4.style.height = "157px"
    td5.style.height = "157px"
    td6.style.height = "157px"
    td7.style.height = "157px"

    td1.classList.add("border", "td", "col-1");
    td2.classList.add("border", "td", "col-1");
    td3.classList.add("border", "td", "col-1");
    td4.classList.add("border", "td", "col-1");
    td5.classList.add("border", "td", "col-1");
    td6.classList.add("border", "td", "col-1");
    td7.classList.add("border", "td", "col-1");


    divTab.appendChild(newTable);
    resource.appendChild(divTab);
}

function ajouteAvatar(e) {
    var avatar = document.getElementById("avatar");
    var src = e.target.src;
    avatar.setAttribute("src", src);
}

function createResource() {
    var newDiv = document.createElement("div");
    var newimg = document.createElement("img");
    var newP = document.createElement("p");
    var src = document.getElementById("avatar").getAttribute("src");
    newDiv.classList.add("resource", "border", "col-1", "p-0");
    newimg.setAttribute("src", src);
    newimg.classList.add("mt-3");
    newP.innerHTML = nom.value + "<br>" + prenom.value;
    resource.appendChild(newDiv);
    newDiv.appendChild(newimg);
    newDiv.appendChild(newP);
}

function colorDate() {
    var a = new Date();
    var b = (a.getDay() - 1);
    var date1 = document.getElementsByClassName("date")[b];
    date1.style.backgroundColor = "#99ccff";
}

function afficheMois() {
    var tab = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"]

    var a = new Date();
    var am = a.getMonth();
    var an = a.getFullYear();
    var mois = tab[am] + " " + an;

    document.getElementById("mois").innerHTML = mois;
}

function NonbredMMois(mois, annee) {
    var nbredM = 0;

    if (mois <= 6) {
        if (mois % 2 == 0) {
            nbredM = 31;
        } else {
            nbredM = 30;
        }
    } else {
        if (mois % 2 == 1) {
            nbredM = 30;
        } else {
            nbredM = 31;
        }
    }
    if (mois == 1) {
        if (annee % 4 == 0) {
            if (annee % 100 == 0) {
                if (annee % 400 == 0) {
                    nbredM = 29;
                } else {
                    nbredM = 28;
                }

            } else {
                nbredM = 29;
            }
        } else {
            nbredM = 28;
        }

    }

    return nbredM;

}

function getWeekNumber(date) {
    
        var d = new Date();
		var DoW = d.getDay(date);
		d.setDate(d.getDate() - (DoW + 6) % 7 + 3); // Nearest Thu
		var ms = d.valueOf(); // GMT
		d.setMonth(0);
		d.setDate(4); // Thu in Week 1
		return Math.round((ms - d.valueOf()) / (7 * 864e5)) + 1;
}



add.addEventListener("click", show);
save.addEventListener("click", saveform);
annule.addEventListener("click", hide);
document.addEventListener("DOMContentLoaded", datejournée);

document.addEventListener("DOMContentLoaded", colorDate);
document.addEventListener("DOMContentLoaded", afficheMois);
// document.addEventListener("DOMContentLoaded", function () {
//     selectFormat.style.display = "block";
// });
// confirm.addEventListener("click", function () {
//     if (selectTemps.value == "dMnée") {
//         datedMnée();
//     } else if (selectTemps.value == "Semaine") {
//         dateSemaine();
//     } else if (selectTemps.value == "Mois") {
//         dateMois();
//     }
// });

* {
    font-family: 'Ubuntu Mono', 'monospace';
}
#form {
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    display: none;
}

#form>div {
    margin: 0.8em;
}

#form>div>label {
    color: white;
    font-weight: bold;
}

#modal-title {
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    color: white;
}

.resource img {
    border-radius: 100%;
    width: 75px;
    height: 75px;
}

#modal-bg {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

td {
    height: 38px;
}

.dateTitre {
    font-size: 10px;
    color: gray;
}

.dropdown-menu > a > img {
    width: 50px !important;
    height: 50px !important;
}

#avatar {
    width:400px;
    height: 400px;
}

#mois{
    color: white;
    font-weight: bold;
}

td {
    padding: 0 !important;
}

fullcallendar est open source et gratuit (il y a un plugin payant mais ce n'est pas indispensable).

Toutes les questions que tu te pose, c'est les questions normales quand tu développe une application. Les réponses ne sont pas "normalisées" ça vas dépendre de ton environnement, de ce que tu veux mettre en place, des libs que tu vas ou non utiliser, ...

Par exemple, une db nosql ne vas pas marcher de la même façon qu'une db sql, et tu pourrais partir sur une db graph qui est encore différente.

Le mieux, pour commencer un projet, c'est de créer un environnement dans lequel tu est à l'aise (ou de t’approprier l’environnement existant) et de lister tout ce que tu dois faire (qu'es-ce que tu veux afficher dans ton client, de quoi tu vas avoir besoin côté serveur, comment vas-tu récupérer / envoyer ces données, comment vont-elles être stockées), ensuite tu peux regarder si il n'y a pas quelques libs sympa qui pourraient faire le travail. Pourquoi utiliser des libs : parce que ça te permet de développer plus rapidement, normalement ça marche bien (si tu tente de faire des choses bizarres tu pourrais dénicher un bug, on ne sais jamais), et dans le cas d'un stage tu ne feras jamais mieux. Pour fullcalendar on parle de plusieurs devs qui bossent depuis plusieurs années sur ce projet. Pour chaque lib que tu vas utiliser, lis toute la doc et regarde tous les exemples, ensuite fais quelques tests pour voir comment ça marche.

JonathanPruvost

19 juin 2019 à 17:00:17

piero5673

19 juin 2019 à 17:22:09

Bonjour,

Pas de problème lors de la sélection des éléments (lignes 1 à 21) ? Pas d'erreurs dans la console ? As-tu pensé à utiliser une librairie pour faire le calendrier ? https://fullcalendar.io/

19 juin 2019 à 17:42:14

bonjour non aucune erreur dans la console.

je vais regarder du coté de cette librairie jéspére qu'il ont une bonne documentation merci pour ton aide

Edit : regarde le resultat de mon debut de projet la librairie me semble inadapté pour cela.

-
Edité par JonathanPruvost 19 juin 2019 à 17:43:43

19 juin 2019 à 18:03:31

Si tu veux mettre un exemple utilise plutôt jsfiddle ou codepen. Si tes sélecteurs marchent, les listeners ajoutés lignes 253 à 256 ne sont jamais exécutés (l'évènement ne survient qu'une fois et il est déjà finis).

Perso je ne vois pas où est le problème avec fullcalendar. Tu as une vue par semaine, tu peux modifier le dom d'un évent, tu peux ajouter des évents à la violée.

19 juin 2019 à 19:05:27

https://codepen.io/saw62/pen/qzqXrp

voila ou j'en suis j'aimerais avoir seuleument la posibilité de changer les dates sur le dessus et non pas dans la disposition de la librairie possible pour toi ? j'aimerais pouvoir

- changer de semaine

afficher au mois, a la quinzaine, a la semaine, a la journée

tous en pouvant creer des ressources tu comprends ce que je veux dire ?

20 juin 2019 à 13:25:00

Ce que je comprends c'est que tu veux créer un agenda. Ce que tu veux faire c'est exactement ce que fait fullcalendar (regarde bien la doc et les demos). Si tu ne veux pas utiliser de libs, pas de problème, mais c'est à toi de la réinventer, c'est à toi de répondre aux questions que tu pose : qu'es-ce qu'il se passe si un utilisateur clique sur un jour ? comment es-ce qu'on vas changer de vue ? un bouton ? qu'es-ce qu'il se passe dans ce cas ? quelles parties du DOM vont changer ? es-ce que je dois appeler mon serveur pour charger des infos ? Comment créer un nouvel item dans l'agenda ? ... Bref, beaucoup de travail en perspective.

https://fullcalendar.io/docs/Calendar-changeView

https://fullcalendar.io/docs/header

https://fullcalendar.io/docs/customButtons

https://fullcalendar.io/docs/Calendar-addEventSource

https://fullcalendar.io/docs/eventRender

20 juin 2019 à 14:23:15

je veux creer une gestion de projet. ce qui me derange c'est le format du calendrier j'aimerais avoir les date en haut. dans le format "Lun.17.06.2019" et ainsi de suite puis pouvoir changer la semaine. Mais je ne vois pas du tout comment ca change au niveau des vues et ce que je supprime ce qu'il y a dans le dom pour mettre des nouvelle info ? comment enregistrer ceci en base de donnée ? je suis totalement perdu je vais me pencher sur ta documentation .

Edit : Est surtout ! est ce que j'ai le droit de l'utiliser gratuitement pour un site web ??

-
Edité par JonathanPruvost 20 juin 2019 à 14:26:14

20 juin 2019 à 14:53:44

20 juin 2019 à 19:09:45

merci du temps que tu me consacre en tout cas, ca me redonne espoir je vais me concentré et essayer de devlopper avec cette lib je reviens vers toi si j'ai un probléme acev cette lib ? tu as l'air de bien t'y connaitre ^^.

22 juin 2019 à 8:19:18

La doc est ton amie : https://fullcalendar.io/docs#toc si tu as des problèmes d'utilisation, regarde bien les exemples, et si tu as toujours des problèmes le forum reste ouvert

probléme de date (stage)

probléme de date (stage)

Supprimer

Modérer

Signaler le message aux modérateurs