Evènement Calendrier

Bien le bonjour ! Je vous met dans le contexte. J'ai commencé à programmer un Calendrier pour ajouter des évènements. Plus précisément un calendrier de match. Je veux mettre tus les matchs de la saison qui auront lieu de chaque équipe avec affrontement, la date ou, l'heure du début et l'heure de la fin. Donc voilà j'ai réussir à faire à peut près ce que je voulais quand j'ajoute un évènement il se met à la date comme je veux mais dès que j'ajoute un 2eme évènement à la même date plus aucun n'apparait j'ai chercher longtemps sur le net et même demandé un ChatGPT ahah et je n'est pas eu de réponse concrète donc voilà je vous donne tous le code pour que vous comprenez mieux de ce que j'ai fais !

dbconnection.php

<?php
   mysqli_report(MYSQLI_REPORT_STRICT); // To force PHP to throw exception if errors

   // Connection to MySQL database, sets $con to null (or die()) if problem connecting
   try {
      $con = mysqli_connect("localhost", "root", "", "lnh"); //database credentials
   }
   catch (Exception $e) {
      $con = null; //this can be replaced by die()
   }

   ajax.php

<?php
   require_once "dbconnection.php";
   require_once 'calendar.php';

   $m = date("m",time());
   $y = date("Y",time());
   if (! empty ( $_POST ['month'] )) {
      $m = $_POST ['month'];
   }
   if (! empty ( $_POST ['year'] )) {
      $y = $_POST ['year'];
   }
   echo getCalendar($con,$m,$y);

calendar.php

<?php
require_once "dbconnection.php";

function getCalendar($connection, $m, $y) {
   $calendarHTML = $errorHTML = ''; //variable to contain calendar output (and error messages if any)
   $weekDayNumber = array(
      6,
      0,
      1,
      2,
      3,
      4,
      5
   ); //week day numbers, 0: Monday, 6: Sunday
   $monthNames = array(
      'Janvier',
      'Février',
      'Mars',
      'Avril',
      'Mai',
      'Juin',
      'Juillet',
      'Août',
      'Septembre',
      'Octobre',
      'Novembre',
      'Décembre'
   );
   $dayNames = array(
      'Lundi',
      'Mardi',
      'Mercredi',
      'Jeudi',
      'Vendredi',
      'Samedi',
      'Dimanche'
   );
   $eventsArray = array(); //array of events
   $eventTopic = '';
   $eventDate = '';
   $eventStreetNumber = '';
   $eventStreetName = '';
   $eventPostalCode = '';
   $eventLocality = '';
   $eventStartTime = '';
   $eventEndTime = '';

   $modalHTMLarray = array();

   //calculate next/previous month/year based on the given parameters
   $prevMonth = $m - 1;
   $prevYear = $nextYear = $y;
   $nextMonth = $m + 1;
   if ($m - 1 == 0) {
      $prevMonth = 12;
      $prevYear = $y - 1;
   }
   if ($m + 1 == 13) {
      $nextMonth = 1;
      $nextYear = $y + 1;
   }

   $t = mktime(12, 0, 0, $m, 1, $y); // Timestamp of 1st day of the month in the given year
   
   //build calendar
   $calendarHTML .= '<table id="calendar"><tbody>';

   //build calendar header (month+year and navigation buttons)
   $calendarHTML .= '<tr class="calendar-nav">';
   $calendarHTML .= '<td class="prev" data-prev-month="' . $prevMonth . '" data-prev-year="' . $prevYear . '" colspan="1">&lt;</td>';
   $calendarHTML .= '<td colspan="5" style="font-size: 24px">' . $monthNames[$m - 1] . ' ' . $y . '</td>';
   $calendarHTML .= '<td class="next" data-next-month="' . $nextMonth . '" data-next-year="' . $nextYear . '" colspan="1">&gt;</td></tr>';

   //build day names
   $calendarHTML .= '<tr class="calendar-day-names-header">';
   for ($i = 0;$i < 7;$i++) {
      $calendarHTML .= '<td>' . $dayNames[$i] . '</td>';
   }
   $calendarHTML .= '</tr>';

   //build days of the month (cells)
   for ($i = 0;$i < 6;$i++) { //calendar in 6 rows
      $calendarHTML .= '<tr class="calendar-days">';
      for ($j = 0;$j < 7;$j++) //calendar in 7 columns
      {
         $w = $weekDayNumber[(int)date('w', $t) ]; //get numeric representation of the day from the timestamp, then use the number as index of the $weekDayNumber array to get the right day number
         $m2 = (int)date('n', $t); //get numeric representation of the month from the timestamp, without leading zeros
         if (($w == $j) && ($m2 == $m)) { //if day number falls within the given month
            $d = date('d', $t); //get day of the month (01 to 31)
            $calendarHTML .= '<td';

            $tdClasses = array(); //array of classes used to contain nothing or "today" or "event" or "today+event"
            if ($d == date("d", time()) && $m == date("m", time()) && $y == date("Y", time())) { //if date in the calendar matches current date, add class to $tdClasses array
               array_push($tdClasses, "today");
            }

            //if there is connection to the DB, build calendar, otherwise display error
            if ($connection != null) {
               $eventSql = "SELECT * FROM event WHERE YEAR(date) = ? AND MONTH(date) = ? AND DAY(date) = ?"; //SQL query to select event details from given day, month and year
               if ($stmt = mysqli_prepare($connection, $eventSql)) {
                  mysqli_stmt_bind_param($stmt, "iii", $y, $m, $d);
                  if (mysqli_stmt_execute($stmt)) {
                     mysqli_stmt_store_result($stmt);
                     if (mysqli_stmt_num_rows($stmt) == 1) { //if event record found
                        $eventDetailsArray = array();
                        array_push($tdClasses, "eventday"); //add class to $tdClasses array
                        mysqli_stmt_bind_result($stmt, $eventId, $eventTopic, $eventDate, $eventStreetNumber, $eventStreetName, $eventPostalCode, $eventLocality, $eventStartTime, $eventEndTime);

                        mysqli_stmt_fetch($stmt);

                        array_push($eventDetailsArray, $eventId, $eventTopic, $eventDate, $eventStreetNumber, $eventStreetName, $eventPostalCode, $eventLocality, $eventStartTime, $eventEndTime); // Populez $eventDetailsArray
                        $eventsArray[] = $eventDetailsArray; // Ajoutez l'array d'événement actuel au tableau d'événements
                        
                     }
                  }
                  else {
                     $errorHTML = "<div class=\"alert alert-danger role=\"alert\">Cannot retrieve event details from database, please contact administrator!</div>";
                  }
                  mysqli_stmt_free_result($stmt);
                  mysqli_stmt_close($stmt);
               }
               else {
                  $errorHTML = "<div class=\"alert alert-danger role=\"alert\">Cannot retrieve event details from database, error in SQL query, please contact administrator!</div>";
               }
            }
            else {
               $errorHTML = "<div class=\"alert alert-danger role=\"alert\">Cannot retrieve event details from database, please contact administrator!</div>";
            }

            //continue building calendar cell with class names
            // ...

            //continue building calendar cell with class names
            if (count($tdClasses) > 0) {
               $calendarHTML .= ' class="';
               for ($k = 0; $k < count($tdClasses); $k++) {
                  $calendarHTML .= $tdClasses[$k] . ' ';
               }
               $calendarHTML = rtrim($calendarHTML);
               $calendarHTML .= '"';
            }

            // Insert event topic if there's an event on this day
            if (in_array("eventday", $tdClasses) && !empty($eventTopic)) {
               $calendarHTML .= ' data-toggle="modal" data-target="#eventModal-' . $eventId . '"><span class="event-topic">' . $eventTopic . '</span>';
            } else {
               $calendarHTML .= '>' . date('j', $t);
            }

            $calendarHTML .= '</td>'; //end cell
            $t += 86400; //move to the next day
         }
         else {
            $calendarHTML .= '<td class="emptyday">&nbsp;</td>'; //build an empty cell
            
         }
      }
      $calendarHTML .= '</tr>';
   }
   $calendarHTML .= '</tbody></table>'; //end build calendar
   
   //build modal dialog to display event details when user clicks on a calendar cell with an event attached
   foreach ($eventsArray as $ea) {
      $addressString = $ea[3] . ', ' . $ea[4] . ', ' . $ea[6] . ' ' . $ea[5];
      $addressString = utf8_encode($addressString);

?>
<div class="modal fade" id="eventModal-<?= $ea[0]; ?>" tabindex="-1" role="dialog" aria-labelledby="modelLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Game</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6">
                        <img style="height:300px;" src="../../images/CvsB.png" alt="Aucune Image Trouvée" />
                    </div>
                    <div class="col-lg-6">
                        <h2>Affrontement</h2>
                        <p><?= $ea[1]; ?></p>
                        <hr>
                        <h2>Endroit</h2>
                        <p><?= $addressString; ?></p>
                        <hr>
                        <h2>Heure</h2>
                        <p><?= date('h:i A', strtotime($ea[7])); ?> - <?= date('h:i A', strtotime($ea[8])); ?> </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
   } 

   //add all modals to calendar output
   foreach ($modalHTMLarray as $mm) {
      $calendarHTML .= $mm;
   }
   //append any error message to calendar output
   $calendarHTML .= $errorHTML;
   return $calendarHTML;
}

calendar.js 

$(document).ready(function() {
   
   //attach click event on previous and next month buttons
   $(document).on("click", '.prev', function(event) { 
      var month = $(this).data("prev-month");
      var year = $(this).data("prev-year");
      getCalendar(month,year);
   });
   $(document).on("click", '.next', function(event) { 
      var month = $(this).data("next-month");
      var year = $(this).data("next-year");
      getCalendar(month,year);
   });
});

//ajax call to update the calendar
function getCalendar(month,year){
   $.ajax({
      url: "includes/game/ajax.php",
      type: "POST",
      data:'month='+month+'&year='+year,
      complete: function(data){
         $("#calendar-output").html(data.responseText);
      },
      error: function(xhr,status,error){
         //handle ajax error here
      }
   });
}

index.php 

<?php
    require_once "includes/config/config.php";
    require_once "includes/game/calendar.php";

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LNH Information</title>
    <link rel="shortcut icon" href="includes/images/LNH.SVG" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="includes/css/style.css">
    <link rel="stylesheet" href="includes/css/calendar.css">
</head>

<body>

    <!--- PHP Section -->
    <div id="loader" class="loader"></div>
    <div id="content" class="hidden">

        <header>
            <a href="#">Accueil</a>
            <a href="#">Page</a>
            <a href="#">Page</a>
            <a href="#">Page</a>
            <a href="#">Page</a>
            <a href="#">Page</a>
            <a href="#">Page</a>
        </header>
        <div class="main-content">
            <main>
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div id="calendar-output">
                                <?php
                                    echo getCalendar($con,date("m",time()),date("Y",time()));
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <footer>
            &copy; 2023 Hockey LNH information
        </footer>
    </div>

    <!--  Script Files -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>
    <script src="includes/js/calendar.js"></script>
    <script src="includes/js/script.js"></script>
</body>

</html>

Donc voilà je répète que j'aimerais pouvoir ajouter plus d'un évènement à la même date. Merci beaucoup d'avance à s'eux qui m'aiderons à réglé mon problème

--DevRevoltium