Corrige le pb d'affichage de l'heure de l'événement
This commit is contained in:
parent
2e9faf4f11
commit
ae8221caad
@ -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
|
|
||||||
var eventTime = data.eventTime === "" || data.date.getMinutes() ?
|
|
||||||
data.date.toLocaleTimeString([], {
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
}) :
|
|
||||||
''; // Format : 12:00
|
|
||||||
|
|
||||||
|
// Vérifier si l'heure est définie et extraire l'heure si disponible
|
||||||
|
const eventTime = data.eventTime === '' ?'Toute la journée' : 'à ' + data.eventTime; // Format : 12:00
|
||||||
|
console.log (eventTime);
|
||||||
// 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);
|
|
||||||
if (eventTime === '') {
|
|
||||||
$('.eventTime').empty();
|
|
||||||
$('.eventTime').append('<span id="eventTime">Toute la journée</span>');
|
|
||||||
} else {
|
|
||||||
$('#eventTime').text(eventTime);
|
$('#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;
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<span class="close-btn">×</span>
|
<span class="close-btn">×</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">
|
||||||
|
Loading…
Reference in New Issue
Block a user