nodebb-plugin-onekite-calendar 2.0.49 → 2.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-onekite-calendar",
-  "version": "2.0.49",
+  "version": "2.0.51",
   "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.49"
+  "version": "2.0.51"
 }

package/public/client.js

@@ -84,12 +84,12 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
 
 /* 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 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
 .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 var(--bs-border-color, rgba(0,0,0,.18)); 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-weekdays div { text-align:center; font-size:.8rem; opacity:.7; padding:1px 0; }
+.onekite-range-day { border:1px solid var(--bs-border-color, rgba(0,0,0,.18)); border-radius:10px; padding:6px 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 {
@@ -111,7 +111,11 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
   .onekite-range-day.is-inrange { background: rgba(255,255,255,.08); }
   .onekite-range-day.is-start, .onekite-range-day.is-end { background: rgba(255,255,255,.14); color: var(--bs-body-color,#f8f9fa); border-color: var(--bs-border-color, rgba(255,255,255,.22)); }
 }
-.onekite-range-summary { margin-top:10px; font-size:.9rem; }
+.onekite-range-summary { margin-top:6px; font-size:.9rem; }
+
+/* Compact spacing inside the FAB creation wizard */
+.onekite-wiz-type .text-muted { margin-bottom: .25rem !important; }
+.onekite-wiz-type .btn { padding: .35rem .75rem; }
 
 `;
       document.head.appendChild(style);
@@ -134,6 +138,8 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
   // calendar instance and capability flags). The mobile FAB is mounted outside
   // init(), so we store the handler here.
   let createFromSelectionHandler = null;
+  // Unified creation wizard (date range + type) used by the mobile FAB.
+  let openCreateWizardHandler = null;
 
   // Mobile FAB (mounted only on the calendar page)
   let fabEl = null;
@@ -1335,116 +1341,162 @@ function toDatetimeLocalValue(date) {
         }
       }
 
-      // Buttons order matters for UX: put "Annuler" at bottom-right (last).
-      const buttons = {};
-
-      if (canCreateReservation) buttons.location = {
-        label: 'Location',
-        className: 'btn-onekite-location',
-        callback: async () => {
-            try {
-              isDialogOpen = true;
-              if (!items || !items.length) {
-                showAlert('error', 'Aucun matériel disponible (items HelloAsso non chargés).');
-                return;
-              }
-              const chosen = await openReservationDialog(info, items);
-              if (!chosen || !chosen.itemIds || !chosen.itemIds.length) return;
-              const startDate = toLocalYmd(info.start);
-              const endDate = (chosen && chosen.endDate) ? String(chosen.endDate) : toLocalYmd(info.end);
-              const resp = await requestReservation({
-                title: (chosen && chosen.title) ? String(chosen.title) : '',
-                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();
-              scheduleRefetch(calendar);
-            } catch (e) {
-              handleCreateError(e);
-            } finally {
-              try { calendar.unselect(); } catch (e) {}
-              isDialogOpen = false;
+      // Single entry modal: pick date(s) + choose type (FAB & calendar),
+      // then open the dedicated form dialog.
+      await openCreateWizardModal({
+        initialSelection: info,
+        // When the user clicks/selects on the main calendar, we already have
+        // the date(s) and should not show the mini date picker (FAB only).
+        showDatePicker: false,
+        canCreateReservation,
+        canCreateOuting,
+        canCreateSpecial,
+        onCreateLocation: async (sel) => {
+          try {
+            if (!items || !items.length) {
+              showAlert('error', 'Aucun matériel disponible (items HelloAsso non chargés).');
+              return;
             }
-            return true;
-        },
-      };
-
-      if (canCreateOuting) buttons.outing = {
-        label: 'Prévision de sortie',
-        className: 'btn-onekite-outing',
-        callback: async () => {
-            try {
-              isDialogOpen = true;
-              const payload = await openOutingDialog(info);
-              if (!payload) return;
-              await fetchJson('/api/v3/plugins/calendar-onekite/outings', {
-                method: 'POST',
-                body: JSON.stringify(payload),
-              });
-              showAlert('success', 'Prévision de sortie créée.');
-              invalidateEventsCache();
-              scheduleRefetch(calendar);
-            } catch (e) {
-              handleCreateError(e);
-            } finally {
-              try { calendar.unselect(); } catch (e) {}
-              isDialogOpen = false;
+            const chosen = await openReservationDialog(sel, items);
+            if (!chosen || !chosen.itemIds || !chosen.itemIds.length) return;
+            const startDate = toLocalYmd(sel.start);
+            const endDate = (chosen && chosen.endDate) ? String(chosen.endDate) : toLocalYmd(sel.end);
+            const resp = await requestReservation({
+              title: (chosen && chosen.title) ? String(chosen.title) : '',
+              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).');
             }
-            return true;
+            invalidateEventsCache();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            handleCreateError(e);
+          } finally {
+            try { calendar.unselect(); } catch (e) {}
+          }
+        },
+        onCreateOuting: async (sel) => {
+          try {
+            const payload = await openOutingDialog(sel);
+            if (!payload) return;
+            await fetchJson('/api/v3/plugins/calendar-onekite/outings', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            });
+            showAlert('success', 'Prévision de sortie créée.');
+            invalidateEventsCache();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            handleCreateError(e);
+          } finally {
+            try { calendar.unselect(); } catch (e) {}
+          }
+        },
+        onCreateSpecial: async (sel) => {
+          try {
+            const payload = await openSpecialEventDialog(sel);
+            if (!payload) return;
+            await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            });
+            showAlert('success', 'Évènement créé.');
+            invalidateEventsCache();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            handleCreateError(e);
+          } finally {
+            try { calendar.unselect(); } catch (e) {}
+          }
         },
-      };
-
-      if (canCreateSpecial) {
-        buttons.special = {
-          label: 'Évènement',
-          className: 'btn-onekite-special',
-          callback: async () => {
-            try {
-              isDialogOpen = true;
-              const payload = await openSpecialEventDialog(info);
-              if (!payload) return;
-              await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
-                method: 'POST',
-                body: JSON.stringify(payload),
-              }).catch(async () => {
-                return await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
-                  method: 'POST',
-                  body: JSON.stringify(payload),
-                });
-              });
-              showAlert('success', 'Évènement créé.');
-              invalidateEventsCache();
-              scheduleRefetch(calendar);
-            } catch (e) {
-              handleCreateError(e);
-            } finally {
-              try { calendar.unselect(); } catch (e) {}
-              isDialogOpen = false;
-            }
-            return true;
-          },
-        };
-      }
-
-      buttons.cancel = { label: 'Annuler', className: 'btn-danger' };
-
-      bootbox.dialog({
-        title: 'Créer',
-        message: '<div class="text-muted">Que veux-tu créer sur ces dates ?</div>',
-        buttons,
       });
     }
 
     // Expose to the mobile FAB (mounted outside init).
     createFromSelectionHandler = handleCreateFromSelection;
+    openCreateWizardHandler = async () => {
+      // Same pre-checks as calendar creation, but with no initial selection.
+      if (!canCreateReservation && !canCreateOuting && !canCreateSpecial) {
+        showAlert('error', 'Vous devez être adhérent Onekite');
+        return;
+      }
+      await openCreateWizardModal({
+        initialSelection: null,
+        canCreateReservation,
+        canCreateOuting,
+        canCreateSpecial,
+        onCreateLocation: async (sel) => {
+          try {
+            if (!items || !items.length) {
+              showAlert('error', 'Aucun matériel disponible (items HelloAsso non chargés).');
+              return;
+            }
+            const chosen = await openReservationDialog(sel, items);
+            if (!chosen || !chosen.itemIds || !chosen.itemIds.length) return;
+            const startDate = toLocalYmd(sel.start);
+            const endDate = (chosen && chosen.endDate) ? String(chosen.endDate) : toLocalYmd(sel.end);
+            const resp = await requestReservation({
+              title: (chosen && chosen.title) ? String(chosen.title) : '',
+              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();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            // Reuse calendar handler (simplified): show payload message when present
+            const msg = (e && e.payload && (e.payload.message || e.payload.error || e.payload.msg)) ? String(e.payload.message || e.payload.error || e.payload.msg) : '';
+            showAlert('error', msg || 'Erreur lors de la création.');
+          }
+        },
+        onCreateOuting: async (sel) => {
+          try {
+            const payload = await openOutingDialog(sel);
+            if (!payload) return;
+            await fetchJson('/api/v3/plugins/calendar-onekite/outings', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            });
+            showAlert('success', 'Prévision de sortie créée.');
+            invalidateEventsCache();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            const msg = (e && e.payload && (e.payload.message || e.payload.error || e.payload.msg)) ? String(e.payload.message || e.payload.error || e.payload.msg) : '';
+            showAlert('error', msg || 'Erreur lors de la création.');
+          }
+        },
+        onCreateSpecial: async (sel) => {
+          try {
+            const payload = await openSpecialEventDialog(sel);
+            if (!payload) return;
+            await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            });
+            showAlert('success', 'Évènement créé.');
+            invalidateEventsCache();
+            scheduleRefetch(calendar);
+          } catch (e) {
+            const msg = (e && e.payload && (e.payload.message || e.payload.error || e.payload.msg)) ? String(e.payload.message || e.payload.error || e.payload.msg) : '';
+            showAlert('error', msg || 'Erreur lors de la création.');
+          }
+        },
+      });
+    };
 
     calendar = new FullCalendar.Calendar(el, {
       initialView: 'dayGridMonth',
@@ -2206,10 +2258,21 @@ function toDatetimeLocalValue(date) {
   }
 
   
-async function openFabDatePicker(onSelection) {
-  if (!lockAction('fab-date-picker', 700)) return;
+async function openCreateWizardModal(opts) {
+  if (!lockAction('create-wizard', 700)) return;
+
+  const options = opts || {};
+  const canCreateReservation = !!options.canCreateReservation;
+  const canCreateOuting = !!options.canCreateOuting;
+  const canCreateSpecial = !!options.canCreateSpecial;
 
-  // Cannot book past dates (mobile FAB). Same-day booking is allowed.
+  // Only the mobile FAB should show the mini range picker calendar.
+  // For calendar interactions (date click / range select), we already know
+  // the selected dates, so we can skip the mini calendar and jump straight
+  // to the type chooser.
+  const showDatePicker = options.showDatePicker !== false;
+
+  // Cannot create in the past (wizard). Same-day is allowed.
   const today = new Date();
   today.setHours(0, 0, 0, 0);
   const minStart = new Date(today);
@@ -2225,86 +2288,86 @@ async function openFabDatePicker(onSelection) {
     end: null, // inclusive
   };
 
-  const html = `
-    <div class="onekite-range-picker" id="onekite-range-picker">
+  // No auto-scroll: keep the modal stable and compact.
+
+  // Pre-fill from an existing FullCalendar selection (end is exclusive)
+  try {
+    const initial = options.initialSelection;
+    if (initial && initial.start) {
+      const s = new Date(initial.start);
+      s.setHours(0, 0, 0, 0);
+      state.start = s;
+      if (initial.end) {
+        const eEx = new Date(initial.end);
+        eEx.setHours(0, 0, 0, 0);
+        // end inclusive = end exclusive - 1 day
+        const e = new Date(eEx);
+        e.setDate(e.getDate() - 1);
+        if (e.getTime() >= s.getTime()) {
+          state.end = e;
+        }
+      }
+      state.cursor = new Date(s);
+      state.cursor.setDate(1);
+    }
+  } catch (e) {}
+
+  function summaryText() {
+    if (!state.start) return 'Aucune date sélectionnée.';
+    const startTxt = formatDdMmYyyy(state.start);
+    const endTxt = formatDdMmYyyy(state.end || state.start);
+    return (state.end && !sameDay(state.start, state.end))
+      ? `Du ${startTxt} au ${endTxt}`
+      : `Le ${startTxt}`;
+  }
+
+  const datePickerHtml = showDatePicker ? `
       <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>
+        <button type="button" class="btn btn-outline-secondary btn-sm" id="onekite-wiz-prev" aria-label="Mois précédent">&lsaquo;</button>
+        <div class="onekite-range-month" id="onekite-wiz-month"></div>
+        <button type="button" class="btn btn-outline-secondary btn-sm" id="onekite-wiz-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 passées sont désactivées.</div>
+      <div class="onekite-range-grid" id="onekite-wiz-grid"></div>
+      <div class="onekite-range-summary" id="onekite-wiz-summary"></div>
+
+      <hr class="my-2" />
+  ` : `
+      <div class="onekite-range-summary" id="onekite-wiz-summary-static"><strong>${escapeHtml(summaryText())}</strong></div>
+      <hr class="my-2" />
+  `;
+
+  const html = `
+    <div class="onekite-range-picker" id="onekite-wiz-root">
+      ${datePickerHtml}
+
+      <div id="onekite-wiz-type" class="onekite-wiz-type">
+        <div class="text-muted mb-1">Que veux-tu créer sur cette/ces date(s) ?</div>
+        <div class="d-flex flex-wrap gap-2 justify-content-center">
+          ${canCreateReservation ? '<button type="button" class="btn btn-onekite-location" id="onekite-wiz-btn-location">Location</button>' : ''}
+          ${canCreateOuting ? '<button type="button" class="btn btn-onekite-outing" id="onekite-wiz-btn-outing">Prévision de sortie</button>' : ''}
+          ${canCreateSpecial ? '<button type="button" class="btn btn-onekite-special" id="onekite-wiz-btn-special">Évènement</button>' : ''}
+        </div>
+      </div>
     </div>
   `;
 
   const dlg = bootbox.dialog({
-    title: 'Choisir une période',
+    title: 'Créer',
     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);
-
-          // If a callback is provided, delegate the next step (chooser).
-          if (typeof onSelection === 'function') {
-            try { onSelection({ start: s, end: endExcl, allDay: true }); } catch (e) {}
-            return true;
-          }
-
-          (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
-            }
-          })();
-
-          return true;
-        },
-      },
+      cancel: { label: 'Annuler', className: 'btn-danger' },
     },
   });
 
+  // Mark as open to prevent duplicate modals (select/dateClick on mobile)
+  isDialogOpen = true;
+  try {
+    dlg.on('hidden.bs.modal', () => { isDialogOpen = false; });
+  } catch (e) {}
+
   function sameDay(a, b) {
     return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
   }
@@ -2324,9 +2387,10 @@ async function openFabDatePicker(onSelection) {
   }
 
   function render() {
-    const monthEl = document.getElementById('onekite-range-month');
-    const gridEl = document.getElementById('onekite-range-grid');
-    const sumEl = document.getElementById('onekite-range-summary');
+    if (!showDatePicker) return;
+    const monthEl = document.getElementById('onekite-wiz-month');
+    const gridEl = document.getElementById('onekite-wiz-grid');
+    const sumEl = document.getElementById('onekite-wiz-summary');
     if (!monthEl || !gridEl || !sumEl) return;
 
     monthEl.textContent = monthLabel(state.cursor);
@@ -2417,48 +2481,92 @@ async function openFabDatePicker(onSelection) {
 
   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 (showDatePicker) {
+        const prevBtn = document.getElementById('onekite-wiz-prev');
+        const nextBtn = document.getElementById('onekite-wiz-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();
+          });
+        }
+
+        // Swipe left/right to change month
+        try {
+          const root = document.getElementById('onekite-wiz-root');
+          if (root) {
+            let x0 = null;
+            root.addEventListener('touchstart', (ev) => {
+              try { x0 = ev.touches && ev.touches[0] ? ev.touches && ev.touches[0] ? ev.touches[0].clientX : null : null; } catch (e) { x0 = null; }
+            }, { passive: true });
+            root.addEventListener('touchend', (ev) => {
+              try {
+                if (x0 === null) return;
+                const x1 = ev.changedTouches && ev.changedTouches[0] ? ev.changedTouches[0].clientX : null;
+                if (x1 === null) return;
+                const dx = x1 - x0;
+                if (Math.abs(dx) < 40) return;
+                if (dx < 0) {
+                  state.cursor.setMonth(state.cursor.getMonth() + 1);
+                } else {
+                  state.cursor.setMonth(state.cursor.getMonth() - 1);
+                }
+                render();
+              } catch (e) {}
+              finally { x0 = null; }
+            }, { passive: true });
+          }
+        } catch (e) {}
+      } else {
+        // Keep the static summary in sync (pre-filled by calendar click/selection).
+        try {
+          const el = document.getElementById('onekite-wiz-summary-static');
+          if (el) el.innerHTML = `<strong>${escapeHtml(summaryText())}</strong>`;
+        } catch (e) {}
       }
-      if (nextBtn) {
-        nextBtn.addEventListener('click', () => {
-          state.cursor.setMonth(state.cursor.getMonth() + 1);
-          render();
-        });
+
+      // Wire type buttons
+      function ensureDatesOrToast() {
+        if (!state.start) {
+          showAlert('error', 'Choisis d\'abord une date.');
+          return null;
+        }
+        const s = new Date(state.start);
+        const eIncl = state.end || state.start;
+        const endExcl = new Date(eIncl);
+        endExcl.setDate(endExcl.getDate() + 1);
+        return { start: s, end: endExcl, allDay: true };
       }
 
-      // Swipe left/right to change month
-      try {
-        const root = document.getElementById('onekite-range-picker');
-        if (root) {
-          let x0 = null;
-          root.addEventListener('touchstart', (ev) => {
-            try { x0 = ev.touches && ev.touches[0] ? ev.touches[0].clientX : null; } catch (e) { x0 = null; }
-          }, { passive: true });
-          root.addEventListener('touchend', (ev) => {
-            try {
-              if (x0 === null) return;
-              const x1 = ev.changedTouches && ev.changedTouches[0] ? ev.changedTouches[0].clientX : null;
-              if (x1 === null) return;
-              const dx = x1 - x0;
-              if (Math.abs(dx) < 40) return;
-              if (dx < 0) {
-                state.cursor.setMonth(state.cursor.getMonth() + 1);
-              } else {
-                state.cursor.setMonth(state.cursor.getMonth() - 1);
-              }
-              render();
-            } catch (e) {}
-            finally { x0 = null; }
-          }, { passive: true });
+      async function run(kind) {
+        const sel = ensureDatesOrToast();
+        if (!sel) return;
+        try { dlg.modal('hide'); } catch (e) { try { bootbox.hideAll(); } catch (e2) {} }
+
+        // Delegate to the existing flows (forms) while keeping the wizard
+        // as the single entry-point for date+type selection.
+        if (kind === 'location' && typeof options.onCreateLocation === 'function') {
+          await options.onCreateLocation(sel);
+        } else if (kind === 'outing' && typeof options.onCreateOuting === 'function') {
+          await options.onCreateOuting(sel);
+        } else if (kind === 'special' && typeof options.onCreateSpecial === 'function') {
+          await options.onCreateSpecial(sel);
         }
-      } catch (e) {}
+      }
+
+      document.getElementById('onekite-wiz-btn-location')?.addEventListener('click', () => { run('location'); });
+      document.getElementById('onekite-wiz-btn-outing')?.addEventListener('click', () => { run('outing'); });
+      document.getElementById('onekite-wiz-btn-special')?.addEventListener('click', () => { run('special'); });
+
       render();
+
+      // No auto-scroll: keep the wizard compact and stable.
     } catch (e) {}
   });
 }
@@ -2490,10 +2598,10 @@ function parseYmdDate(ymdStr) {
       fabEl.innerHTML = '<i class="fa fa-plus"></i>';
 
       fabHandler = () => {
-        // init() sets createFromSelectionHandler. If the calendar has not
+        // init() sets openCreateWizardHandler. If the calendar has not
         // finished initialising, do nothing.
-        if (typeof createFromSelectionHandler !== 'function') return;
-        openFabDatePicker(createFromSelectionHandler);
+        if (typeof openCreateWizardHandler !== 'function') return;
+        openCreateWizardHandler();
       };
       fabEl.addEventListener('click', fabHandler);