Corrige le pb d'affichage de l'heure de l'événement

This commit is contained in:
Fred Tempez 2024-08-23 14:44:49 +02:00
parent 2e9faf4f11
commit ae8221caad
2 changed files with 21 additions and 32 deletions

View File

@ -23,7 +23,7 @@ const events = generateEvents(objOptions);
// https://www.jqueryscript.net/time-clock/animated-calendar-event-gc.html // https://www.jqueryscript.net/time-clock/animated-calendar-event-gc.html
$(function (e) { $(function (e) {
var calendar = $("#calendar").calendarGC({ const calendar = $("#calendar").calendarGC({
dayBegin: 0, dayBegin: 0,
dayNames: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'], dayNames: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@ -42,10 +42,10 @@ $(function (e) {
onclickDate: function (e, data) { onclickDate: function (e, data) {
// Extraire la date cliquée au format YYYY-MM-DD // Extraire la date cliquée au format YYYY-MM-DD
var targetDate = formatDate(data.datejs); const targetDate = formatDate(data.datejs);
// console.log(data); // console.log(data);
// Filtrer les événements pour la date cliquée // Filtrer les événements pour la date cliquée
var filteredEvents = $.grep(events, function (event) { const filteredEvents = $.grep(events, function (event) {
//console.log("Comparaison avec : " + formatDate(event.date)); //console.log("Comparaison avec : " + formatDate(event.date));
return formatDate(event.date) === targetDate; return formatDate(event.date) === targetDate;
}); });
@ -60,7 +60,7 @@ $(function (e) {
$.each(filteredEvents, function (index, event) { $.each(filteredEvents, function (index, event) {
// Vérifier si une heure est spécifiée et formater correctement // Vérifier si une heure est spécifiée et formater correctement
//console.log(event); //console.log(event);
var eventTime = event.eventTime ? event.eventTime : 'toute la journée'; const eventTime = event.eventTime ? event.eventTime : 'toute la journée';
eventListHtml += '<li><strong>' + event.eventName + '</strong><br>' + eventTime + '</li>'; eventListHtml += '<li><strong>' + event.eventName + '</strong><br>' + eventTime + '</li>';
}); });
// Titre de la popup // Titre de la popup
@ -96,10 +96,10 @@ $(function (e) {
// Ajoute un écouteur d'événement pour le clic sur l'élément avec la classe gc-calendar-month-year // Ajoute un écouteur d'événement pour le clic sur l'élément avec la classe gc-calendar-month-year
$(document).on('click', '.gc-calendar-month-year', function() { $(document).on('click', '.gc-calendar-month-year', function() {
// Obtient la date courante // Obtient la date courante
var currentDate = new Date(); const currentDate = new Date();
// Formate la date au format "YYYY-MM-DD" // Formate la date au format "YYYY-MM-DD"
var formattedDate = currentDate.toISOString().split('T')[0]; const formattedDate = currentDate.toISOString().split('T')[0];
// Définit la date du calendrier sur la date courante // Définit la date du calendrier sur la date courante
calendar.setDate(formattedDate); calendar.setDate(formattedDate);
@ -112,29 +112,18 @@ $(function (e) {
function showPopup(data) { function showPopup(data) {
var eventName = data.eventName; const eventName = data.eventName;
// Extraire la date et l'heure // Extraire la date et l'heure
var eventDate = data.date.toLocaleDateString(); // Format : 18/08/2024 const eventDate = data.date.toLocaleDateString(); // Format : 18/08/2024
// Vérifier si l'heure est définie et extraire l'heure si disponible // Vérifier si l'heure est définie et extraire l'heure si disponible
var eventTime = data.eventTime === "" || data.date.getMinutes() ? const eventTime = data.eventTime === '' ?'Toute la journée' : 'à ' + data.eventTime; // Format : 12:00
data.date.toLocaleTimeString([], { console.log (eventTime);
hour: '2-digit',
minute: '2-digit'
}) :
''; // Format : 12:00
// Injecter les informations dans la popup // Injecter les informations dans la popup
$('#eventName').text(eventName); $('#eventName').text(eventName);
$('#eventDate').text(eventDate); $('#eventDate').text(eventDate);
//console.log(eventTime); $('#eventTime').text(eventTime);
if (eventTime === '') {
$('.eventTime').empty();
$('.eventTime').append('<span id="eventTime">Toute la journée</span>');
} else {
$('#eventTime').text(eventTime);
}
// Afficher la popup // Afficher la popup
$('#eventPopup').fadeIn(); $('#eventPopup').fadeIn();
@ -169,25 +158,25 @@ function generateEvents(objOptions) {
} }
function formatDate(datejs) { function formatDate(datejs) {
var year = datejs.getFullYear(); const year = datejs.getFullYear();
var month = ('0' + (datejs.getMonth() + 1)).slice(-2); // Ajouter un zéro devant si nécessaire const month = ('0' + (datejs.getMonth() + 1)).slice(-2); // Ajouter un zéro devant si nécessaire
var day = ('0' + datejs.getDate()).slice(-2); // Ajouter un zéro devant si nécessaire const day = ('0' + datejs.getDate()).slice(-2); // Ajouter un zéro devant si nécessaire
return year + '-' + month + '-' + day; return year + '-' + month + '-' + day;
} }
function formatDateToDMY(dateString) { function formatDateToDMY(dateString) {
// Convertir la chaîne de caractères en objet Date // Convertir la chaîne de caractères en objet Date
var datejs = new Date(dateString); const datejs = new Date(dateString);
// Créer un tableau des noms de mois // Créer un tableau des noms de mois
var monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', const monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet',
'août', 'septembre', 'octobre', 'novembre', 'décembre' 'août', 'septembre', 'octobre', 'novembre', 'décembre'
]; ];
// Obtenir le jour, le mois et l'année // Obtenir le jour, le mois et l'année
var day = datejs.getDate(); const day = datejs.getDate();
var month = monthNames[datejs.getMonth()]; const month = monthNames[datejs.getMonth()];
var year = datejs.getFullYear(); const year = datejs.getFullYear();
// Retourner la date au format "jour mois année" // Retourner la date au format "jour mois année"
return day + ' ' + month + ' ' + year; return day + ' ' + month + ' ' + year;

View File

@ -5,7 +5,7 @@
<span class="close-btn">&times;</span> <span class="close-btn">&times;</span>
<p><strong> <span id="eventName"></strong></span></p> <p><strong> <span id="eventName"></strong></span></p>
<p>Le <span id="eventDate"></span> <p>Le <span id="eventDate"></span>
<p class="eventTime">à <span id="eventTime"></span></p> <p class="eventTime"><span id="eventTime"></span></p>
</div> </div>
</div> </div>
<div id="eventListPopup" class="popup-overlay"> <div id="eventListPopup" class="popup-overlay">