agenda une jolie popup
This commit is contained in:
parent
f34a6ec2c3
commit
b21e3ebfa2
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ $(document).ready(function () {
|
||||
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);
|
||||
}
|
||||
@ -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';
|
||||
// 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);
|
||||
// Remplir les éléments de la popup avec les informations de l'événement
|
||||
$('#popupEventTitle').text(eventTitle);
|
||||
$('#popupEventStart').text(formattedStart);
|
||||
$('#popupEventEnd').text(formattedEnd);
|
||||
|
||||
// Afficher la popup
|
||||
$('#eventPopup').fadeIn();
|
||||
// Afficher la popup
|
||||
$('#eventPopup').fadeIn();
|
||||
}
|
||||
|
||||
/* Refermer la popup */
|
||||
function closePopup() {
|
||||
document.querySelector('.popup').style.display = 'none';
|
||||
}
|
||||
@ -2,17 +2,14 @@
|
||||
<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>
|
||||
<div id="eventPopup" style="display: none;">
|
||||
<div class="popup-content">
|
||||
<span class="close-btn">×</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>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo template::formOpen('index_events'); ?>
|
||||
<?php echo template::formClose(); ?>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user