Bonjour,

Je viens vers vous car je suis sur un problème que je n'arrive pas résoudre, je dois faire une fonctionnalité d'un formulaire pour réserver des plage d'horaire sur calendrier.

j'arrive à envoyer mes donnée du formulaire sur la base de donnée, mais ses données ne veulent pas aller sur mon calendrier.

savez vous comment je peut m'y prendre?

Merci bien

Bonjour,

>> mais ses données ne veulent pas aller sur mon calendrier.

Une bonne fessée aux données, elles se placeront peut être correctement. 

Sérieusement sans plus d'information sur votre projet difficile de répondre et de se rendre compte de la problématique sans pouvoir reproduire le problème.

Peut être que https://fullcalendar.io/ serait une solution?

-
Edité par AbcAbc6 16 mai 2024 à 4:58:20

Bonjour le projet ses de faire un calendrier de réservation en rentrant les infos dans un formulaire, que sa bloque l'heure et le jour dans le calendrier.

Javascript

document.addEventListener("DOMContentLoaded", function() {
    // Écouteur d'événement pour soumettre le formulaire de réservation
    document.getElementById("reservation-form").addEventListener("submit", function(event) {
        event.preventDefault(); // Empêche l'envoi du formulaire par défaut

        // Récupérer les données du formulaire
        var formData = new FormData(this);

        // Envoyer les données du formulaire au serveur via AJAX
        fetch("reservations.php", {
            method: "POST",
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("Une erreur s'est produite lors de la réservation.");
            }
            return response.text();
        })
        .then(data => {
            alert(data); // Afficher un message de confirmation
            this.reset(); // Réinitialiser le formulaire
            fetchReservations(); // Mettre à jour l'affichage des rendez-vous réservés
        })
        .catch(error => {
            console.error("Erreur:", error);
            alert("Une erreur s'est produite lors de la réservation.");
        });
    });

    // Fonction pour récupérer et afficher les rendez-vous réservés
    function fetchReservations() {
        fetch("reservations.php")
        .then(response => {
            if (!response.ok) {
                throw new Error("Une erreur s'est produite lors de la récupération des rendez-vous réservés.");
            }
            return response.text();
        })
        .then(data => {
            document.getElementById("reservation-list").innerHTML = data; // Mettre à jour l'affichage des rendez-vous réservés
        })
        .catch(error => {
            console.error("Erreur:", error);
            alert("Une erreur s'est produite lors de la récupération des rendez-vous réservés.");
        });
    }

    // Appel initial pour afficher les rendez-vous réservés
    fetchReservations();
});

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new FullCalendar.Calendar(calendarEl, {
      // Configuration du calendrier
      initialView: 'dayGridMonth',
     
    });
  
    calendar.render();
  });
  
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new FullCalendar.Calendar(calendarEl, {
      // Configuration du calendrier
      initialView: 'dayGridMonth',
      // Méthode pour récupérer les événements depuis votre serveur
      events: 'get_reservations.php' // URL de votre script PHP pour récupérer les réservations
      
    });
  
    calendar.render();
  });
  

réservation

<?php
// Connexion à la base de données (à adapter selon votre configuration)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "calendrier_test";

$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier la connexion
if ($conn->connect_error) {
    die("Erreur de connexion à la base de données : " . $conn->connect_error);
}

// Vérifier si le formulaire de réservation a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Récupérer les données du formulaire
    $service = $_POST['service'];
    $date = $_POST['date'];
    $time = $_POST['time'];
    $name = $_POST['name'];
    $email = $_POST['email'];

    // Insérer les données dans la base de données
    $sql = "INSERT INTO reservations (service, date, time, name, email)
            VALUES ('$service', '$date', '$time', '$name', '$email')";

    if ($conn->query($sql) === TRUE) {
        echo "Réservation enregistrée avec succès";
    } else {
        echo "Erreur lors de l'enregistrement de la réservation : " . $conn->error;
    }

    $sql = "SELECT id FROM reservations";
    $result = $conn->query($sql);
}


// Afficher les rendez-vous réservés
$sql = "SELECT * FROM reservations";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<h3>Rendez-vous réservés</h3>";
    while($row = $result->fetch_assoc()) {
        echo "Service: " . $row["service"]. " - Date: " . $row["date"]. " " . $row["time"]. " - Nom: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
    }
} else {
    echo "Aucun rendez-vous réservé";
}

// Fermer la connexion à la base de données
$conn->close();

?>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Réservation</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
</head>
<body>
<div id="calendar"></div>

    <div class="container">
        <h2>Réservation</h2>
        
        <!-- Formulaire de réservation -->
        <form id="reservation-form">
            <label for="service">Service :</label>
            <select id="service" name="service">
                <option value="Service 1">Service 1</option>
                <option value="Service 2">Service 2</option>
                <!-- Ajoutez d'autres options de service ici  -->
            </select><br>
            <label for="date">Date :</label>
            <input type="date" id="date" name="date" required><br>
            <label for="time">Heure :</label>
            <input type="time" id="time" name="time" required><br>
            <label for="name">Nom :</label>
            <input type="text" id="name" name="name" required><br>
            <label for="email">Email :</label>
            <input type="email" id="email" name="email" required><br>
            <input type="hidden" name="raison">
            <button type="submit">Réserver</button>
        </form>
        
        <!-- Affichage des rendez-vous réservés -->
        <div id="reservation-list">
            <h3>Rendez-vous réservés</h3>
            <!-- Les rendez-vous réservés seront affichés ici -->
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

pourquoi il y a plusieurs envetlistener sur DCOMContentLoaded ?

Qu'est-ce que tu as comme résultat ? affichage html et console js ?