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

resources/css/app.css

@@ -49,4 +49,25 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #ccff00; /* Verde Neón */
+}
+
+.fc .fc-button-primary {
+    background-color: #ccff00 !important; /* neon lime */
+    border-color: #ccff00 !important;
+    color: #000 !important;
+}
+
+.fc .fc-button-primary:hover {
+    background-color: #b3e600 !important;
+    border-color: #b3e600 !important;
+}
+
+.fc .fc-button-primary:disabled {
+    background-color: #444 !important;
+    border-color: #444 !important;
+    color: #aaa !important;
+}
+
+.fc-daygrid-event-dot {
+    display: none;
 }

resources/js/app.js

@@ -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"
+        })
+    }
+
+})
+

resources/views/agenda.blade.php

@@ -0,0 +1,51 @@
+<x-layout title="Agenda">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/main.min.css">
+
+    <div class="flex w-full justify-between items-end mb-6">
+
+        <div>
+            <x-section-header 
+                subtitle="Gestor de Eventos" 
+                title="Agenda" 
+                highlight="Lauck" 
+            />
+        </div>
+    
+        <a href="{{ route('taller.index') }}" 
+           class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
+            Volver a Taller
+        </a>
+        
+    </div>
+
+    <script>
+        window.appointments = @json($appointments);
+    </script>
+    
+    <div id="calendar" class="w-full border-2 rounded-xl py-3 px-3 bg-neutral-900/50 border border-neutral-800"></div>
+
+</x-layout>
+
+<div id="eventModal"
+     class="hidden fixed inset-0 z-50 flex items-center justify-center">
+
+    <div class="relative text-white p-6 rounded-xl w-96 shadow-2xl border-2 bg-neutral-900 border border-neutral-800">
+
+        <h2 id="modalTitle" class="text-xl font-bold mb-2"></h2>
+
+        <p id="modalDate" class="text-gray-300 mb-4"></p>
+
+        <div class="flex justify-end gap-2">
+            <button id="closeModal"
+                class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg">
+                Cerrar
+            </button>
+
+            <a id="viewEventBtn"
+               href=""
+               class="px-4 py-2 bg-neon-lime hover:bg-[#b3e600] text-neutral-900 font-bold rounded-lg">
+                Ver turno
+            </a>
+        </div>
+    </div>
+</div>

resources/views/taller/index.blade.php

@@ -8,7 +8,12 @@
         </div>
     @endif
     
-    <div class="flex w-full justify-end items-end mb-4">
+    <div class="flex w-full justify-end items-end mb-4 gap-x-2">
+        <a href="{{ route('agenda') }}" 
+           class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
+            Ver Agenda
+        </a>
+        
         <a href="{{ route('taller.create') }}" class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
             + Ingresar Bici
         </a>