Calendrier 1.1

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% ;
 			}';

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 

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":""}

calendar/vendor/animated-calendar/calendar-gc.min.js

@@ -14,7 +14,8 @@ var gcObject = {
         }],
         onclickDate: function (e, t) {},
         nextIcon: ">",
-        prevIcon: "<"
+        prevIcon: "<",
+        eventIcon: "📌"
     },
     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 ? gcObject.options.eventIcon : t.eventName;
-                        var displayText = $(window).width() <= 600 ? '&#128204;' : 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;
 };
+

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
+// Définir la fonction d'initialisation du calendrier
-
+function initializeCalendar() {
-$(function (e) {
+    $("#calendar").calendarGC({
-    const calendar = $("#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");
+            // Code pour le changement de mois précédent
-            //console.log(e);
         },
         onNextMonth: function (e) {
-            // console.log("next");
+            // Code pour le changement de mois suivant
-            //console.log(e);
         },
         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
+            let eventListHtml = '';
-            //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
-                    //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];
-        
+        $("#calendar").calendarGC('setDate', formattedDate);
-        // Définit la date du calendrier sur la date courante
-        calendar.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) {