Zwii-Modules/calendar/view/index/index.js.php

183 lines
6.5 KiB
PHP
Raw Normal View History

2024-08-16 15:57:50 +02:00
/**
* This file is part of Zwii.
*
* For full copyright and license information, please see the LICENSE
* file that was distributed with this source code.
*
* @author Rémi Jean <remi.jean@outlook.com>
* @copyright Copyright (C) 2008-2018, Rémi Jean
* @author Frédéric Tempez <frederic.tempez@outlook.com>
* @copyright Copyright (C) 2018-2024, Frédéric Tempez
* @license CC Attribution-NonCommercial-NoDerivatives 4.0 International
* @link http://zwiicms.fr/
*/
const jsonOptions = '<?php echo json_encode($module::$agendas); ?>';
const objOptions = JSON.parse(jsonOptions);
//console.log(objOptions);
const events = generateEvents(objOptions);
// https://www.jqueryscript.net/time-clock/animated-calendar-event-gc.html
$(function (e) {
const calendar = $("#calendar").calendarGC({
dayBegin: 1,
dayNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
2024-08-16 15:57:50 +02:00
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
prevIcon: '&#x3c;',
homeIcon: 'H',
nextIcon: '&#x3e;',
onPrevMonth: function (e) {
2024-08-23 11:30:14 +02:00
// console.log("prev");
2024-08-16 15:57:50 +02:00
//console.log(e);
},
onNextMonth: function (e) {
2024-08-23 11:30:14 +02:00
// console.log("next");
2024-08-16 15:57:50 +02:00
//console.log(e);
},
events: events,
onclickDate: function (e, data) {
// Extraire la date cliquée au format YYYY-MM-DD
const targetDate = formatDate(data.datejs);
2024-08-23 11:30:14 +02:00
// console.log(data);
2024-08-16 15:57:50 +02:00
// Filtrer les événements pour la date cliquée
const filteredEvents = $.grep(events, function (event) {
2024-08-16 15:57:50 +02:00
//console.log("Comparaison avec : " + formatDate(event.date));
return formatDate(event.date) === targetDate;
});
// Vérifier le nombre d'événements trouvés
//console.log("Nombre d'événements trouvés : " + filteredEvents.length);
// Construire le contenu de la popup avec les événements du jour
if (filteredEvents.length > 0) {
// Si des événements sont trouvés, les afficher
eventListHtml = '<ul>';
$.each(filteredEvents, function (index, event) {
// Vérifier si une heure est spécifiée et formater correctement
2024-08-23 11:30:14 +02:00
//console.log(event);
const eventTime = event.eventTime ? event.eventTime : 'toute la journée';
2024-08-16 15:57:50 +02:00
eventListHtml += '<li><strong>' + event.eventName + '</strong><br>' + eventTime + '</li>';
});
// Titre de la popup
eventListHtml += '</ul>';
$('#popupDate').html('Événements du ' + formatDateToDMY(targetDate));
} else {
// Sinon, afficher "Aucun événement"
eventListHtml = '';
$('#popupDate').html('Aucun événement le ' + formatDateToDMY(targetDate));
}
// Injecter le contenu dans la popup
$('#eventList').html(eventListHtml);
// Afficher la popup
$('#eventListPopup').fadeIn();
// Fermer la popup lorsqu'on clique sur le bouton de fermeture
$('.close-btn').on('click', function () {
$('#eventListPopup').fadeOut();
});
// Fermer la popup lorsqu'on clique en dehors du contenu
$('#eventListPopup').on('click', function (e) {
if ($(e.target).is('.popup-overlay')) {
$(this).fadeOut();
}
});
}
});
// 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
const currentDate = new Date();
2024-08-16 15:57:50 +02:00
// Formate la date au format "YYYY-MM-DD"
const formattedDate = currentDate.toISOString().split('T')[0];
2024-08-16 15:57:50 +02:00
// Définit la date du calendrier sur la date courante
calendar.setDate(formattedDate);
});
});
function showPopup(data) {
const eventName = data.eventName;
2024-08-16 15:57:50 +02:00
// Extraire la date et l'heure
const eventDate = data.date.toLocaleDateString(); // Format : 18/08/2024
2024-08-16 15:57:50 +02: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);
2024-08-16 15:57:50 +02:00
// Injecter les informations dans la popup
$('#eventName').text(eventName);
$('#eventDate').text(eventDate);
$('#eventTime').text(eventTime);
2024-08-16 15:57:50 +02:00
// Afficher la popup
$('#eventPopup').fadeIn();
// Fermer la popup lorsqu'on clique sur le bouton de fermeture
$('.close-btn').on('click', function () {
$('#eventPopup').fadeOut();
});
// Fermer la popup lorsqu'on clique en dehors du contenu
$('#eventPopup').on('click', function (e) {
if ($(e.target).is('.popup-overlay')) {
$(this).fadeOut();
}
});
}
function generateEvents(objOptions) {
return objOptions.map(function (item) {
return {
date: new Date(item.date), // Convertir la chaîne de date en objet Date
eventTime: item.time,
eventName: item.eventName,
className: item.className || '', // Ajouter une classe CSS si disponible
dateColor: item.dateColor || '', // Ajouter une couleur de date si disponible
onclick: function (e, data) { // Ajouter une fonction onclick
showPopup(data);
}
};
});
}
function formatDate(datejs) {
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
2024-08-16 15:57:50 +02:00
return year + '-' + month + '-' + day;
}
function formatDateToDMY(dateString) {
// Convertir la chaîne de caractères en objet Date
const datejs = new Date(dateString);
2024-08-16 15:57:50 +02:00
// Créer un tableau des noms de mois
const monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet',
2024-08-16 15:57:50 +02:00
'août', 'septembre', 'octobre', 'novembre', 'décembre'
];
// Obtenir le jour, le mois et l'année
const day = datejs.getDate();
const month = monthNames[datejs.getMonth()];
const year = datejs.getFullYear();
2024-08-16 15:57:50 +02:00
// Retourner la date au format "jour mois année"
return day + ' ' + month + ' ' + year;
}