Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture

README.md

@@ -0,0 +1,177 @@
+# Calendar Plantempus
+
+En moderne, event-drevet kalenderapplikation bygget med TypeScript og ASP.NET Core.
+
+## Projekt Information
+
+- **Projekt ID:** 8ecf2aa3-a2e4-4cc3-aa18-1c4352f00ff1
+- **Repository:** Calendar (afb8a8ec-cdbc-4c55-8631-fd0285974485)
+- **Status:** Under aktiv udvikling
+
+## Teknisk Arkitektur
+
+- **Frontend:** TypeScript med esbuild som bundler
+- **Arkitektur:** Event-drevet med CustomEvents (`document.dispatchEvent`/`addEventListener`)
+- **Backend:** ASP.NET Core Kestrel server
+- **Styling:** Modulær CSS struktur uden eksterne frameworks
+- **Bundling:** esbuild for TypeScript transpilering og bundling
+
+## Arkitekturelle Principper
+
+- **Ingen global state** - Alt state håndteres i de relevante managers
+- **Event-drevet kommunikation** - Alle komponenter kommunikerer via DOM CustomEvents
+- **Modulær opbygning** - Hver manager har et specifikt ansvarsområde
+- **Ren DOM manipulation** - Ingen eksterne JavaScript frameworks (React, Vue, etc.)
+- **Custom HTML tags** - Semantisk markup med custom elements
+
+## Implementerede Komponenter
+
+Projektet følger en manager-baseret arkitektur, hvor hver manager er ansvarlig for et specifikt aspekt af kalenderen:
+
+### 1. CalendarManager
+Hovedkoordinator for alle managers
+- Initialiserer og koordinerer alle andre managers
+- Håndterer global konfiguration
+- Administrerer kalender lifecycle
+
+### 2. ViewManager
+Håndterer kalendervisninger
+- Skifter mellem dag/uge/måned visninger
+- Opdaterer UI baseret på den valgte visning
+- Renderer kalender grid struktur
+
+### 3. NavigationManager
+Håndterer navigation
+- Implementerer prev/next/today funktionalitet
+- Håndterer dato navigation
+- Opdaterer week info (uge nummer, dato range)
+
+### 4. EventManager
+Administrerer events
+- Håndterer event lifecycle og CRUD operationer
+- Loader og synkroniserer event data
+- Administrerer event selection og state
+
+### 5. EventRenderer
+Renderer events i DOM
+- Positionerer events korrekt i kalender grid
+- Håndterer event styling baseret på type
+- Implementerer visual feedback for event interactions
+
+### 6. DataManager
+Håndterer data operationer
+- Mock data loading for udvikling
+- Event data transformation
+- Data persistence interface
+
+### 7. GridManager
+Administrerer kalender grid
+- Opretter og vedligeholder grid struktur
+- Håndterer time slots og positioning
+- Responsive grid layout
+
+## CSS Struktur
+
+Projektet har en modulær CSS struktur for bedre organisering:
+
+- **`calendar-base-css.css`** - Grundlæggende styling og CSS custom properties
+- **`calendar-components-css.css`** - UI komponenter og controls
+- **`calendar-events-css.css`** - Event styling og farver
+- **`calendar-layout-css.css`** - Layout struktur og grid
+- **`calendar-popup-css.css`** - Popup og modal styling
+- **`calendar.css`** - Samlet styling fra POC (bruges i øjeblikket)
+
+## Kommende Funktionalitet
+
+Baseret på projektstrukturen planlægges følgende komponenter:
+
+### Utilities
+- **PositionUtils** - Konvertering mellem pixels og tidspunkter
+- **SnapUtils** - Snap-to-interval funktionalitet
+- **DOMUtils** - DOM manipulation utilities
+
+### Interaction Managers
+- **DragManager** - Drag & drop funktionalitet for events
+- **ResizeManager** - Resize funktionalitet for events
+- **PopupManager** - Håndtering af event detaljer og popups
+
+### Feature Managers
+- **SearchManager** - Søgefunktionalitet i events
+- **TimeManager** - Current time indicator
+- **LoadingManager** - Loading states og error handling
+
+### Avancerede Features
+- Collision detection system for overlappende events
+- Animation system for smooth transitions
+- Event creation funktionalitet (double-click, drag-to-create)
+- Multi-day event support
+- Touch support for mobile enheder
+- Keyboard navigation
+
+## Projekt Struktur
+
+```
+Calendar Plantempus/
+├── src/                          # TypeScript source files
+│   ├── constants/               # Konstanter og enums
+│   ├── core/                    # Core funktionalitet
+│   ├── managers/                # Manager klasser
+│   ├── types/                   # TypeScript type definitioner
+│   └── utils/                   # Utility funktioner
+├── wwwroot/                     # Static web assets
+│   ├── css/                     # Stylesheets
+│   ├── js/                      # Compiled JavaScript
+│   └── index.html               # Main HTML file
+├── build.js                     # esbuild configuration
+├── tsconfig.json               # TypeScript configuration
+├── package.json                # Node.js dependencies
+└── Program.cs                  # ASP.NET Core server
+```
+
+## Kom i Gang
+
+### Forudsætninger
+- .NET 8.0 SDK
+- Node.js (for esbuild)
+
+### Installation
+1. Klon repository
+2. Installer dependencies: `npm install`
+3. Build TypeScript: `npm run build`
+4. Start server: `dotnet run`
+5. Åbn browser på `http://localhost:8000`
+
+### Development
+- **Build TypeScript:** `npm run build`
+- **Watch mode:** `npm run watch` (hvis konfigureret)
+- **Start server:** `dotnet run`
+
+## Event System
+
+Projektet bruger et event-drevet system hvor alle komponenter kommunikerer via DOM CustomEvents:
+
+```typescript
+// Dispatch event
+document.dispatchEvent(new CustomEvent('calendar:view-changed', {
+    detail: { view: 'week', date: new Date() }
+}));
+
+// Listen for event
+document.addEventListener('calendar:view-changed', (event) => {
+    // Handle view change
+});
+```
+
+## Bidrag
+
+Dette projekt følger clean code principper og modulær arkitektur. Når du bidrager:
+
+1. Følg den eksisterende manager-baserede struktur
+2. Brug event-drevet kommunikation mellem komponenter
+3. Undgå global state - hold state i relevante managers
+4. Skriv semantisk HTML med custom tags
+5. Brug modulær CSS struktur
+
+## Licens
+
+[Specificer licens her]