Calendar/README.md

# 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]