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

172 lines
5.9 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::$calendars); ?>';
2024-08-16 15:57:50 +02:00
const objOptions = JSON.parse(jsonOptions);
const events = generateEvents(objOptions);
2024-08-27 17:04:01 +02:00
// Définir la fonction d'initialisation du calendrier
function initializeCalendar() {
$("#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;',
nextIcon: '&#x3e;',
2024-08-27 17:04:01 +02:00
eventIcon: '&#x1F4C5;',
2024-08-16 15:57:50 +02:00
onPrevMonth: function (e) {
2024-08-27 17:04:01 +02:00
// Code pour le changement de mois précédent
2024-08-16 15:57:50 +02:00
},
onNextMonth: function (e) {
2024-08-27 17:04:01 +02:00
// Code pour le changement de mois suivant
2024-08-16 15:57:50 +02:00
},
events: events,
onclickDate: function (e, data) {
const targetDate = formatDate(data.datejs);
const filteredEvents = $.grep(events, function (event) {
2024-08-16 15:57:50 +02:00
return formatDate(event.date) === targetDate;
});
2024-08-27 17:04:01 +02:00
let eventListHtml = '';
2024-08-16 15:57:50 +02:00
if (filteredEvents.length > 0) {
eventListHtml = '<ul>';
$.each(filteredEvents, function (index, 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>';
});
eventListHtml += '</ul>';
$('#popupDate').html('Événements du ' + formatDateToDMY(targetDate));
} else {
$('#popupDate').html('Aucun événement le ' + formatDateToDMY(targetDate));
}
$('#eventList').html(eventListHtml);
$('#eventListPopup').fadeIn();
$('.close-btn').on('click', function () {
$('#eventListPopup').fadeOut();
});
$('#eventListPopup').on('click', function (e) {
if ($(e.target).is('.popup-overlay')) {
$(this).fadeOut();
}
});
}
});
$(document).on('click', '.gc-calendar-month-year', function() {
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0];
2024-08-27 17:04:01 +02:00
$("#calendar").calendarGC('setDate', formattedDate);
2024-08-16 15:57:50 +02:00
});
2024-08-27 17:04:01 +02:00
}
2024-08-16 15:57:50 +02:00
2024-08-27 17:04:01 +02:00
// Exécuter l'initialisation au chargement du document
$(document).ready(function() {
initializeCalendar();
});
2024-08-16 15:57:50 +02:00
// Définir l'état initial de la largeur de la fenêtre
let wasSmallScreen = $(window).width() <= 600;
2024-08-27 17:04:01 +02:00
$(window).resize(function() {
// Vérifier la largeur actuelle de la fenêtre
const isSmallScreen = $(window).width() <= 600;
2024-08-16 15:57:50 +02:00
// Vérifier si l'état de la largeur a changé (de petit à grand ou de grand à petit)
if (wasSmallScreen !== isSmallScreen) {
location.reload(); // Recharge la page
}
// Mettre à jour l'état de la largeur pour le prochain redimensionnement
wasSmallScreen = isSmallScreen;
});
2024-08-16 15:57:50 +02:00
2024-08-27 17:04:01 +02:00
2024-08-16 15:57:50 +02:00
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;
}