Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diagramme de Gantt</title>
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
    <style>
        .gantt_container {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="gantt_container" id="gantt_here"></div>
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script>
        // Initialisation du diagramme de Gantt
        gantt.config.drag_resize = true; // Activer le redimensionnement par glisser-déposer

gantt.init("gantt_here");

// Données initiales du diagramme de Gantt
        gantt.parse({
            data: [
                {id: 1, text: "Tâche 1", start_date: "2024-01-15", duration: 18},
                {id: 2, text: "Tâche 2", start_date: "2024-01-20", duration: 8},
                {id: 3, text: "Tâche 3", start_date: "2024-02-05", duration: 15}
            ],
            links: [
                {id: 1, source: 1, target: 2, type: "0"},
                {id: 2, source: 2, target: 3, type: "0"}
            ]
        });

// Ajouter des événements pour gérer le redimensionnement
        gantt.attachEvent("onTaskDrag", function(id, mode, task, original) {
            console.log("Tâche redimensionnée : ", task);
        });
    </script>
</body>
</html>