/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useCallback, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function generateRandomColor() { const hue = Math.floor(Math.random() * 360); return `hsl(${hue}, 70%, 50%)`; } function parseICSDate(dateString: string): Date { if (!dateString) return new Date(); try { dateString = dateString.replace(/Z$/, '').replace(/:/g, ''); if (dateString.includes('T')) { const year = parseInt(dateString.slice(0, 4), 10); const month = parseInt(dateString.slice(4, 6), 10) - 1; const day = parseInt(dateString.slice(6, 8), 10); const hours = parseInt(dateString.slice(9, 11), 10) || 0; const minutes = parseInt(dateString.slice(11, 13), 10) || 0; const seconds = parseInt(dateString.slice(13, 15), 10) || 0; return new Date(year, month, day, hours, minutes, seconds); } else { const year = parseInt(dateString.slice(0, 4), 10); const month = parseInt(dateString.slice(4, 6), 10) - 1; const day = parseInt(dateString.slice(6, 8), 10); return new Date(year, month, day); } } catch (error) { console.error("Error parsing date:", dateString, error); return new Date(); } } function parseICSContent(content: string) { try { console.log("Parsing ICS content:", content); const events = []; const eventRegex = /BEGIN:VEVENT([\s\S]*?)END:VEVENT/gi; let match; while ((match = eventRegex.exec(content)) !== null) { const eventBlock = match[1]; console.log("Processing event block:", eventBlock); const titleMatch = eventBlock.match(/SUMMARY[^:]*:(.*)/mi); const startMatch = eventBlock.match(/DTSTART[^:]*:([\d\w]+)/mi); const endMatch = eventBlock.match(/DTEND[^:]*:([\d\w]+)/mi); if (startMatch) { const event = { id: crypto.randomUUID(), title: titleMatch ? titleMatch[1].trim() : 'Untitled Event', start: parseICSDate(startMatch[1]), end: endMatch ? parseICSDate(endMatch[1]) : parseICSDate(startMatch[1]), color: generateRandomColor(), rawBlock: eventBlock }; console.log("Parsed event:", event); events.push(event); } } console.log("Total parsed events:", events.length); return events; } catch (error) { console.error("Comprehensive error parsing ICS:", error); return []; } } function Calendar() { const [events, setEvents] = useState([ { id: '1', title: 'Sample Event 1', start: new Date(), end: new Date(new Date().setHours(new Date().getHours() + 2)), color: 'hsl(120, 70%, 50%)', }, { id: '2', title: 'Sample Event 2', start: new Date(new Date().setDate(new Date().getDate() + 1)), end: new Date(new Date().setDate(new Date().getDate() + 1)), color: 'hsl(200, 70%, 50%)', }, ]); const [currentDate, setCurrentDate] = useState(new Date()); const [isDarkMode, setIsDarkMode] = useState(true); const [icsInput, setIcsInput] = useState(''); useEffect(() => { console.log("Current events:", events); }, [events]); useEffect(() => { if (events.length > 0) { const earliestDate = new Date(Math.min(...events.map(e => e.start.getTime()))); setCurrentDate(new Date(earliestDate.getFullYear(), earliestDate.getMonth(), 1)); } }, [events]); const findEarliestDate = (newEvents) => { const allEvents = [...events, ...newEvents]; return new Date(Math.min(...allEvents.map(e => e.start.getTime()))); }; const handleFileUpload = useCallback((e) => { const files = Array.from(e.target.files); files.forEach(file => { const reader = new FileReader(); reader.onload = (e) => { const content = e.target?.result as string; const newEvents = parseICSContent(content); console.log("File upload events:", newEvents); if (newEvents.length > 0) { setEvents(prev => { const updatedEvents = [...prev, ...newEvents]; const earliestDate = findEarliestDate(newEvents); setCurrentDate(new Date(earliestDate.getFullYear(), earliestDate.getMonth(), 1)); return updatedEvents; }); } }; reader.readAsText(file); }); }, [events]); const handleTextInput = useCallback((e) => { const icsText = e.target.value; setIcsInput(icsText); }, []); const submitIcsContent = useCallback(() => { const icsText = icsInput.trim(); console.log("Submitting ICS text:", icsText); if (icsText.includes('BEGIN:VCALENDAR') || icsText.includes('BEGIN:VEVENT')) { const newEvents = parseICSContent(icsText); console.log("New events from paste:", newEvents); if (newEvents.length > 0) { setEvents(prev => { const updatedEvents = [...prev, ...newEvents]; const earliestDate = findEarliestDate(newEvents); setCurrentDate(new Date(earliestDate.getFullYear(), earliestDate.getMonth(), 1)); return updatedEvents; }); setIcsInput(''); } } }, [icsInput, events]); const getDaysInMonth = (date) => { const year = date.getFullYear(); const month = date.getMonth(); return new Date(year, month + 1, 0).getDate(); }; const getFirstDayOfMonth = (date) => { const year = date.getFullYear(); const month = date.getMonth(); return new Date(year, month, 1).getDay(); }; const renderCalendar = () => { const daysInMonth = getDaysInMonth(currentDate); const firstDay = getFirstDayOfMonth(currentDate); const days = []; for (let i = 0; i < firstDay; i++) { days.push(

); } for (let day = 1; day <= daysInMonth; day++) { const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); const dayEvents = events.filter(event => event.start.getDate() === day && event.start.getMonth() === currentDate.getMonth() && event.start.getFullYear() === currentDate.getFullYear() ); console.log(`Events for day ${day}:`, dayEvents); days.push(

{day}

{dayEvents.map((event) => (

{event.title}

))}

); } return days; }; const changeMonth = (increment) => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + increment, 1)); }; return (

ICS Calendar Viewer

Upload ICS File:

Paste ICS Content:

{icsInput && (
                <button
                  onClick={submitIcsContent}
                  className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
                >
                  Parse ICS
                </button>
              )}
            </div>
          </div>
        </div>

<div className="mb-4 flex justify-between items-center">
          <h2 className="text-xl font-bold">
            {currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
          </h2>
          <div className="space-x-2">
            <button
              onClick={() => changeMonth(-1)}
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
            >
              Previous
            </button>
            <button
              onClick={() => changeMonth(1)}
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
            >
              Next
            </button>
          </div>
        </div>

<div className="grid grid-cols-7 gap-px">
          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
            <div key={day} className="text-center font-semibold p-2 bg-gray-100 dark:bg-gray-800">
              {day}
            </div>
          ))}
          {renderCalendar()}
        </div>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<Calendar />);
}

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>ICS Calendar Viewer</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://esm.town/v/std/catch"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 'content-type': 'text/html' }
  });
}</article></body></html>

icsviewer