nodebb-plugin-onekite-calendar 2.0.13 → 2.0.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog – calendar-onekite
 
+## 1.3.8
+- ACP Comptabilisation : ajout d’un **grand total** (montant total des locations payées sur la période) + compteurs (payées / sorties gratuites).
+
+## 1.3.7
+- Mobile FAB : remplacement des 2 champs date par un **sélecteur unique** (calendrier) permettant de choisir directement une plage (clic début puis fin, fin incluse), avec dates passées/aujourd'hui désactivées.
+
 ## 1.3.6
 - ACP Comptabilisation : ajout d’un tableau séparé « Détails des sorties gratuites » (avec le nom du matériel).
 - Mobile FAB : la modale utilise maintenant des champs date avec calendrier (type="date") et empêche toute réservation pour le jour même ou dans le passé.

package/lib/admin.js

@@ -405,6 +405,8 @@ admin.getAccounting = async function (req, res) {
   const rows = [];
   const byItem = new Map();
   let freeCount = 0;
+  let paidCount = 0;
+  let grandTotal = 0;
 
   for (const rid of ids) {
     const r = await dbLayer.getReservation(rid);
@@ -424,7 +426,12 @@ admin.getAccounting = async function (req, res) {
     const startDate = formatFR(r.start);
     const endDate = formatFR(r.end);
 
-    if (isFree) freeCount += 1;
+    if (isFree) {
+      freeCount += 1;
+    } else {
+      paidCount += 1;
+      grandTotal += total;
+    }
 
     rows.push({
       rid: r.rid,
@@ -463,6 +470,9 @@ admin.getAccounting = async function (req, res) {
     ok: true,
     from: new Date(minTs).toISOString().slice(0, 10),
     to: new Date(maxTs).toISOString().slice(0, 10),
+    paidCount,
+    freeCount,
+    grandTotal,
     summary,
     rows,
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-onekite-calendar",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "FullCalendar-based equipment reservation workflow with admin approval & HelloAsso payment for NodeBB",
   "main": "library.js",
   "license": "MIT",

package/plugin.json

@@ -39,5 +39,5 @@
   "acpScripts": [
     "public/admin.js"
   ],
-  "version": "2.0.13"
+  "version": "2.0.14"
 }

package/public/admin.js

@@ -1171,6 +1171,9 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
     const accSummary = document.querySelector('#onekite-acc-summary tbody');
     const accRows = document.querySelector('#onekite-acc-rows tbody');
     const accFreeRows = document.querySelector('#onekite-acc-free-rows tbody');
+    const accGrandTotal = document.getElementById('onekite-acc-grand-total');
+    const accPaidCount = document.getElementById('onekite-acc-paid-count');
+    const accFreeCount = document.getElementById('onekite-acc-free-count');
 
     function ymd(d) {
       const yyyy = d.getUTCFullYear();
@@ -1190,10 +1193,17 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
       if (accSummary) accSummary.innerHTML = '';
       if (accRows) accRows.innerHTML = '';
       if (accFreeRows) accFreeRows.innerHTML = '';
+      if (accGrandTotal) accGrandTotal.textContent = '0.00';
+      if (accPaidCount) accPaidCount.textContent = '0';
+      if (accFreeCount) accFreeCount.textContent = '0';
       if (!payload || !payload.ok) {
         return;
       }
 
+      if (accGrandTotal) accGrandTotal.textContent = (Number(payload.grandTotal) || 0).toFixed(2);
+      if (accPaidCount) accPaidCount.textContent = String(payload.paidCount || 0);
+      if (accFreeCount) accFreeCount.textContent = String(payload.freeCount || 0);
+
       (payload.summary || []).forEach((s) => {
         const tr = document.createElement('tr');
         if (s.isFree) {

package/public/client.js

@@ -61,6 +61,21 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
             font-size: 20px;
           }
         }
+
+/* Mobile FAB date range picker (single calendar) */
+.onekite-range-picker { user-select: none; }
+.onekite-range-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
+.onekite-range-header .btn { padding:.25rem .5rem; }
+.onekite-range-month { font-weight:600; }
+.onekite-range-weekdays, .onekite-range-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
+.onekite-range-weekdays div { text-align:center; font-size:.8rem; opacity:.7; padding:2px 0; }
+.onekite-range-day { border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:8px 0; text-align:center; cursor:pointer; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529); }
+.onekite-range-day.is-empty { border-color:transparent; background:transparent; cursor:default; }
+.onekite-range-day.is-disabled { opacity:.35; cursor:not-allowed; }
+.onekite-range-day.is-start, .onekite-range-day.is-end { border-color:rgba(0,0,0,.18); font-weight:700; }
+.onekite-range-day.is-inrange { background:var(--bs-tertiary-bg, rgba(0,0,0,.04)); }
+.onekite-range-summary { margin-top:10px; font-size:.9rem; }
+
 `;
       document.head.appendChild(style);
     } catch (e) {
@@ -2030,131 +2045,226 @@ function toDatetimeLocalValue(date) {
     return d;
   }
 
-  async function openFabDatePicker() {
-    if (!lockAction('fab-date-picker', 700)) return;
-
-    // Defaults: tomorrow -> tomorrow (cannot book today or past)
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const minStart = new Date(today);
-    minStart.setDate(minStart.getDate() + 1);
+  
+async function openFabDatePicker() {
+  if (!lockAction('fab-date-picker', 700)) return;
+
+  // Cannot book today or past (mobile FAB).
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const minStart = new Date(today);
+  minStart.setDate(minStart.getDate() + 1);
+
+  // Month cursor for the single-calendar range picker
+  const cursor = new Date(minStart);
+  cursor.setDate(1);
+
+  const state = {
+    cursor,
+    minStart,
+    start: null,
+    end: null, // inclusive
+  };
 
-    const html = `
-      <div class="onekite-fab-dates">
-        <div class="mb-2">
-          <label class="form-label">Date de début</label>
-          <input class="form-control" type="date" id="onekite-fab-start" autocomplete="off" />
-        </div>
-        <div class="mb-2">
-          <label class="form-label">Date de fin (incluse)</label>
-          <input class="form-control" type="date" id="onekite-fab-end" autocomplete="off" />
-          <div class="form-text">Sélectionne une période (la date de fin est incluse).</div>
-        </div>
+  const html = `
+    <div class="onekite-range-picker" id="onekite-range-picker">
+      <div class="onekite-range-header">
+        <button type="button" class="btn btn-outline-secondary btn-sm" id="onekite-range-prev" aria-label="Mois précédent">&lsaquo;</button>
+        <div class="onekite-range-month" id="onekite-range-month"></div>
+        <button type="button" class="btn btn-outline-secondary btn-sm" id="onekite-range-next" aria-label="Mois suivant">&rsaquo;</button>
       </div>
-    `;
+      <div class="onekite-range-weekdays">
+        <div>L</div><div>M</div><div>M</div><div>J</div><div>V</div><div>S</div><div>D</div>
+      </div>
+      <div class="onekite-range-grid" id="onekite-range-grid"></div>
+      <div class="onekite-range-summary" id="onekite-range-summary"></div>
+      <div class="form-text mt-2">Sélectionne une date de début puis une date de fin (incluse). Les dates d'aujourd'hui et passées sont désactivées.</div>
+    </div>
+  `;
+
+  const dlg = bootbox.dialog({
+    title: 'Choisir une période',
+    message: html,
+    buttons: {
+      cancel: { label: 'Annuler', className: 'btn-secondary' },
+      ok: {
+        label: 'Continuer',
+        className: 'btn-primary',
+        callback: function () {
+          const s = state.start;
+          const e = state.end || state.start;
+          if (!s) {
+            alerts.error('Choisis une date de début.');
+            return false;
+          }
+          if (!e) {
+            alerts.error('Choisis une date de fin.');
+            return false;
+          }
+          // Convert end inclusive -> end exclusive (FullCalendar rule)
+          const endExcl = new Date(e);
+          endExcl.setDate(endExcl.getDate() + 1);
 
-    const dlg = bootbox.dialog({
-      title: 'Choisir des dates',
-      message: html,
-      buttons: {
-        cancel: { label: 'Annuler', className: 'btn-secondary' },
-        ok: {
-          label: 'Continuer',
-          className: 'btn-primary',
-          callback: function () {
-            const sStr = String(document.getElementById('onekite-fab-start').value || '');
-            const eStr = String(document.getElementById('onekite-fab-end').value || '');
-            const s = parseYmdDate(sStr);
-            const e = parseYmdDate(eStr);
-            if (!s || !e) {
-              alerts.error('Dates invalides.');
-              return false;
+          (async () => {
+            try {
+              if (isDialogOpen) return;
+              isDialogOpen = true;
+              const items = cachedItems || (await loadItems());
+              const chosen = await openReservationDialog({ start: s, end: endExcl }, items);
+              if (chosen && chosen.itemIds && chosen.itemIds.length) {
+                const startDate = toLocalYmd(s);
+                const endDate = (chosen && chosen.endDate) ? String(chosen.endDate) : toLocalYmd(endExcl);
+                const resp = await requestReservation({
+                  start: startDate,
+                  end: endDate,
+                  itemIds: chosen.itemIds,
+                  itemNames: chosen.itemNames,
+                  total: chosen.total,
+                });
+                if (resp && (resp.autoPaid || String(resp.status) === 'paid')) {
+                  showAlert('success', 'Réservation confirmée.');
+                } else {
+                  showAlert('success', 'Demande envoyée (en attente de validation).');
+                }
+                invalidateEventsCache();
+                if (currentCalendar) scheduleRefetch(currentCalendar);
+              }
+            } catch (err) {
+              // ignore
+            } finally {
+              isDialogOpen = false;
             }
+          })();
 
-            // Cannot book today or past
-            if (s < minStart || e < minStart) {
-              alerts.error('Impossible de réserver pour le jour même ou dans le passé.');
-              return false;
-            }
-            if (e < s) {
-              alerts.error('La date de fin doit être après la date de début.');
-              return false;
-            }
+          return true;
+        },
+      },
+    },
+  });
 
-            // Convert end inclusive -> end exclusive (FullCalendar rule)
-            const endExcl = new Date(e);
-            endExcl.setDate(endExcl.getDate() + 1);
+  function sameDay(a, b) {
+    return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
 
-            // Open the standard reservation dialog
-            (async () => {
-              try {
-                if (isDialogOpen) return;
-                isDialogOpen = true;
-                const items = cachedItems || (await loadItems());
-                const chosen = await openReservationDialog({ start: s, end: endExcl }, items);
-                if (chosen && chosen.itemIds && chosen.itemIds.length) {
-                  const startDate = toLocalYmd(s);
-                  const endDate = (chosen && chosen.endDate) ? String(chosen.endDate) : toLocalYmd(endExcl);
-        const resp = await requestReservation({
-          start: startDate,
-          end: endDate,
-          itemIds: chosen.itemIds,
-          itemNames: chosen.itemNames,
-          total: chosen.total,
+  function clampToMidnight(d) {
+    const x = new Date(d);
+    x.setHours(0, 0, 0, 0);
+    return x;
+  }
+
+  function monthLabel(d) {
+    try {
+      return d.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
+    } catch (e) {
+      return `${d.getMonth() + 1}/${d.getFullYear()}`;
+    }
+  }
+
+  function render() {
+    const monthEl = document.getElementById('onekite-range-month');
+    const gridEl = document.getElementById('onekite-range-grid');
+    const sumEl = document.getElementById('onekite-range-summary');
+    if (!monthEl || !gridEl || !sumEl) return;
+
+    monthEl.textContent = monthLabel(state.cursor);
+    gridEl.innerHTML = '';
+
+    const year = state.cursor.getFullYear();
+    const month = state.cursor.getMonth();
+    const first = new Date(year, month, 1);
+    const last = new Date(year, month + 1, 0);
+
+    // Monday-based week index: 0..6
+    const firstDow = (first.getDay() + 6) % 7;
+    const daysInMonth = last.getDate();
+
+    // Empty cells before month start
+    for (let i = 0; i < firstDow; i++) {
+      const div = document.createElement('div');
+      div.className = 'onekite-range-day is-empty';
+      gridEl.appendChild(div);
+    }
+
+    const s = state.start;
+    const e = state.end || state.start;
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const d = new Date(year, month, day);
+      d.setHours(0, 0, 0, 0);
+
+      const div = document.createElement('div');
+      div.className = 'onekite-range-day';
+      div.textContent = String(day);
+
+      const disabled = d < state.minStart;
+      if (disabled) div.classList.add('is-disabled');
+
+      if (s && sameDay(d, s)) div.classList.add('is-start');
+      if (state.end && sameDay(d, state.end)) div.classList.add('is-end');
+
+      if (s && e && d > s && d < e) div.classList.add('is-inrange');
+      if (s && e && sameDay(d, s) && !state.end) div.classList.add('is-inrange');
+
+      if (!disabled) {
+        div.addEventListener('click', () => {
+          const clicked = clampToMidnight(d);
+          // First click: set start
+          if (!state.start || (state.start && state.end)) {
+            state.start = clicked;
+            state.end = null;
+            // If cursor month is before selected month, keep cursor
+            render();
+            return;
+          }
+          // Second click: set end (inclusive)
+          if (clicked < state.start) {
+            state.start = clicked;
+            state.end = null;
+            render();
+            return;
+          }
+          state.end = clicked;
+          render();
         });
-        if (resp && (resp.autoPaid || String(resp.status) === 'paid')) {
-          showAlert('success', 'Réservation confirmée.');
-        } else {
-          showAlert('success', 'Demande envoyée (en attente de validation).');
-        }
-                  invalidateEventsCache();
-                  if (currentCalendar) scheduleRefetch(currentCalendar);
-                }
-              } catch (err) {
-                // ignore
-              } finally {
-                isDialogOpen = false;
-              }
-            })();
+      }
 
-            // close picker modal
-            return true;
-          },
-        },
-      },
-    });
+      gridEl.appendChild(div);
+    }
 
-    dlg.on('shown.bs.modal', () => {
-      try {
-        const startEl = document.getElementById('onekite-fab-start');
-        const endEl = document.getElementById('onekite-fab-end');
-        const minStr = toLocalYmd(minStart);
-        if (startEl) {
-          startEl.min = minStr;
-          startEl.value = minStr;
-        }
-        if (endEl) {
-          endEl.min = minStr;
-          endEl.value = minStr;
-        }
-        if (startEl && endEl) {
-          startEl.addEventListener('change', () => {
-            try {
-              const d = parseYmdDate(String(startEl.value || ''));
-              if (!d) return;
-              const minEnd = new Date(d);
-              const minEndStr = toLocalYmd(minEnd);
-              endEl.min = minEndStr;
-              if (String(endEl.value || '') < minEndStr) endEl.value = minEndStr;
-            } catch (e) {}
-          });
-        }
-        if (startEl) startEl.focus();
-      } catch (e) {}
-    });
+    // Summary
+    if (!state.start) {
+      sumEl.textContent = 'Aucune date sélectionnée.';
+    } else {
+      const startTxt = formatDdMmYyyy(state.start);
+      const endTxt = formatDdMmYyyy(state.end || state.start);
+      sumEl.textContent = (state.end && !sameDay(state.start, state.end))
+        ? `Du ${startTxt} au ${endTxt}`
+        : `Le ${startTxt}`;
+    }
   }
 
-  function parseYmdDate(ymdStr) {
+  dlg.on('shown.bs.modal', () => {
+    try {
+      const prevBtn = document.getElementById('onekite-range-prev');
+      const nextBtn = document.getElementById('onekite-range-next');
+      if (prevBtn) {
+        prevBtn.addEventListener('click', () => {
+          state.cursor.setMonth(state.cursor.getMonth() - 1);
+          render();
+        });
+      }
+      if (nextBtn) {
+        nextBtn.addEventListener('click', () => {
+          state.cursor.setMonth(state.cursor.getMonth() + 1);
+          render();
+        });
+      }
+      render();
+    } catch (e) {}
+  });
+}
+
+function parseYmdDate(ymdStr) {
     // Expect YYYY-MM-DD (from <input type="date">)
     if (!ymdStr || typeof ymdStr !== 'string') return null;
     const m = /^\s*(\d{4})-(\d{2})-(\d{2})\s*$/.exec(ymdStr);

package/templates/admin/plugins/calendar-onekite.tpl

@@ -200,6 +200,15 @@
           </div>
         </div>
 
+        <div class="card mb-3">
+          <div class="card-body py-3">
+            <div class="d-flex flex-wrap gap-3 align-items-baseline">
+              <div><strong>Grand total :</strong> <span id="onekite-acc-grand-total">0.00</span> €</div>
+              <div class="text-muted">(<span id="onekite-acc-paid-count">0</span> location(s) payée(s) • <span id="onekite-acc-free-count">0</span> sortie(s) gratuite(s))</div>
+            </div>
+          </div>
+        </div>
+
         <h5>Résumé par matériel</h5>
         <div class="table-responsive">
           <table class="table table-sm" id="onekite-acc-summary">

package/pkg/package/CHANGELOG.md

@@ -1,106 +0,0 @@
-# Changelog – calendar-onekite
-
-## 1.3.6
-- ACP Comptabilisation : ajout d’un tableau séparé « Détails des sorties gratuites » (avec le nom du matériel).
-- Mobile FAB : la modale utilise maintenant des champs date avec calendrier (type="date") et empêche toute réservation pour le jour même ou dans le passé.
-
-## 1.3.5
-- ACP : ajout d’un paramètre « Location longue durée (jours) pour validateurs ». Si une réservation faite par un validateur dépasse ce nombre de jours, elle redevient payante et suit le workflow normal (demande → validation → paiement HelloAsso). Mets 0 pour conserver le comportement « toujours gratuit ».
-
-## 1.3.4
-- Réservations gratuites (validateurs) : ne sont plus comptées comme chiffre d’affaires dans la comptabilisation. Elles apparaissent désormais sur une ligne séparée « Sorties gratuites » (et sont marquées (gratuit) dans le détail).
-
-## 1.3.3
-- Comptabilité : les réservations « auto-checkées » (réservations faites par un validateur) recalculent désormais le total côté serveur (catalogue HelloAsso × nb jours calendaires) afin d’être comptabilisées correctement.
-
-## 1.3.2
-- Les membres validateurs (ceux qui peuvent valider/supprimer une demande) voient leurs propres réservations passer directement en statut payé/checked (pas de workflow paiement).
-- UI : message de succès adapté (réservation confirmée).
-
-## 1.3.1
-- ACP : ajout de 2 actions rapides dans l’onglet Maintenance : « Tout mettre en maintenance » et « Tout enlever de maintenance » (avec audit).
-
-## 1.3.0
-- Maintenance (sans dates) : blocage manuel ON/OFF par matériel (ACP + API). Les matériels en maintenance sont grisés et affichés comme : 🔧 Nom (en maintenance).
-- Audit : journal des actions (demande, validation, refus, annulation, maintenance) avec consultation et purge par année (ACP + API).
-
-## 1.2.18
-- API events + anti double booking : les tests de chevauchement utilisent désormais en priorité startDate/endDate (YYYY-MM-DD) quand disponibles (logique calendaire pure, endDate exclusive). Cela supprime définitivement les faux chevauchements liés aux timestamps/fuseaux/DST, notamment sur mobile et « Durée rapide ».
-
-## 1.2.17
-- Modale réservation : la requête de disponibilité initiale utilise aussi des dates calendaires (YYYY-MM-DD) au lieu de startStr/endStr/toISOString(), ce qui corrige le grisé erroné (mobile + durée rapide).
-
-## 1.2.16
-- Modale réservation (Durée rapide) : correction du grisé erroné des matériels réservés la veille. Les requêtes de disponibilité utilisent désormais des dates calendaires (YYYY-MM-DD) au lieu de toISOString() (UTC), pour éviter tout faux chevauchement lié au fuseau/DST.
-
-## 1.2.15
-- Réservations (Durée rapide) : génération des évènements all-day basée sur startDate/endDate (YYYY-MM-DD) quand disponibles, pour éviter tout décalage lié à toISOString() (UTC) et empêcher un grisé « non disponible » le jour suivant.
-
-## 1.2.14
-- Réservations : correction d’un faux chevauchement (problème 1h) quand FullCalendar envoie des bornes all-day à minuit UTC (Z / +00:00) — le lendemain n’est plus marqué « non disponible ».
-
-## 1.2.13
-- ACP (mode sombre) : correction de la visibilité de la liste d’autocomplete d’adresse (couleurs via variables Bootstrap)
-
-## 1.2.12
-- Modales (calendrier + ACP) : autocomplete adresse rendu identique et compatible Bootstrap input-group (plus de wrapper qui casse l’affichage)
-
-## 1.2.11
-- ACP : ajout de la recherche automatique d’adresse (autocomplete Nominatim) dans la modale de validation (unitaire + batch), comme sur le calendrier
-
-## 1.2.10
-- HelloAsso : calcul des jours 100% fiable (différence en jours calendaires Y/M/J, sans dépendance aux heures/au fuseau/DST)
-- FullCalendar : endDate traitée comme exclusive partout (UI + checkout)
-- HelloAsso : montant du checkout recalculé côté serveur à partir du catalogue (prix/jour × nbJours)
-
-## 1.2.9
-- Modale réservation : retour du grisé des matériels indisponibles (API events expose à nouveau itemIds)
-
-## 1.2.8
-- Popup réservation : correction « Durée rapide » (la période envoyée correspond bien à la durée sélectionnée)
-
-## 1.2.7
-- UI : suppression du bouton flottant mobile « + Réserver »
-- Client : nettoyage du code associé (suppression du bloc FAB)
-
-## 1.2.6
-- ACP : anti double action (verrou UI + boutons désactivés/spinner) sur valider/refuser (unitaire + batch)
-
-## 1.2.5
-- Mobile : bouton flottant « + Réserver »
-- Création : anti double-tap/click (verrou actions) + invalidation cache events + refetch léger
-- Calendrier : jours passés / aujourd’hui affichés comme non-sélectionnables (règle visuelle)
-- Popup réservation : raccourcis de durée (1j/2j/3j/7j) + recalcul total + mise à jour des matériels bloqués
-- ACP : actions en batch (valider/refuser une sélection) + compteur de sélection
-- API : idempotence sur valider/refuser + audit enrichi (refusedBy, cancelledByUsername)
-
-## 1.0.3
-- Suppression du texte d’archivage dans le toast de purge (plus de « 0 archivés »)
-- Renommage du plugin : nodebb-plugin-onekite-calendar
-- Discord : notification « ❌ Réservation annulée » (annulation manuelle + annulation automatique) + option ACP
-
-## 1.0.2
-- Purge calendrier : suppression réelle des réservations (aucune logique d’archivage)
-- Compta conservée séparément (la purge n’y touche jamais)
-
-## 1.0.1
-- ACP : modales Valider / Refuser OK (plus de retour au premier onglet)
-- Scheduler : optimisation (batch DB, scans réduits)
-- API events : pagination interne + ETag optimisé
-- HelloAsso : token mis en cache + protection rate-limit (429 / Cloudflare 1015), sans logs supplémentaires
-- Discord : notifications en embeds + icônes ⏳ (demande) et 💳 (paiement)
-- Widget : suppression de “2 semaines” dans le titre affiché
-- Correctifs divers de stabilité/performance (dont crash au démarrage)
-
-## 1.0.0
-- Première version stable du plugin calendar-onekite
-- Gestion des réservations de matériel avec contrôle de disponibilité
-- Calendrier FullCalendar via CDN
-- Validation / refus des demandes depuis l’ACP
-- Notifications Discord
-- Intégration paiements HelloAsso
-
-## 1.2.19
-- Mobile: ajout d’un bouton flottant (FAB) sur la page calendrier uniquement.
-- Le FAB ouvre une mini-modale de sélection de dates (dd/mm/yyyy) puis ouvre la modale standard de réservation.
-- Le FAB est automatiquement retiré quand on navigue hors de la page calendrier.