Calendrier 1.1

2024-08-27 17:04:01 +02:00 · 2024-08-27 17:04:01 +02:00 · 4c370b92bd
commit 4c370b92bd
parent 558e549281
5 changed files with 42 additions and 48 deletions
--- a/calendar/calendar.php
+++ b/calendar/calendar.php
@ -284,7 +284,6 @@ class calendar extends common
 				padding: 2px;
 				border-radius: 5px; 
 				color: red;
-				background-color: lightgrey;
 				font-size: 18px;
 				width: 90% ;
 				}
@ -292,7 +291,6 @@ class calendar extends common
 				border-radius: 5px;
 				padding: 2px;
 				color: lightgreen;
-				background-color: darkgrey;
 				font-size: 18px;
 				width: 90% ;
 				}
@ -300,7 +298,6 @@ class calendar extends common
 				padding: 2px;
 				border-radius: 5px; 
 				color: orange;
-				background-color: green;
 				font-size: 18px;
 				width: 90% ;
 			}';
--- a/calendar/changes.md
+++ b/calendar/changes.md
@ -1,8 +1,9 @@

-# Version 1.01
+# Version 1.1
 - Limite à 80% la largeur de la popup pour les petits écrans.
 - Contraste de couleurs des textes qui écrasent la couleur définie dans la feuille de style perso.
 - Largeurs des colonnes fixes.
+- Les événements sont représentés par des icônes sur les petites largeurs d'écran.
 # Version 1.00
 - Activer dans la gestion du profil
 # Version 0.4 
--- a/calendar/enum.json
+++ b/calendar/enum.json
@ -1 +1 @@
-{"name":"calendar","realName":"Calendrier","version":"1.0","update":"0.0","delete":true,"dataDirectory":""}
+{"name":"calendar","realName":"Calendrier","version":"1.1","update":"0.0","delete":true,"dataDirectory":""}
--- a/calendar/vendor/animated-calendar/calendar-gc.min.js
+++ b/calendar/vendor/animated-calendar/calendar-gc.min.js
@ -14,7 +14,8 @@ var gcObject = {
        }],
        onclickDate: function (e, t) {},
        nextIcon: "&gt;",
-        prevIcon: "&lt;"
+        prevIcon: "&lt;",
+        eventIcon: "&#128204;"
    },
    el: "",
    eventAnimate: "none",
@ -81,8 +82,7 @@ var gcObject = {
                gcObject.options.events.forEach((function (t) {
                    if (t.date.getFullYear() == e.datejs.getFullYear() && t.date.getMonth() == e.datejs.getMonth() && t.date.getDate() == e.datejs.getDate()) {
                        n.addClass("event");
-                        // Vérifiez la largeur de la fenêtre et choisissez le contenu en conséquence
-                        var displayText = $(window).width() <= 600 ? '&#128204;' : t.eventName;
+                        var displayText = $(window).width() <= 600 ? gcObject.options.eventIcon : t.eventName;
                        var a = $(`<div class="gc-event ${t.className}" style="color:${t.dateColor || 'inherit'}">${displayText}</div>`);
                        a.on("click", (function (e) {
                            t.onclick(e, t)
@ -137,7 +137,23 @@ jQuery.fn.calendarGC = function (e = {
    events: events,
    onclickDate: onclickDate,
    nextIcon: "&gt;",
-    prevIcon: "&lt;"
+    prevIcon: "&lt;",
+    eventIcon: "&#128204"  // Notez ici, il n'y a pas de point-virgule.
 }) {
-    return gcObject.options.dayNames = e.dayNames || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], gcObject.options.dayBegin = void 0 === e.dayBegin || null === e.dayBegin ? 1 : e.dayBegin, gcObject.options.monthNames = e.monthNames || ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], gcObject.options.onPrevMonth = e.onPrevMonth || function (e) {}, gcObject.options.onNextMonth = e.onNextMonth || function (e) {}, gcObject.options.events = e.events || [], gcObject.options.onclickDate = e.onclickDate || function (e, t) {}, gcObject.options.nextIcon = e.nextIcon || "&gt;", gcObject.options.prevIcon = e.prevIcon || "&lt;", gcObject.el = this, gcObject.render(), gcObject
+    // Dans la définition des options, vous n'avez pas pris en compte eventIcon
+    return gcObject.options.dayNames = e.dayNames || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    gcObject.options.dayBegin = void 0 === e.dayBegin || null === e.dayBegin ? 1 : e.dayBegin,
+    gcObject.options.monthNames = e.monthNames || ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    gcObject.options.onPrevMonth = e.onPrevMonth || function (e) {},
+    gcObject.options.onNextMonth = e.onNextMonth || function (e) {},
+    gcObject.options.events = e.events || [],
+    gcObject.options.onclickDate = e.onclickDate || function (e, t) {},
+    gcObject.options.nextIcon = e.nextIcon || "&gt;",
+    gcObject.options.prevIcon = e.prevIcon || "&lt;",
+    // Il manque la ligne suivante pour eventIcon
+    gcObject.options.eventIcon = e.eventIcon || "&#128204;",
+    gcObject.el = this,
+    gcObject.render(),
+    gcObject;
 };
+
--- a/calendar/view/index/index.js.php
+++ b/calendar/view/index/index.js.php
@ -16,74 +16,51 @@

 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({
+// Définir la fonction d'initialisation du calendrier
+function initializeCalendar() {
+    $("#calendar").calendarGC({
        dayBegin: 1,
        dayNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        prevIcon: '&#x3c;',
        nextIcon: '&#x3e;',
+        eventIcon: '&#x1F4C5;',
        onPrevMonth: function (e) {
-            // console.log("prev");
-            //console.log(e);
+            // Code pour le changement de mois précédent
        },
        onNextMonth: function (e) {
-            // console.log("next");
-            //console.log(e);
+            // Code pour le changement de mois suivant
        },
        events: events,
-
        onclickDate: function (e, data) {
-            // Extraire la date cliquée au format YYYY-MM-DD
            const targetDate = formatDate(data.datejs);
-            // console.log(data);
-            // Filtrer les événements pour la date cliquée
            const filteredEvents = $.grep(events, function (event) {
-                //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);
+            let eventListHtml = '';

-            // 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
-                    //console.log(event);
                    const eventTime = event.eventTime ? event.eventTime : 'toute la journée';
                    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();
@ -92,21 +69,24 @@ $(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
        const currentDate = new Date();
-        
-        // Formate la date au format "YYYY-MM-DD"
        const formattedDate = currentDate.toISOString().split('T')[0];
-        
-        // Définit la date du calendrier sur la date courante
-        calendar.setDate(formattedDate);
+        $("#calendar").calendarGC('setDate', formattedDate);
    });
+}

-
+// Exécuter l'initialisation au chargement du document
+$(document).ready(function() {
+    initializeCalendar();
 });

+// Recharger la page lors du redimensionnement de la fenêtre
+$(window).resize(function() {
+    location.reload(); // Recharge la page
+});
+
+


 function showPopup(data) {