Calendar/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

Build and Development

• Build TypeScript: npm run build - Compiles TypeScript sources to JavaScript using esbuild
• Watch mode: npm run watch - Continuously compiles TypeScript on file changes
• Clean build: npm run clean - Removes compiled JavaScript files (uses PowerShell on Windows)
• Start server: dotnet run - Starts the ASP.NET Core server on http://localhost:8000

Typical Development Workflow

1. Install dependencies: npm install
2. Build TypeScript: npm run build
3. Start server: dotnet run
4. For active development, run npm run watch in a separate terminal

Architecture Overview

Calendar Plantempus is an event-driven calendar application with the following architecture:

Core Principles

• Event-driven communication: All components communicate via DOM CustomEvents through a central EventBus
• No global state: Each manager maintains its own state
• Manager-based architecture: Each manager has a specific responsibility
• Pure DOM manipulation: No external JavaScript frameworks (React, Vue, etc.)
• TypeScript with esbuild: Modern build tooling for fast compilation

Key Components

EventBus (src/core/EventBus.ts)

Central event dispatcher using DOM CustomEvents. All inter-component communication flows through this:

// Example event emission
eventBus.emit('calendar:view-changed', { view: 'week' });

// Example event subscription
eventBus.on('calendar:view-changed', (event) => { /* handle */ });

Manager Pattern

Each manager is instantiated in src/index.ts and handles a specific domain:

• CalendarManager: Main coordinator, initializes other managers
• ViewManager: Handles day/week/month view switching
• NavigationManager: Prev/next/today navigation
• EventManager: CRUD operations for calendar events
• EventRenderer: Visual rendering of events in the grid
• GridManager: Creates and maintains the calendar grid structure
• ScrollManager: Handles scroll position and time indicators
• DataManager: Mock data loading and event data transformation

Project Structure

src/
├── constants/     # Enums and constants (EventTypes)
├── core/          # Core functionality (EventBus, CalendarConfig)
├── managers/      # Manager classes (one per domain)
├── types/         # TypeScript type definitions
└── utils/         # Utility functions (DateUtils, PositionUtils)

wwwroot/
├── css/          # Modular CSS files
├── js/           # Compiled JavaScript output
└── index.html    # Main HTML entry point

CSS Architecture

Modular CSS structure without external frameworks:

• calendar-base-css.css: CSS custom properties and base styles
• calendar-components-css.css: UI components
• calendar-events-css.css: Event styling and colors
• calendar-layout-css.css: Grid and layout
• calendar-popup-css.css: Popup and modal styles

Event Naming Convention

Events follow the pattern category:action:

• calendar:* - General calendar events
• grid:* - Grid-related events
• event:* - Event data changes
• navigation:* - Navigation actions
• view:* - View changes

TypeScript Configuration

• Target: ES2020
• Module: ESNext
• Strict mode enabled
• Source maps enabled
• Output directory: ./js