From 245f1c1f4f60f6841b557312ff49b2ee6bac9bf3 Mon Sep 17 00:00:00 2001 From: polo Date: Sun, 20 Jul 2025 16:38:52 +0200 Subject: =?UTF-8?q?s=C3=A9lections=20correctes=20calendrier=20=C3=A9cran?= =?UTF-8?q?=20tactile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/calendar.js | 22 ++++++++++++---------- public/js/calendar_admin.js | 32 ++++++++++++++++++++++++++------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/public/js/calendar.js b/public/js/calendar.js index 2275c10..844d411 100644 --- a/public/js/calendar.js +++ b/public/js/calendar.js @@ -28,9 +28,8 @@ document.addEventListener('DOMContentLoaded', function(){ // pour recalculer la taille au redimensionnement du parent, exécuter: calendar.updateSize() stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois - selectable: true, // sélection de jours multiples - longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde, - chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */ + selectable: true, // sélection de jours en cliquant dessus + longPressDelay: 300, // 1000ms par défaut navLinks: true, // numéros de jour et de semaines clicables // vue semaine @@ -45,14 +44,17 @@ document.addEventListener('DOMContentLoaded', function(){ selected_start_string = info.startStr; // variable "globale" hideModal(); }, - // méthode alternative à longPressDelay: 0 pour obtenir une sélection d'un simple "tap" sur écran tactile (mettre le if inverse dans select) - /*dateClick: function(info) { - if (window.matchMedia('(pointer: coarse)').matches) { - // utile sur mobile/tablette : déclenche sur un tap - console.log('dateClick', info.dateStr); - calendar.select(info.date, info.date); // hack permettant de sélectionner une journée seule uniquement + // sélection d'une date simple sur mobile, évite des problèmes de conflit avec eventClick + dateClick: function(info){ + if(window.matchMedia('(pointer: coarse)').matches){ + const end = new Date(info.date.getTime()); + calendar.view.type == 'dayGridMonth' ? end.setDate(end.getDate() + 1) : end.setMinutes(end.getMinutes() + 30); + // vue date: la fin est une date exclue + // vue semaine: durée de 30min par défaut + + calendar.select(info.date, end); // appeler select() avec un seul paramètre ne marche pas avec la vue "mois" } - },*/ + }, //unselect: function(event, view){}, eventClick: function(info){ diff --git a/public/js/calendar_admin.js b/public/js/calendar_admin.js index 7f167a4..90e2942 100644 --- a/public/js/calendar_admin.js +++ b/public/js/calendar_admin.js @@ -29,9 +29,8 @@ document.addEventListener('DOMContentLoaded', function(){ // pour recalculer la taille au redimensionnement du parent, exécuter: calendar.updateSize() stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois - selectable: true, // sélection de jours multiples - longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde, - chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */ + selectable: true, // sélection de jours en cliquant dessus + longPressDelay: 300, // 1000ms par défaut navLinks: true, // numéros de jour et de semaines clicables // vue semaine @@ -58,10 +57,11 @@ document.addEventListener('DOMContentLoaded', function(){ const end = new Date(info.endStr); if(calendar.view.type == 'dayGridMonth'){ - start_value = info.startStr + 'T10:00'; + const start = new Date(info.startStr); + start_value = start.toISOString().split('T')[0] + 'T10:00'; + end.setDate(end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur - end.setHours(11); - end_value = end.toISOString().split('T')[0] + 'T11:00'; + end_value = end.toISOString().split('T')[0] + 'T10:30'; } else if(calendar.view.type == 'timeGridWeek' || calendar.view.type == 'timeGridDay'){ const start_array = info.startStr.split("T"); @@ -115,6 +115,26 @@ document.addEventListener('DOMContentLoaded', function(){ aside.innerHTML = aside_content; calendar.updateSize(); }, + // sélection d'une date simple sur mobile, évite des problèmes de conflit avec eventClick + dateClick: function(info){ + if(window.matchMedia('(pointer: coarse)').matches){ + const end = new Date(info.date); + calendar.view.type == 'dayGridMonth' ? end.setDate(end.getDate() + 1) : end.setMinutes(end.getMinutes() + 30); + // vue date: la fin est une date exclue + // vue semaine: durée de 30min par défaut + + const local_end_date_array = end.toLocaleDateString().split('/'); + let local_end_str = local_end_date_array[2] + '-' + local_end_date_array[1] + '-' + local_end_date_array[0]; + + if(calendar.view.type != 'dayGridMonth'){ + local_end_str += 'T' + end.toLocaleTimeString(); + } + + // on a besoin de deux chaînes représentant l'heure locale pour obtenir le même objet "info" qu'avec l'évènement select + // la vue "dayGridMonth" nécessite deux paramètres, par sécurité on en enverra toujours deux + calendar.select(info.dateStr, local_end_str); + } + }, //unselect: function(event, view){}, eventClick: function(info){ event_selected = true; // variable "globale" -- cgit v1.2.3