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
$(function (e) {
var calendar = $("#calendar").calendarGC({
const calendar = $("#calendar").calendarGC({
dayBegin: 0,
dayNames: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
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) {
// Extraire la date cliquée au format YYYY-MM-DD
var targetDate = formatDate(data.datejs);
const targetDate = formatDate(data.datejs);
// console.log(data);
// 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));
return formatDate(event.date) === targetDate;
});
@ -60,7 +60,7 @@ $(function (e) {
$.each(filteredEvents, function (index, event) {
// Vérifier si une heure est spécifiée et formater correctement
//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>';
});
// 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
$(document).on('click', '.gc-calendar-month-year', function() {
// Obtient la date courante
var currentDate = new Date();
const currentDate = new Date();
// 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
calendar.setDate(formattedDate);
@ -112,29 +112,18 @@ $(function (e) {
function showPopup(data) {
var eventName = data.eventName;
const eventName = data.eventName;
// 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
var eventTime = data.eventTime === "" || data.date.getMinutes() ?
data.date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
}) :
''; // Format : 12:00
const eventTime = data.eventTime === '' ?'Toute la journée' : 'à ' + data.eventTime; // Format : 12:00
console.log (eventTime);
// Injecter les informations dans la popup
$('#eventName').text(eventName);
$('#eventDate').text(eventDate);
//console.log(eventTime);
if (eventTime === '') {
$('.eventTime').empty();
$('.eventTime').append('<span id="eventTime">Toute la journée</span>');
} else {
$('#eventTime').text(eventTime);
}
$('#eventTime').text(eventTime);
// Afficher la popup
$('#eventPopup').fadeIn();
@ -169,25 +158,25 @@ function generateEvents(objOptions) {
}
function formatDate(datejs) {
var year = datejs.getFullYear();
var 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 year = datejs.getFullYear();
const month = ('0' + (datejs.getMonth() + 1)).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;
}
function formatDateToDMY(dateString) {
// 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
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'
];
// Obtenir le jour, le mois et l'année
var day = datejs.getDate();
var month = monthNames[datejs.getMonth()];
var year = datejs.getFullYear();
const day = datejs.getDate();
const month = monthNames[datejs.getMonth()];
const year = datejs.getFullYear();
// Retourner la date au format "jour mois année"
return day + ' ' + month + ' ' + year;

View File

@ -5,7 +5,7 @@
<span class="close-btn">&times;</span>
<p><strong> <span id="eventName"></strong></span></p>
<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 id="eventListPopup" class="popup-overlay">