Untitled

<?php
// Remplacez ces informations par les détails de votre base de données
$serveur = "localhost";
$utilisateur = "root";
$motDePasse = "";
$baseDeDonnees = "formation";

// Établir la connexion
try {
    $database = new PDO("mysql:host=$serveur;dbname=$baseDeDonnees", $utilisateur, $motDePasse);
    $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("La connexion à la base de données a échoué : " . $e->getMessage());
}

// Fonction pour obtenir les sessions de cours de la base de données
function getSessions($database) {
    $query = "SELECT sessionc.IDCO, sessionc.IDF, sessionc.datedS, sessionc.datefS, cours.titreCO, formateur.nomF, formateur.prenomF
              FROM sessionc
              INNER JOIN cours ON sessionc.IDCO= cours.IDCO
              INNER JOIN formateur ON sessionc.IDF = formateur.IDF";
    
    $stmt = $database->prepare($query);
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

$sessions = getSessions($database);

// Fermer la connexion
$database = null;
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendrier des Sessions de Cours</title>

    <!-- FullCalendar CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
    <!-- Qtip2 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" />
    <link rel="stylesheet" href="yugy.css" />

    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
        
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<center><h2>Calendrier des Sessions de Cours</h2></center>
<div id="calendar"></div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- FullCalendar JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<!-- Qtip2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var sessions = <?php echo json_encode($sessions); ?>;

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: sessions.map(function(session) {
                return {
                    title: session['titreCO'] + ' - Formateur: ' + session['nomF'] + ' ' + session['prenomF'],
                    start: session['datedS'],
                    end: session['datefS'],
                    allDay: true,
                    description: 'Début : ' + session['datedS'] + '<br>Fin : ' + session['datefS']
                };
            }),
            eventRender: function(event, element) {
                element.qtip({
                    content: {
                        title: event.title,
                        text: event.description
                    },
                    style: {
                        classes: 'qtip-bootstrap'
                    },
                    position: {
                        my: 'bottom center',
                        at: 'top center',
                        target: 'mouse',
                        adjust: {
                            mouse: false
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>
Editor is loading...