planning alert avec description

planning.php

@@ -98,7 +98,7 @@ if(isset($_GET['planning']) AND !empty(['planning']))
                     $req1->execute(array($planning));
                     while($r1 = $req1->fetch()) {
                         ?>
-                            <div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
+                            <div class="class" data-description="<?=$r1['description']?>" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
                                 <?= $r1['title'] ?>
                             </div>
                         <?php
@@ -210,6 +210,25 @@ if(isset($_GET['planning']) AND !empty(['planning']))
 
         </div>
 
+        <!-- needed for showing custom alert -->
+        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+        <script>
+
+            const pln_cases = document.getElementsByClassName("class");
+            for (let i = 0; i < pln_cases.length; i++) {
+                let current = pln_cases[i];
+
+                current.addEventListener("click", (e) => {
+                    Swal.fire({
+                        title: '<strong id="modal-title">' + current.innerHTML.trim() + '</strong>',
+                        html: current.dataset.description
+                    })
+                })
+            }
+
+        </script>
+
     <?php } else { ?>
 
         <section>