Spaces:
Running
Running
Develop a React-based interactive web application that visualizes a 24-hour daily schedule using a circular radial timeline. The timeline acts as a full-day planner where users can view, add, modify, and delete events directly on a clock-like circular interface. Tech Stack: React (TypeScript) SVG or Canvas for rendering the circular timeline TailwindCSS or styled-components for styling Framer Motion for smooth transitions Optional: Zustand or Redux for state management Core Functional Requirements: Circular Time Representation: SVG-based full circle representing 24 hours. Tick marks at each hour; minor ticks for 15/30 min intervals. Time starts at top center (00:00), proceeds clockwise. Schedule Display: Activities visualized as colored arc segments along the circle. Each segment: start time, end time, activity label. Color-coded by category: Sleep, Routine, Work, Meals, Exercise, Custom. Interactivity: Hover on a segment: tooltip with full info. Click: open modal for edit/delete. Click empty space: add new event (start and duration picker). Drag start/end handles to adjust duration live. Drag segment to shift time. Center Display: Shows date (e.g., “Tuesday”) and summary info (e.g., total planned hours). Central "Add Task" button opens time/category input modal. UX/UI Enhancements: Smooth transitions on interaction (Framer Motion). Responsive for mobile and desktop views. Custom themes (dark/light mode). Data Features: Save/load from localStorage or backend. Export to image (PNG) or printable format. Sync with Google Calendar or ICS. Structure Example (TypeScript + React): type ScheduleEntry = { id: string; label: string; start: number; // in hours (e.g., 22.5 for 10:30 PM) end: number; color: string; }; Component Outline: CircularTimeline.tsx – renders the SVG-based timeline. ScheduleSegment.tsx – visual arc for one activity. ScheduleEditorModal.tsx – add/edit UI. useScheduleStore.ts – state logic. Goal: An aesthetically clean, tactile circular scheduler that’s intuitive for managing daily time visually, optimized for both structured planning and spontaneous editing. - Initial Deployment
d8c0e75
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Circular Daily Scheduler</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <style> | |
| .circle-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 600px; | |
| aspect-ratio: 1/1; | |
| margin: 0 auto; | |
| } | |
| .time-tick { | |
| position: absolute; | |
| width: 2px; | |
| height: 12px; | |
| background-color: #64748b; | |
| transform-origin: bottom center; | |
| } | |
| .time-tick.minor { | |
| height: 6px; | |
| background-color: #94a3b8; | |
| } | |
| .time-label { | |
| position: absolute; | |
| font-size: 0.8rem; | |
| color: #64748b; | |
| transform: translate(-50%, -50%); | |
| } | |
| .segment { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| clip-path: circle(50% at 50% 50%); | |
| } | |
| .segment-arc { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%); | |
| opacity: 0.7; | |
| transition: opacity 0.2s; | |
| } | |
| .segment-arc:hover { | |
| opacity: 0.9; | |
| } | |
| .segment-handle { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: white; | |
| border: 2px solid #334155; | |
| cursor: pointer; | |
| z-index: 10; | |
| } | |
| .segment-label { | |
| position: absolute; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.5); | |
| pointer-events: none; | |
| transform-origin: center; | |
| } | |
| .dark .segment-label { | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.8); | |
| } | |
| @media (max-width: 640px) { | |
| .segment-label { | |
| font-size: 0.6rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold">Circular Scheduler</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| </button> | |
| <button id="add-event" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /> | |
| </svg> | |
| Add Event | |
| </button> | |
| </div> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold">Daily Schedule</h2> | |
| <div class="text-sm"> | |
| <span id="current-date" class="font-medium"></span> | |
| </div> | |
| </div> | |
| <div class="circle-container"> | |
| <div id="timeline-circle" class="segment"> | |
| <!-- Time ticks will be added here by JS --> | |
| </div> | |
| <div id="segments-container" class="segment"> | |
| <!-- Event segments will be added here by JS --> | |
| </div> | |
| <div id="center-info" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-full w-32 h-32 flex flex-col items-center justify-center shadow-inner border border-gray-200 dark:border-gray-700"> | |
| <div id="day-name" class="text-lg font-bold"></div> | |
| <div id="total-hours" class="text-sm text-gray-500 dark:text-gray-400 mt-1"></div> | |
| <button id="add-center" class="mt-2 bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded-full"> | |
| Add Event | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 h-full"> | |
| <h2 class="text-xl font-semibold mb-4">Today's Events</h2> | |
| <div id="events-list" class="space-y-3"> | |
| <!-- Events will be listed here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Modal --> | |
| <div id="event-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold" id="modal-title">Add New Event</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <form id="event-form" class="space-y-4"> | |
| <input type="hidden" id="event-id"> | |
| <div> | |
| <label for="event-name" class="block text-sm font-medium mb-1">Event Name</label> | |
| <input type="text" id="event-name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="start-time" class="block text-sm font-medium mb-1">Start Time</label> | |
| <input type="time" id="start-time" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700"> | |
| </div> | |
| <div> | |
| <label for="end-time" class="block text-sm font-medium mb-1">End Time</label> | |
| <input type="time" id="end-time" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="event-category" class="block text-sm font-medium mb-1">Category</label> | |
| <select id="event-category" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700"> | |
| <option value="sleep">Sleep</option> | |
| <option value="routine">Routine</option> | |
| <option value="work">Work</option> | |
| <option value="meals">Meals</option> | |
| <option value="exercise">Exercise</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" id="delete-event" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hidden">Delete</button> | |
| <button type="button" id="cancel-event" class="px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Cancel</button> | |
| <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize theme | |
| if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| } | |
| // Theme toggle | |
| document.getElementById('theme-toggle').addEventListener('click', function() { | |
| if (localStorage.getItem('color-theme')) { | |
| if (localStorage.getItem('color-theme') === 'light') { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('color-theme', 'dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| localStorage.setItem('color-theme', 'light'); | |
| } | |
| } else { | |
| if (document.documentElement.classList.contains('dark')) { | |
| document.documentElement.classList.remove('dark'); | |
| localStorage.setItem('color-theme', 'light'); | |
| } else { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('color-theme', 'dark'); | |
| } | |
| } | |
| }); | |
| // Current date display | |
| const now = new Date(); | |
| const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | |
| const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; | |
| document.getElementById('current-date').textContent = `${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`; | |
| document.getElementById('day-name').textContent = days[now.getDay()]; | |
| // Event categories and colors | |
| const categories = { | |
| sleep: { name: 'Sleep', color: '#3b82f6', darkColor: '#1d4ed8' }, | |
| routine: { name: 'Routine', color: '#10b981', darkColor: '#047857' }, | |
| work: { name: 'Work', color: '#f59e0b', darkColor: '#b45309' }, | |
| meals: { name: 'Meals', color: '#ef4444', darkColor: '#b91c1c' }, | |
| exercise: { name: 'Exercise', color: '#8b5cf6', darkColor: '#7e22ce' }, | |
| custom: { name: 'Custom', color: '#64748b', darkColor: '#475569' } | |
| }; | |
| // Sample events data | |
| let events = JSON.parse(localStorage.getItem('circular-scheduler-events')) || [ | |
| { id: '1', label: 'Sleep', start: 0, end: 7, category: 'sleep' }, | |
| { id: '2', label: 'Breakfast', start: 7, end: 7.5, category: 'meals' }, | |
| { id: '3', label: 'Work', start: 8, end: 12, category: 'work' }, | |
| { id: '4', label: 'Lunch', start: 12, end: 13, category: 'meals' }, | |
| { id: '5', label: 'Work', start: 13, end: 17, category: 'work' }, | |
| { id: '6', label: 'Exercise', start: 17.5, end: 18.5, category: 'exercise' }, | |
| { id: '7', label: 'Dinner', start: 19, end: 20, category: 'meals' }, | |
| { id: '8', label: 'Relax', start: 20, end: 22, category: 'routine' }, | |
| { id: '9', label: 'Sleep', start: 22, end: 24, category: 'sleep' } | |
| ]; | |
| // Save events to localStorage | |
| function saveEvents() { | |
| localStorage.setItem('circular-scheduler-events', JSON.stringify(events)); | |
| } | |
| // Generate unique ID | |
| function generateId() { | |
| return Math.random().toString(36).substr(2, 9); | |
| } | |
| // Convert time string (HH:MM) to decimal hours | |
| function timeToDecimal(time) { | |
| const [hours, minutes] = time.split(':').map(Number); | |
| return hours + minutes / 60; | |
| } | |
| // Convert decimal hours to time string (HH:MM) | |
| function decimalToTime(decimal) { | |
| const hours = Math.floor(decimal); | |
| const minutes = Math.round((decimal - hours) * 60); | |
| return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; | |
| } | |
| // Draw the circular timeline | |
| function drawTimeline() { | |
| const container = document.getElementById('timeline-circle'); | |
| container.innerHTML = ''; | |
| // Draw hour ticks | |
| for (let i = 0; i < 24; i++) { | |
| // Major tick (hour) | |
| const tick = document.createElement('div'); | |
| tick.className = 'time-tick'; | |
| tick.style.transform = `rotate(${i * 15}deg) translateY(-50%)`; | |
| tick.style.left = '50%'; | |
| tick.style.top = '0'; | |
| container.appendChild(tick); | |
| // Hour label | |
| const label = document.createElement('div'); | |
| label.className = 'time-label'; | |
| label.textContent = i === 0 ? '12 AM' : i < 12 ? `${i} AM` : i === 12 ? '12 PM' : `${i - 12} PM`; | |
| // Position label | |
| const angle = i * 15; | |
| const radius = 45; | |
| const x = 50 + radius * Math.sin(angle * Math.PI / 180); | |
| const y = 50 - radius * Math.cos(angle * Math.PI / 180); | |
| label.style.left = `${x}%`; | |
| label.style.top = `${y}%`; | |
| container.appendChild(label); | |
| // Minor ticks (15 and 45 minutes) | |
| for (let j = 1; j < 4; j++) { | |
| const minorTick = document.createElement('div'); | |
| minorTick.className = 'time-tick minor'; | |
| minorTick.style.transform = `rotate(${i * 15 + j * 15}deg) translateY(-50%)`; | |
| minorTick.style.left = '50%'; | |
| minorTick.style.top = '0'; | |
| container.appendChild(minorTick); | |
| } | |
| } | |
| } | |
| // Draw event segments | |
| function drawSegments() { | |
| const container = document.getElementById('segments-container'); | |
| container.innerHTML = ''; | |
| // Calculate total planned hours | |
| let totalHours = 0; | |
| events.forEach(event => { | |
| const duration = event.end - event.start; | |
| totalHours += duration; | |
| const startAngle = event.start * 15; | |
| const endAngle = event.end * 15; | |
| const midAngle = (startAngle + endAngle) / 2; | |
| // Create arc segment | |
| const arc = document.createElement('div'); | |
| arc.className = 'segment-arc'; | |
| arc.style.backgroundColor = document.documentElement.classList.contains('dark') | |
| ? categories[event.category].darkColor | |
| : categories[event.category].color; | |
| // Position the arc | |
| arc.style.transform = `rotate(${startAngle}deg)`; | |
| arc.style.clipPath = `polygon(50% 50%, 50% 0%, ${startAngle < 180 ? '100%' : '0%'} 0%, ${startAngle < 180 ? '100%' : '0%'} 100%, 50% 100%)`; | |
| arc.style.width = `${100 - (duration / 24 * 20)}%`; | |
| arc.style.height = `${100 - (duration / 24 * 20)}%`; | |
| arc.style.left = `${(duration / 24 * 10)}%`; | |
| arc.style.top = `${(duration / 24 * 10)}%`; | |
| // Add event data as attributes | |
| arc.setAttribute('data-event-id', event.id); | |
| // Add click handler | |
| arc.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| openEditModal(event.id); | |
| }); | |
| container.appendChild(arc); | |
| // Add start handle | |
| const startHandle = document.createElement('div'); | |
| startHandle.className = 'segment-handle'; | |
| startHandle.setAttribute('data-event-id', event.id); | |
| startHandle.setAttribute('data-handle-type', 'start'); | |
| const startRadius = 45; | |
| const startX = 50 + startRadius * Math.sin(startAngle * Math.PI / 180); | |
| const startY = 50 - startRadius * Math.cos(startAngle * Math.PI / 180); | |
| startHandle.style.left = `${startX}%`; | |
| startHandle.style.top = `${startY}%`; | |
| // Add drag functionality | |
| makeDraggable(startHandle, 'start', event.id); | |
| container.appendChild(startHandle); | |
| // Add end handle | |
| const endHandle = document.createElement('div'); | |
| endHandle.className = 'segment-handle'; | |
| endHandle.setAttribute('data-event-id', event.id); | |
| endHandle.setAttribute('data-handle-type', 'end'); | |
| const endRadius = 45; | |
| const endX = 50 + endRadius * Math.sin(endAngle * Math.PI / 180); | |
| const endY = 50 - endRadius * Math.cos(endAngle * Math.PI / 180); | |
| endHandle.style.left = `${endX}%`; | |
| endHandle.style.top = `${endY}%`; | |
| // Add drag functionality | |
| makeDraggable(endHandle, 'end', event.id); | |
| container.appendChild(endHandle); | |
| // Add label | |
| if (duration >= 0.5) { // Only show label if duration is at least 30 minutes | |
| const label = document.createElement('div'); | |
| label.className = 'segment-label'; | |
| label.textContent = event.label; | |
| label.setAttribute('data-event-id', event.id); | |
| const labelRadius = 30; | |
| const labelX = 50 + labelRadius * Math.sin(midAngle * Math.PI / 180); | |
| const labelY = 50 - labelRadius * Math.cos(midAngle * Math.PI / 180); | |
| label.style.left = `${labelX}%`; | |
| label.style.top = `${labelY}%`; | |
| label.style.transform = `rotate(${midAngle > 90 && midAngle < 270 ? midAngle + 180 : midAngle}deg)`; | |
| container.appendChild(label); | |
| } | |
| }); | |
| // Update total hours display | |
| document.getElementById('total-hours').textContent = `${totalHours.toFixed(1)}h planned`; | |
| // Update events list | |
| updateEventsList(); | |
| } | |
| // Make handles draggable | |
| function makeDraggable(handle, type, eventId) { | |
| let isDragging = false; | |
| let startX, startY; | |
| handle.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| startX = e.clientX; | |
| startY = e.clientY; | |
| e.preventDefault(); | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| const container = document.querySelector('.circle-container'); | |
| const rect = container.getBoundingClientRect(); | |
| const centerX = rect.left + rect.width / 2; | |
| const centerY = rect.top + rect.height / 2; | |
| // Calculate angle from center to mouse position | |
| const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI + 90; | |
| const normalizedAngle = (angle + 360) % 360; | |
| // Convert angle to time (0-24 hours) | |
| const time = normalizedAngle / 15; | |
| // Update the event | |
| const eventIndex = events.findIndex(e => e.id === eventId); | |
| if (eventIndex !== -1) { | |
| if (type === 'start') { | |
| // Don't allow start time to be after end time | |
| if (time < events[eventIndex].end) { | |
| events[eventIndex].start = Math.max(0, Math.min(24, time)); | |
| } | |
| } else { | |
| // Don't allow end time to be before start time | |
| if (time > events[eventIndex].start) { | |
| events[eventIndex].end = Math.max(0, Math.min(24, time)); | |
| } | |
| } | |
| // Redraw segments | |
| drawSegments(); | |
| } | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| if (isDragging) { | |
| isDragging = false; | |
| saveEvents(); | |
| } | |
| }); | |
| } | |
| // Update events list | |
| function updateEventsList() { | |
| const listContainer = document.getElementById('events-list'); | |
| listContainer.innerHTML = ''; | |
| // Sort events by start time | |
| const sortedEvents = [...events].sort((a, b) => a.start - b.start); | |
| sortedEvents.forEach(event => { | |
| const eventElement = document.createElement('div'); | |
| eventElement.className = 'flex items-start p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer'; | |
| eventElement.style.borderLeft = `4px solid ${document.documentElement.classList.contains('dark') | |
| ? categories[event.category].darkColor | |
| : categories[event.category].color}`; | |
| eventElement.setAttribute('data-event-id', event.id); | |
| eventElement.innerHTML = ` | |
| <div class="flex-1"> | |
| <div class="font-medium">${event.label}</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">${decimalToTime(event.start)} - ${decimalToTime(event.end)}</div> | |
| </div> | |
| <div class="text-xs px-2 py-1 rounded-full" style="background-color: ${document.documentElement.classList.contains('dark') | |
| ? categories[event.category].darkColor | |
| : categories[event.category].color}; color: white;"> | |
| ${categories[event.category].name} | |
| </div> | |
| `; | |
| eventElement.addEventListener('click', () => { | |
| openEditModal(event.id); | |
| }); | |
| listContainer.appendChild(eventElement); | |
| }); | |
| } | |
| // Modal functions | |
| function openAddModal() { | |
| document.getElementById('modal-title').textContent = 'Add New Event'; | |
| document.getElementById('event-id').value = ''; | |
| document.getElementById('event-name').value = ''; | |
| document.getElementById('start-time').value = '08:00'; | |
| document.getElementById('end-time').value = '09:00'; | |
| document.getElementById('event-category').value = 'work'; | |
| document.getElementById('delete-event').classList.add('hidden'); | |
| document.getElementById('event-modal').classList.remove('hidden'); | |
| document.getElementById('event-name').focus(); | |
| } | |
| function openEditModal(eventId) { | |
| const event = events.find(e => e.id === eventId); | |
| if (!event) return; | |
| document.getElementById('modal-title').textContent = 'Edit Event'; | |
| document.getElementById('event-id').value = event.id; | |
| document.getElementById('event-name').value = event.label; | |
| document.getElementById('start-time').value = decimalToTime(event.start); | |
| document.getElementById('end-time').value = decimalToTime(event.end); | |
| document.getElementById('event-category').value = event.category; | |
| document.getElementById('delete-event').classList.remove('hidden'); | |
| document.getElementById('event-modal').classList.remove('hidden'); | |
| document.getElementById('event-name').focus(); | |
| } | |
| function closeModal() { | |
| document.getElementById('event-modal').classList.add('hidden'); | |
| } | |
| // Event handlers | |
| document.getElementById('add-event').addEventListener('click', openAddModal); | |
| document.getElementById('add-center').addEventListener('click', openAddModal); | |
| document.getElementById('close-modal').addEventListener('click', closeModal); | |
| document.getElementById('cancel-event').addEventListener('click', closeModal); | |
| document.getElementById('delete-event').addEventListener('click', function() { | |
| const eventId = document.getElementById('event-id').value; | |
| events = events.filter(e => e.id !== eventId); | |
| saveEvents(); | |
| drawSegments(); | |
| closeModal(); | |
| }); | |
| document.getElementById('event-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const eventId = document.getElementById('event-id').value; | |
| const label = document.getElementById('event-name').value.trim(); | |
| const startTime = document.getElementById('start-time').value; | |
| const endTime = document.getElementById('end-time').value; | |
| const category = document.getElementById('event-category').value; | |
| if (!label) { | |
| Swal.fire('Error', 'Please enter an event name', 'error'); | |
| return; | |
| } | |
| const start = timeToDecimal(startTime); | |
| const end = timeToDecimal(endTime); | |
| if (start >= end) { | |
| Swal.fire('Error', 'End time must be after start time', 'error'); | |
| return; | |
| } | |
| if (eventId) { | |
| // Update existing event | |
| const eventIndex = events.findIndex(e => e.id === eventId); | |
| if (eventIndex !== -1) { | |
| events[eventIndex] = { | |
| id: eventId, | |
| label, | |
| start, | |
| end, | |
| category | |
| }; | |
| } | |
| } else { | |
| // Add new event | |
| events.push({ | |
| id: generateId(), | |
| label, | |
| start, | |
| end, | |
| category | |
| }); | |
| } | |
| saveEvents(); | |
| drawSegments(); | |
| closeModal(); | |
| }); | |
| // Click on empty space to add event | |
| document.getElementById('segments-container').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| openAddModal(); | |
| } | |
| }); | |
| // Initialize | |
| drawTimeline(); | |
| drawSegments(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=triton7777/calender" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |