Agenda, une popup pour afficher le détail d'un événement !

agenda/view/index/index.css

@@ -150,3 +150,24 @@ table th{
   -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
   box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
 }
+
+
+/*  Les popup  */
+#eventPopup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.popup-content {
+  text-align: left;
+}
+
+.popup-content h2 {
+  margin-top: 0;
+}

agenda/view/index/index.js.php

@@ -58,6 +58,16 @@ $(document).ready(function () {
 		eventClick: function (info) {
 			if (connected) {
 				window.open('<?php echo helper::baseUrl() . $this->getUrl(0); ?>' + '/id:' + info.event.id + 'vue:' + info.view.type + 'deb:' + calendar.formatIso(info.view.currentStart), '_self');
+			} else {
+				// Extraire les informations de l'événement
+				var eventId = info.event.id;
+				var eventTitle = info.event.title;
+				var eventStart = info.event.start;
+				var eventEnd = info.event.end;
+				var eventDescription = info.event.extendedProps.description; // Exemple d'attribut personnalisé
+		
+				// Afficher les informations dans la popup
+				showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription);
 			}
 		}
 	});
@@ -116,4 +126,24 @@ $(document).ready(function () {
 		$.wrapper();
 		calendar.render();
 	});
-});
+
+});
+
+
+/** Fonction pour affiche la popup */
+function showPopup(eventId, eventTitle, eventStart, eventEnd, eventDescription) {
+    // Utilisation de l'API Date native pour formater les dates de début et de fin
+    var formattedStart = eventStart ? eventStart.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A';
+    var formattedEnd = eventEnd ? eventEnd.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'N/A';
+
+    // Remplir les éléments de la popup avec les informations de l'événement
+    $('#popupEventId').text(eventId);
+    $('#popupEventTitle').text(eventTitle);
+    $('#popupEventStart').text(formattedStart);
+    $('#popupEventEnd').text(formattedEnd);
+    $('#popupEventDescription').text(eventDescription);
+
+    // Afficher la popup
+    $('#eventPopup').fadeIn();
+}
+

agenda/view/index/index.php

@@ -1,8 +1,18 @@
-
 <!-- Agenda dans un wrapper pour contrôler la taille-->
 <div id="index_wrapper">
 	<!--Affiche l'agenda-->
 	<div id='calendar'> </div>
+	<div id="eventPopup" style="display: none;">
+		<div class="popup-content">
+			<h2>Details de l'événement</h2>
+			<p><strong>ID :</strong> <span id="popupEventId"></span></p>
+			<p><strong>Titre :</strong> <span id="popupEventTitle"></span></p>
+			<p><strong>Début :</strong> <span id="popupEventStart"></span></p>
+			<p><strong>Fin :</strong> <span id="popupEventEnd"></span></p>
+			<p><strong>Description :</strong> <span id="popupEventDescription"></span></p>
+			<button onclick="$('#eventPopup').fadeOut();">Fermer</button>
+		</div>
+	</div>
 	<?php echo template::formOpen('index_events'); ?>
-	<?php echo template::formClose();?>
+	<?php echo template::formClose(); ?>
 </div>