Calendrier 1.1
This commit is contained in:
parent
558e549281
commit
4c370b92bd
@ -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% ;
|
||||
}';
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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":""}
|
||||
@ -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 ? '📌' : 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: ">",
|
||||
prevIcon: "<"
|
||||
prevIcon: "<",
|
||||
eventIcon: "📌" // 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 || ">", gcObject.options.prevIcon = e.prevIcon || "<", 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 || ">",
|
||||
gcObject.options.prevIcon = e.prevIcon || "<",
|
||||
// Il manque la ligne suivante pour eventIcon
|
||||
gcObject.options.eventIcon = e.eventIcon || "📌",
|
||||
gcObject.el = this,
|
||||
gcObject.render(),
|
||||
gcObject;
|
||||
};
|
||||
|
||||
|
||||
@ -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: '<',
|
||||
nextIcon: '>',
|
||||
eventIcon: '📅',
|
||||
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,23 +69,26 @@ $(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) {
|
||||
|
||||
const eventName = data.eventName;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user