customized-calendar 1.0.0

package/dist/components/classroom-calendar/CustomizedCalendar.js

@@ -0,0 +1,442 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { formatEventForFullCalendar, convertFullCalendarEventToCalendarEvent, formatDateToString, hexToRgbString, lightenColor, darkenColor, } from './calendar.utils';
+/**
+ * CustomizedCalendar Component
+ *
+ * A modern, reusable calendar component with customizable theme
+ * and support for multiple views, event management, and advanced interactions.
+ */
+const CustomizedCalendar = ({ events, onDateClick, onEventClick, height = 'auto', initialView = 'dayGridMonth', editable = true, selectable = true, selectMirror = true, droppable = true, eventResizableFromStart = true, eventStartEditable = true, eventDurationEditable = true, themeColor = '#3b82f6', // Default blue
+ }) => {
+    const calendarRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    // Generate color variations from theme color
+    const primaryRgb = hexToRgbString(themeColor);
+    const primaryLight = lightenColor(themeColor, 0.15);
+    const primaryDark = darkenColor(themeColor, 0.15);
+    const primaryDarker = darkenColor(themeColor, 0.25);
+    // Handle client-side mounting
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    // Format events for FullCalendar
+    const formattedEvents = events.map(formatEventForFullCalendar);
+    // Custom event content renderer to show batch information
+    const renderEventContent = (eventInfo) => {
+        const batchName = eventInfo.event.extendedProps?.batchName || '';
+        const eventType = eventInfo.event.extendedProps?.type || '';
+        const isAllDay = eventInfo.event.allDay;
+        return (_jsxs("div", { className: "fc-event-main-frame", children: [!isAllDay && eventInfo.timeText && (_jsx("div", { className: "fc-event-time", children: eventInfo.timeText })), _jsxs("div", { className: "fc-event-title-container", children: [_jsx("div", { className: "fc-event-title fc-sticky", children: eventInfo.event.title }), batchName && batchName !== 'All Batches' && (_jsxs("div", { className: "fc-event-batch", children: [_jsx("span", { style: { marginRight: '4px' }, children: "\uD83D\uDCDA" }), batchName] })), eventType && (_jsx("div", { className: "fc-event-type", children: eventType }))] })] }));
+    };
+    // Handle date click
+    const handleDateClick = (info) => {
+        const dateStr = info.dateStr || formatDateToString(info.date);
+        onDateClick(dateStr);
+    };
+    // Handle event click
+    const handleEventClick = (info) => {
+        const calendarEvent = convertFullCalendarEventToCalendarEvent(info.event);
+        onEventClick(calendarEvent);
+    };
+    // Handle event drop (drag & drop)
+    const handleEventDrop = (info) => {
+        const calendarEvent = convertFullCalendarEventToCalendarEvent(info.event);
+        onEventClick(calendarEvent);
+    };
+    // Handle event resize
+    const handleEventResize = (info) => {
+        const calendarEvent = convertFullCalendarEventToCalendarEvent(info.event);
+        onEventClick(calendarEvent);
+    };
+    // Calendar header toolbar configuration
+    const headerToolbar = {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridMonth,timeGridWeek,timeGridDay',
+    };
+    // Button text configuration
+    const buttonText = {
+        today: 'Today',
+        month: 'Month',
+        week: 'Week',
+        day: 'Day',
+    };
+    // If not mounted, return placeholder (for SSR)
+    if (!mounted) {
+        return (_jsx("div", { className: "w-full h-96 bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl flex items-center justify-center border border-gray-200", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 border-4 border-t-transparent rounded-full animate-spin", style: { borderColor: `${themeColor} transparent transparent transparent` } }), _jsx("div", { className: "text-gray-500 font-medium", children: "Loading calendar..." })] }) }));
+    }
+    return (_jsxs("div", { className: "w-full rounded-2xl shadow-2xl border border-gray-200/50 p-4 md:p-6 backdrop-blur-sm", style: {
+            background: `linear-gradient(to bottom right, white, rgba(${primaryRgb}, 0.1), rgba(${primaryRgb}, 0.05))`,
+        }, children: [_jsx("div", { className: "calendar-container", style: {
+                    '--theme-color': themeColor,
+                    '--theme-rgb': primaryRgb,
+                    '--theme-light': primaryLight,
+                    '--theme-dark': primaryDark,
+                    '--theme-darker': primaryDarker,
+                }, children: _jsx(FullCalendar, { ref: calendarRef, plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin], initialView: initialView, headerToolbar: headerToolbar, buttonText: buttonText, height: height, events: formattedEvents, editable: editable, selectable: selectable, selectMirror: selectMirror, droppable: droppable, eventResizableFromStart: eventResizableFromStart, eventStartEditable: eventStartEditable, eventDurationEditable: eventDurationEditable, dateClick: handleDateClick, eventClick: handleEventClick, eventDrop: handleEventDrop, eventResize: handleEventResize, eventContent: renderEventContent, dayMaxEvents: true, moreLinkClick: "popover", eventDisplay: "block", eventTimeFormat: {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        meridiem: 'short',
+                    }, slotMinTime: "06:00:00", slotMaxTime: "22:00:00", allDaySlot: true, nowIndicator: true, weekends: true, firstDay: 1, locale: "en", 
+                    // Custom styling classes
+                    eventClassNames: "rounded-lg shadow-sm cursor-pointer hover:shadow-md transition-shadow duration-200", dayHeaderClassNames: "font-semibold text-gray-700", dayCellClassNames: "hover:bg-gray-50 transition-colors duration-150", 
+                    // Responsive breakpoints
+                    views: {
+                        dayGridMonth: {
+                            dayMaxEvents: 5,
+                            moreLinkClick: 'popover',
+                            eventMinHeight: 20,
+                        },
+                        timeGridWeek: {
+                            slotDuration: '00:30:00',
+                            slotLabelInterval: '01:00:00',
+                        },
+                        timeGridDay: {
+                            slotDuration: '00:30:00',
+                            slotLabelInterval: '01:00:00',
+                        },
+                    } }) }), _jsx("style", { children: `
+        .calendar-container {
+          width: 100%;
+        }
+
+        /* FullCalendar custom styles */
+        .fc {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+          color: #1f2937;
+        }
+
+        .fc-toolbar {
+          margin-bottom: 2rem;
+          padding: 1rem 0;
+          border-bottom: 2px solid rgba(var(--theme-rgb, 59, 130, 246), 0.1);
+        }
+
+        .fc-toolbar-title {
+          font-size: 1.75rem;
+          font-weight: 700;
+          background: linear-gradient(135deg, var(--theme-color, #3b82f6) 0%, var(--theme-light, #8b5cf6) 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          letter-spacing: -0.025em;
+        }
+
+        .fc-button {
+          background: linear-gradient(135deg, var(--theme-color, #3b82f6) 0%, var(--theme-dark, #2563eb) 100%);
+          border: none;
+          color: white;
+          padding: 0.625rem 1.25rem;
+          border-radius: 0.75rem;
+          font-weight: 600;
+          font-size: 0.875rem;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 0 2px 4px rgba(var(--theme-rgb, 59, 130, 246), 0.2);
+          text-transform: none;
+        }
+
+        .fc-button:hover {
+          background: linear-gradient(135deg, var(--theme-dark, #2563eb) 0%, var(--theme-darker, #1d4ed8) 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(var(--theme-rgb, 59, 130, 246), 0.4);
+        }
+
+        .fc-button:active {
+          transform: translateY(0);
+        }
+
+        .fc-button-active {
+          background: linear-gradient(135deg, var(--theme-darker, #1d4ed8) 0%, var(--theme-darker, #1e40af) 100%);
+          box-shadow: 0 4px 12px rgba(var(--theme-rgb, 59, 130, 246), 0.5);
+        }
+
+        .fc-button:focus {
+          outline: none;
+          box-shadow: 0 0 0 4px rgba(var(--theme-rgb, 59, 130, 246), 0.3), 0 4px 12px rgba(var(--theme-rgb, 59, 130, 246), 0.4);
+        }
+
+        .fc-button-primary:not(:disabled):active,
+        .fc-button-primary:not(:disabled).fc-button-active {
+          background: linear-gradient(135deg, var(--theme-darker, #1d4ed8) 0%, var(--theme-darker, #1e40af) 100%);
+        }
+
+        .fc-event {
+          border-radius: 0.75rem;
+          padding: 0.375rem 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          border: none;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          cursor: pointer;
+          backdrop-filter: blur(10px);
+          border-left: 4px solid rgba(255, 255, 255, 0.5);
+          min-height: auto;
+        }
+
+        .fc-event:hover {
+          transform: translateY(-2px) scale(1.02);
+          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
+          z-index: 10;
+        }
+
+        .fc-event-title {
+          font-weight: 600;
+          line-height: 1.3;
+          font-size: 0.8rem;
+        }
+
+        .fc-event-batch {
+          font-weight: 500;
+          line-height: 1.2;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .fc-event-type {
+          font-weight: 500;
+          line-height: 1.2;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+
+        .fc-event-main-frame {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+        }
+
+        .fc-event-title-container {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+        }
+
+        .fc-event-time {
+          font-size: 0.7rem;
+          opacity: 0.95;
+          margin-bottom: 2px;
+          font-weight: 600;
+        }
+
+        .fc-daygrid-day {
+          border-radius: 0.5rem;
+          transition: all 0.2s ease;
+          border: 1px solid transparent;
+        }
+
+        .fc-daygrid-day:hover {
+          background: linear-gradient(135deg, rgba(var(--theme-rgb, 59, 130, 246), 0.05) 0%, rgba(var(--theme-rgb, 59, 130, 246), 0.05) 100%);
+          border-color: rgba(var(--theme-rgb, 59, 130, 246), 0.2);
+        }
+
+        .fc-day-today {
+          background: linear-gradient(135deg, rgba(var(--theme-rgb, 59, 130, 246), 0.1) 0%, rgba(var(--theme-rgb, 59, 130, 246), 0.1) 100%) !important;
+          border: 2px solid rgba(var(--theme-rgb, 59, 130, 246), 0.3) !important;
+          border-radius: 0.5rem;
+        }
+
+        .fc-day-today .fc-daygrid-day-number {
+          background: linear-gradient(135deg, var(--theme-color, #3b82f6) 0%, var(--theme-light, #8b5cf6) 100%);
+          color: white;
+          width: 2rem;
+          height: 2rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          margin: 0.25rem;
+        }
+
+        .fc-daygrid-day-number {
+          padding: 0.5rem;
+          font-weight: 600;
+          color: #4b5563;
+          transition: all 0.2s ease;
+        }
+
+        .fc-daygrid-day:hover .fc-daygrid-day-number {
+          color: var(--theme-color, #3b82f6);
+          transform: scale(1.1);
+        }
+
+        .fc-col-header-cell {
+          padding: 1rem 0.5rem;
+          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+          border-radius: 0.75rem 0.75rem 0 0;
+          border-bottom: 2px solid rgba(var(--theme-rgb, 59, 130, 246), 0.1);
+          font-weight: 700;
+          font-size: 0.875rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: #475569;
+        }
+
+        .fc-timegrid-slot {
+          height: 2.5rem;
+          border-color: rgba(226, 232, 240, 0.8);
+        }
+
+        .fc-timegrid-slot-label {
+          border-color: rgba(226, 232, 240, 0.8);
+          color: #64748b;
+          font-weight: 600;
+          font-size: 0.75rem;
+        }
+
+        .fc-timegrid-now-indicator-line {
+          border-color: #ef4444;
+          border-width: 3px;
+          box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
+        }
+
+        .fc-timegrid-now-indicator-arrow {
+          border-color: #ef4444;
+        }
+
+        .fc-popover {
+          border-radius: 1rem;
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+          border: 1px solid rgba(226, 232, 240, 0.8);
+          backdrop-filter: blur(10px);
+          background: rgba(255, 255, 255, 0.95);
+        }
+
+        .fc-popover-header {
+          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+          border-radius: 1rem 1rem 0 0;
+          padding: 1rem 1.25rem;
+          font-weight: 700;
+          font-size: 0.875rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: #475569;
+          border-bottom: 2px solid rgba(var(--theme-rgb, 59, 130, 246), 0.1);
+        }
+
+        .fc-popover-body {
+          padding: 1rem;
+        }
+
+        .fc-more-link {
+          color: var(--theme-color, #3b82f6);
+          font-weight: 600;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.5rem;
+          transition: all 0.2s ease;
+          background: rgba(var(--theme-rgb, 59, 130, 246), 0.1);
+        }
+
+        .fc-more-link:hover {
+          color: var(--theme-dark, #2563eb);
+          background: rgba(var(--theme-rgb, 59, 130, 246), 0.2);
+          transform: translateX(2px);
+        }
+
+        .fc-scrollgrid {
+          border-color: rgba(226, 232, 240, 0.5);
+        }
+
+        .fc-scrollgrid-section-header > td {
+          border-color: rgba(226, 232, 240, 0.5);
+        }
+
+        .fc-scrollgrid-sync-inner {
+          border-color: rgba(226, 232, 240, 0.3);
+        }
+
+        .fc-daygrid-event {
+          margin: 0.125rem 0.25rem;
+          min-height: 24px;
+        }
+
+        .fc-daygrid-day-events {
+          margin-top: 0.25rem;
+        }
+
+        .fc-daygrid-day-frame {
+          min-height: 100px;
+        }
+
+        .fc-timegrid-event {
+          border-radius: 0.5rem;
+          margin: 0.125rem;
+        }
+
+        .fc-event-main {
+          padding: 0.25rem;
+        }
+
+        /* Smooth animations */
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .fc-view-harness {
+          animation: fadeIn 0.3s ease-out;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+          .fc-toolbar {
+            flex-direction: column;
+            gap: 1rem;
+            padding: 0.75rem 0;
+          }
+
+          .fc-toolbar-title {
+            font-size: 1.5rem;
+          }
+
+          .fc-button {
+            padding: 0.5rem 1rem;
+            font-size: 0.8125rem;
+          }
+
+          .fc-event {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.5rem;
+          }
+
+          .fc-col-header-cell {
+            padding: 0.75rem 0.25rem;
+            font-size: 0.75rem;
+          }
+        }
+
+        /* Custom scrollbar */
+        .fc-scroller::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+
+        .fc-scroller::-webkit-scrollbar-track {
+          background: #f1f5f9;
+          border-radius: 4px;
+        }
+
+        .fc-scroller::-webkit-scrollbar-thumb {
+          background: linear-gradient(135deg, var(--theme-color, #3b82f6) 0%, var(--theme-light, #8b5cf6) 100%);
+          border-radius: 4px;
+        }
+
+        .fc-scroller::-webkit-scrollbar-thumb:hover {
+          background: linear-gradient(135deg, var(--theme-dark, #2563eb) 0%, var(--theme-light, #7c3aed) 100%);
+        }
+      ` })] }));
+};
+export default CustomizedCalendar;

package/dist/components/classroom-calendar/DateEventsList.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CalendarEventExtended, Batch } from '@/data/mock-calendar-data';
+interface DateEventsListProps {
+    date: string;
+    events: CalendarEventExtended[];
+    batches: Batch[];
+    isOpen: boolean;
+    onClose: () => void;
+    onEventClick: (event: CalendarEventExtended) => void;
+    onAddEvent?: () => void;
+}
+declare const DateEventsList: React.FC<DateEventsListProps>;
+export default DateEventsList;
+//# sourceMappingURL=DateEventsList.d.ts.map

package/dist/components/classroom-calendar/DateEventsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateEventsList.d.ts","sourceRoot":"","sources":["../../../components/classroom-calendar/DateEventsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAiC,MAAM,2BAA2B,CAAC;AAGxG,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgNjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/classroom-calendar/DateEventsList.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { getEventsByDate, getBatchById } from '@/data/mock-calendar-data';
+import { EventType } from './calendar.types';
+const DateEventsList = ({ date, events, batches, isOpen, onClose, onEventClick, onAddEvent, }) => {
+    if (!isOpen)
+        return null;
+    const dateEvents = getEventsByDate(date, events);
+    const formattedDate = new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+    const getEventTypeColor = (type) => {
+        switch (type) {
+            case EventType.SESSION:
+                return 'bg-blue-500';
+            case EventType.EVENT:
+                return 'bg-green-500';
+            case EventType.EXAM:
+                return 'bg-red-500';
+            case EventType.HOLIDAY:
+                return 'bg-amber-500';
+            default:
+                return 'bg-gray-500';
+        }
+    };
+    const formatTime = (date) => {
+        const d = new Date(date);
+        return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+    };
+    // Group events by batch
+    const eventsByBatch = dateEvents.reduce((acc, event) => {
+        const batchId = event.batchId;
+        if (!acc[batchId]) {
+            acc[batchId] = [];
+        }
+        acc[batchId].push(event);
+        return acc;
+    }, {});
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto", children: [_jsx("div", { className: "sticky top-0 bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-2xl font-bold mb-1", children: ["Events on ", formattedDate] }), _jsxs("p", { className: "text-blue-100 text-sm", children: [dateEvents.length, " ", dateEvents.length === 1 ? 'event' : 'events', " scheduled"] })] }), _jsx("button", { onClick: onClose, className: "text-white hover:text-gray-200 transition-colors p-2 hover:bg-white/20 rounded-lg", children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }) }), _jsx("div", { className: "p-6", children: dateEvents.length === 0 ? (_jsxs("div", { className: "text-center py-12", children: [_jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-gray-500 text-lg", children: "No events scheduled for this date" }), _jsx("button", { onClick: () => {
+                                    onClose();
+                                    onAddEvent?.();
+                                }, className: "mt-4 px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all", children: "Add Event" })] })) : (_jsx("div", { className: "space-y-6", children: Object.entries(eventsByBatch).map(([batchId, batchEvents]) => {
+                            const batch = getBatchById(batchId, batches);
+                            return (_jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [_jsx("div", { className: "bg-gradient-to-r from-blue-50 to-purple-50 p-4 border-b border-gray-200", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900 text-lg", children: batch?.name || 'All Batches' }), batch && (_jsxs("p", { className: "text-sm text-gray-600 mt-1", children: [batch.code, " \u2022 ", batch.startTime, " - ", batch.endTime, " \u2022 ", batch.currentEnrollment, "/", batch.capacity, " students"] }))] }), batch?.instructor && (_jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-sm text-gray-600", children: "Instructor" }), _jsx("p", { className: "font-semibold text-gray-900", children: batch.instructor.name })] }))] }) }), _jsx("div", { className: "divide-y divide-gray-100", children: batchEvents.map((event) => (_jsx("div", { className: "p-4 hover:bg-gray-50 transition-colors cursor-pointer", onClick: () => onEventClick(event), children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `w-1 h-full min-h-[60px] ${getEventTypeColor(event.type)} rounded` }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("h4", { className: "font-semibold text-gray-900", children: event.title }), _jsx("span", { className: `px-2 py-0.5 rounded text-xs font-semibold ${event.type === EventType.SESSION ? 'bg-blue-100 text-blue-800' :
+                                                                            event.type === EventType.EVENT ? 'bg-green-100 text-green-800' :
+                                                                                event.type === EventType.EXAM ? 'bg-red-100 text-red-800' :
+                                                                                    'bg-amber-100 text-amber-800'}`, children: event.type })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm text-gray-600", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), formatTime(event.start), " - ", formatTime(event.end)] }), event.room && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), event.room.name, " (", event.room.building, ")"] })), event.subject && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" }) }), event.subject.name, " (", event.subject.code, ")"] })), event.instructor && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), event.instructor.name] }))] }), event.description && (_jsx("p", { className: "text-sm text-gray-500 mt-2 line-clamp-2", children: event.description }))] })] }) }, event.id))) })] }, batchId));
+                        }) })) }), _jsxs("div", { className: "sticky bottom-0 bg-gray-50 p-4 rounded-b-2xl flex justify-end gap-3", children: [_jsx("button", { onClick: onClose, className: "px-6 py-2 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition-colors", children: "Close" }), dateEvents.length > 0 && (_jsx("button", { onClick: () => {
+                                onClose();
+                                onAddEvent?.();
+                            }, className: "px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all", children: "Add New Event" }))] })] }) }));
+};
+export default DateEventsList;

package/dist/components/classroom-calendar/EventDetailsModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CalendarEventExtended, Batch } from '@/data/mock-calendar-data';
+interface EventDetailsModalProps {
+    event: CalendarEventExtended;
+    batch?: Batch;
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const EventDetailsModal: React.FC<EventDetailsModalProps>;
+export default EventDetailsModal;
+//# sourceMappingURL=EventDetailsModal.d.ts.map

package/dist/components/classroom-calendar/EventDetailsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDetailsModal.d.ts","sourceRoot":"","sources":["../../../components/classroom-calendar/EventDetailsModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAA4B,MAAM,2BAA2B,CAAC;AAEnG,UAAU,sBAAsB;IAC9B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwMvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/classroom-calendar/EventDetailsModal.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EventType } from './calendar.types';
+const EventDetailsModal = ({ event, batch, isOpen, onClose }) => {
+    if (!isOpen)
+        return null;
+    const getEventTypeBadgeColor = (type) => {
+        switch (type) {
+            case EventType.SESSION:
+                return 'bg-blue-100 text-blue-800';
+            case EventType.EVENT:
+                return 'bg-green-100 text-green-800';
+            case EventType.EXAM:
+                return 'bg-red-100 text-red-800';
+            case EventType.HOLIDAY:
+                return 'bg-amber-100 text-amber-800';
+            default:
+                return 'bg-gray-100 text-gray-800';
+        }
+    };
+    const formatTime = (date) => {
+        const d = new Date(date);
+        return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+    };
+    const formatDate = (date) => {
+        const d = new Date(date);
+        return d.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto", children: [_jsx("div", { className: "sticky top-0 bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl", children: _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-2", children: event.title }), _jsx("span", { className: `inline-block px-3 py-1 rounded-full text-sm font-semibold ${getEventTypeBadgeColor(event.type)}`, children: event.type })] }), _jsx("button", { onClick: onClose, className: "text-white hover:text-gray-200 transition-colors p-2 hover:bg-white/20 rounded-lg", children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }) }), _jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 mb-1", children: "Date" }), _jsx("p", { className: "font-semibold text-gray-900", children: formatDate(event.start) })] }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 mb-1", children: "Time" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [formatTime(event.start), " - ", formatTime(event.end)] })] })] }), batch && (_jsxs("div", { className: "bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg", children: [_jsxs("h3", { className: "font-bold text-gray-900 mb-3 flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 20h5v-2a3 3 0 00-3-3H5a3 3 0 00-3 3v2h5m0 0v-2a2 2 0 012-2h6a2 2 0 012 2v2m-7 0h6" }) }), "Batch Information"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Batch Name" }), _jsx("p", { className: "font-semibold text-gray-900", children: batch.name })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Batch Code" }), _jsx("p", { className: "font-semibold text-gray-900", children: batch.code })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Timing" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [batch.startTime, " - ", batch.endTime] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Enrollment" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [batch.currentEnrollment, " / ", batch.capacity] })] })] }), batch.instructor && (_jsxs("div", { className: "mt-3 pt-3 border-t border-blue-200", children: [_jsx("p", { className: "text-gray-600 text-sm", children: "Instructor" }), _jsx("p", { className: "font-semibold text-gray-900", children: batch.instructor.name }), _jsx("p", { className: "text-gray-500 text-sm", children: batch.instructor.email })] }))] })), event.description && (_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900 mb-2", children: "Description" }), _jsx("p", { className: "text-gray-700", children: event.description })] })), event.room && (_jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsxs("h3", { className: "font-bold text-gray-900 mb-3 flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), "Room Information"] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 text-sm", children: [_jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Room" }), _jsx("p", { className: "font-semibold text-gray-900", children: event.room.name })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Building" }), _jsx("p", { className: "font-semibold text-gray-900", children: event.room.building })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Floor" }), _jsxs("p", { className: "font-semibold text-gray-900", children: ["Floor ", event.room.floor] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-gray-600", children: "Capacity" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [event.room.capacity, " seats"] })] })] }), event.room.facilities && event.room.facilities.length > 0 && (_jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200", children: [_jsx("p", { className: "text-gray-600 text-sm mb-2", children: "Facilities" }), _jsx("div", { className: "flex flex-wrap gap-2", children: event.room.facilities.map((facility, index) => (_jsx("span", { className: "px-2 py-1 bg-white rounded text-xs font-medium text-gray-700", children: facility }, index))) })] }))] })), event.subject && (_jsxs("div", { className: "bg-purple-50 p-4 rounded-lg", children: [_jsx("h3", { className: "font-bold text-gray-900 mb-2", children: "Subject" }), _jsx("p", { className: "font-semibold text-gray-900", children: event.subject.name }), _jsxs("p", { className: "text-gray-600 text-sm", children: [event.subject.code, " \u2022 ", event.subject.credits, " Credits"] })] })), event.status && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Status:" }), _jsx("span", { className: `px-3 py-1 rounded-full text-sm font-semibold ${event.status === 'CONFIRMED' ? 'bg-green-100 text-green-800' :
+                                        event.status === 'SCHEDULED' ? 'bg-blue-100 text-blue-800' :
+                                            event.status === 'CANCELLED' ? 'bg-red-100 text-red-800' :
+                                                'bg-gray-100 text-gray-800'}`, children: event.status })] }))] }), _jsxs("div", { className: "sticky bottom-0 bg-gray-50 p-4 rounded-b-2xl flex justify-end gap-3", children: [_jsx("button", { onClick: onClose, className: "px-6 py-2 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition-colors", children: "Close" }), _jsx("button", { onClick: () => {
+                                // Handle edit action
+                                onClose();
+                            }, className: "px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all", children: "Edit Event" })] })] }) }));
+};
+export default EventDetailsModal;

package/dist/components/classroom-calendar/calendar.types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Calendar Event Types
+ */
+export declare enum EventType {
+    SESSION = "SESSION",
+    EVENT = "EVENT",
+    EXAM = "EXAM",
+    HOLIDAY = "HOLIDAY"
+}
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    start: string | Date;
+    end: string | Date;
+    batchId: string;
+    batchName: string;
+    type: EventType;
+    color?: string;
+    extendedProps?: {
+        [key: string]: any;
+    };
+}
+export interface CustomizedCalendarProps {
+    events: CalendarEvent[];
+    onDateClick: (date: string) => void;
+    onEventClick: (event: CalendarEvent) => void;
+    height?: string | number;
+    initialView?: 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay';
+    editable?: boolean;
+    selectable?: boolean;
+    selectMirror?: boolean;
+    droppable?: boolean;
+    eventResizableFromStart?: boolean;
+    eventStartEditable?: boolean;
+    eventDurationEditable?: boolean;
+    themeColor?: string;
+}
+export interface EventClickInfo {
+    event: {
+        id: string;
+        title: string;
+        start: Date;
+        end: Date;
+        extendedProps: {
+            batchId: string;
+            batchName: string;
+            type: EventType;
+            color?: string;
+        };
+    };
+}
+export interface DateClickInfo {
+    date: Date;
+    dateStr: string;
+    allDay: boolean;
+}
+//# sourceMappingURL=calendar.types.d.ts.map

package/dist/components/classroom-calendar/calendar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.types.d.ts","sourceRoot":"","sources":["../../../components/classroom-calendar/calendar.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,aAAa,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,IAAI,CAAC;QACZ,GAAG,EAAE,IAAI,CAAC;QACV,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;YAClB,IAAI,EAAE,SAAS,CAAC;YAChB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB"}

package/dist/components/classroom-calendar/calendar.types.js

@@ -0,0 +1,10 @@
+/**
+ * Calendar Event Types
+ */
+export var EventType;
+(function (EventType) {
+    EventType["SESSION"] = "SESSION";
+    EventType["EVENT"] = "EVENT";
+    EventType["EXAM"] = "EXAM";
+    EventType["HOLIDAY"] = "HOLIDAY";
+})(EventType || (EventType = {}));