agenda une jolie popup

This commit is contained in:
Fred Tempez 2024-08-30 19:04:27 +02:00
parent f34a6ec2c3
commit b21e3ebfa2
3 changed files with 75 additions and 30 deletions

View File

@ -153,21 +153,40 @@ table th{
/* Les popup */
/* Style de base pour le popup */
#eventPopup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 300px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
z-index: 1000; /* S'assure que le popup est au-dessus des autres éléments */
}
.popup-content {
text-align: left;
/* Style du bouton de fermeture */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 12px; /* Taille de la croix de fermeture */
}
.popup-content h2 {
margin-top: 0;
/* Style pour le titre de l'événement */
.event-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
/* Style pour les détails de l'événement */
.event-details {
font-size: 14px;
color: #666;
}

View File

@ -127,23 +127,52 @@ $(document).ready(function () {
calendar.render();
});
$('.close-btn').on('click', function () {
$('#eventPopup').fadeOut(); // Utilise fadeOut pour une fermeture en fondu
});
// Fermer le popup en cliquant à l'extérieur de '#eventPopup'
$(document).on('mousedown', function(event) {
// Vérifie si le clic a été fait à l'extérieur de '#eventPopup'
if (!$(event.target).closest('#eventPopup').length) {
// Si le popup est visible, le fermer
if ($('#eventPopup').is(':visible')) {
$('#eventPopup').fadeOut();
}
}
});
});
/** 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';
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();
}
/* Refermer la popup */
function closePopup() {
document.querySelector('.popup').style.display = 'none';
}

View File

@ -4,13 +4,10 @@
<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>
<span class="close-btn">&times;</span>
<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'); ?>