Agregue calendario, trendria q dejar de usar cdn y nose si algo mas.

2026-02-20 18:36:06 -03:00
parent e8bece9037
commit 8102265f92
8 changed files with 532 additions and 242 deletions
@@ -1,6 +1,6 @@
 import './bootstrap';
 // 1. Importar jQuery
-import jQuery from 'jquery';
+import jQuery, { ready } from 'jquery';

 // 2. Hacerlo global (IMPORTANTE para que funcione $(document).ready en Blade)
 window.$ = window.jQuery = jQuery;
@@ -11,3 +11,102 @@ select2(); // Inicializar el plugin

 // 4. Importar los estilos de Select2 (Opcional aquí, o en CSS)
 import 'select2/dist/css/select2.css';
+
+import { Calendar } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const calendarEl = document.getElementById('calendar')
+
+    if (!calendarEl) return
+
+    const calendar = new Calendar(calendarEl, {
+        plugins: [dayGridPlugin, interactionPlugin],
+
+        initialView: 'dayGridMonth',
+        locale: 'es',
+
+        buttonText: {
+            today: 'Volver a Hoy'
+        },
+
+        displayEventTime: false,
+        contentHeight: 'auto',
+        eventDisplay: 'block',
+        fixedWeekCount: false,
+
+        selectable: true,
+
+        /*
+        dateClick: function(info) {
+            let fecha = info.dateStr
+            window.location.href = `/agenda/dia/${fecha}`
+        },
+        */
+
+        eventClick: function(info) {
+
+            const evento = info.event
+
+            const modal = document.getElementById("eventModal")
+            if (!modal) return
+
+            modal.classList.remove("hidden")
+
+            document.getElementById("modalTitle").innerText =
+                evento.extendedProps.description + " - " +
+                evento.extendedProps.status
+
+            const fecha = evento.start
+
+            const hora = fecha.toLocaleTimeString("es-AR", {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: false
+            })
+
+            document.getElementById("modalDate").innerText =
+                "Hora: " + hora 
+                
+            document.getElementById("viewEventBtn").href =
+                "/appointments/" + evento.id
+        },
+
+        events: window.appointments ?? [],
+
+        eventDidMount: function(info) {
+
+            const status = info.event.extendedProps.status
+
+            const colors = {
+                pending: '#f59e0b',
+                in_progress: '#ef4444',
+                completed: '#22c55e',
+                ready: '#22c55e',
+                delivered: '#22c55e'
+            }
+
+            const color = colors[status] ?? '#3b82f6'
+
+            info.event.setProp('backgroundColor', color)
+            info.event.setProp('borderColor', color)
+            info.event.setProp('textColor', '#ffffff')
+        }
+
+    })
+
+    calendar.render()
+
+    const closeBtn = document.getElementById("closeModal")
+
+    if (closeBtn) {
+        closeBtn.addEventListener("click", function () {
+            document.getElementById("eventModal").classList.add("hidden")
+            document.body.style.overflow = "auto"
+        })
+    }
+
+})
+