Calendrier 1.1

This commit is contained in:
Fred Tempez 2024-08-27 17:04:01 +02:00
parent 558e549281
commit 4c370b92bd
5 changed files with 42 additions and 48 deletions

View File

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

View File

@ -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

View File

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

View File

@ -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 ? '&#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;
};

View File

@ -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) {