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:

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