### UX design

#### Calendar View Core Layout Architecture

The calendar view is built around a **column-per-team-member layout** that provides immediate visual ownership and workload distribution. This design is critical for project management efficiency as it enables:

- **Individual Accountability**: Each team member's work is contained in their dedicated column, making responsibilities clear
- **Workload Balancing**: Project managers can instantly see uneven task distribution across team members
- **Dependency Tracking**: Cross-column relationships become visually apparent when tasks depend on multiple people
- **Resource Planning**: PTO, on-call, and availability patterns are immediately visible per person

#### Grid Structure Specification

```
┌─────────────┬─────────────┬─────────────┬─────────────┬─────────────┬──────────────┐
│ Date │ Team Member │ Team Member │ Team Member │ Team Member │ Milestones │
│ │ A │ B │ C │ D │ │
├─────────────┼─────────────┼─────────────┼─────────────┼─────────────┼──────────────┤
│ Mon 1/15 │ [Cell A1] │ [Cell B1] │ [Cell C1] │ [Cell D1] │ [Mile 1] │
│ Tue 1/16 │ [Cell A2] │ [Cell B2] │ [Cell C2] │ [Cell D2] │ [Mile 2] │
│ Wed 1/17 │ [Cell A3] │ [Cell B3] │ [Cell C3] │ [Cell D3] │ [Mile 3] │
└─────────────┴─────────────┴─────────────┴─────────────┴─────────────┴──────────────┘
```

#### Column Specifications

**Date Column (Fixed Left)**

- Width: Fixed 120px minimum, non-resizable
- Content: `Day MM/DD/YYYY` format (e.g., "Mon 1/15")
- Styling: Sticky positioning, always visible during horizontal scroll
- Background: Light gray (#F8F9FA) to distinguish from content columns

**Team Member Columns (Dynamic)**

- Width: 200px default, resizable between 150px-400px
- Header: Team member company alias (e.g. johndoe)
- Order: Alphabetical by default, drag-to-reorder enabled
- Add/Remove: "+" button after last column, "×" button on column header hover

**Milestone Column (Fixed Right)**

- Width: Fixed 180px, non-resizable
- Content: Project milestones, deadlines, company holidays
- Styling: Sticky positioning on right edge
- Background: Distinct accent color (#E3F2FD)

#### Cell-Level Functionality and Content Hierarchy

Each intersection of team member column and date row creates a **multi-functional cell** that serves as the primary interaction unit. Cells must accommodate overlapping information types with clear visual priority:

**Primary Content Layer (Always Visible)**

1. Task Title: Maximum 2 lines, 14px font, truncate with ellipsis
2. Status Indicator: 8px colored circle in top-left corner

- Green: Complete
- Blue: In Progress
- Orange: Blocked
- Gray: Not Started

**Secondary Content Layer (Contextual)**

3. Task Type Icon: 16px icon in top-right corner
4. Link Count Badge: "🔗 3" format in bottom-right if attachments exist
5. Time Estimate: "4h" format in bottom-left if specified

**Background State Layer (Full Cell)**

- Normal: White background with subtle border (#E0E0E0)
- PTO: Diagonal stripe pattern (#F5F5F5 / #E0E0E0)
- On-call: Solid yellow background (#FFF9C4)
- Holiday: Light blue background (#E3F2FD)
- Conference: Purple background
- Multiple States: Layered approach (PTO stripes over on-call yellow)

**Cell Content Overflow Handling**

- Vertical Overflow (Multiple Tasks): Stack max 3 tasks, show "+2 more" indicator
- Horizontal Overflow (Long Names): Ellipsis truncation, full text on hover tooltip
- Expansion: Click "+X more" to expand cell or show popup list

#### Interactive Features and Behaviors

**Cell Selection System**

- Single Select: Click cell → blue border (2px #1976D2)
- Multi Select: Ctrl+Click → multiple blue borders maintained
- Range Select: Shift+Click → select continuous range between first and last clicked
- Clear Selection: Click empty area or press Escape

**Drag and Drop Operations**

- Draggable Elements: Individual task items within cells, not entire cells
- Drop Zones: Any valid cell in any team member column
- Visual Feedback During Drag:
- Dragged Item: Semi-transparent copy (50% opacity)
- Valid Drop Zone: Green border highlight (2px #4CAF50)
- Invalid Drop Zone: Red border highlight (2px #F44336)
- Drop Constraints: Cannot drop on PTO days, weekends (if hidden), or dates with scheduling conflicts

**Dependency Visualization System**

- Trigger: Hover or select any cell containing tasks with dependencies
- Visual Representation: Curved connecting lines (2px #757575) between related cells
- Direction Indicators: Arrow heads showing dependency flow direction
- Multi-level Dependencies: Different colors for direct (dark) vs indirect (light) dependencies
- Cross-Sprint Dependencies: Dotted lines when dependencies span sprint boundaries

#### Navigation and Controls System

**Top Navigation Bar**

- Date Range Selector: Calendar widget with preset options (This Week, Next 2 Weeks, This Quarter, Custom Range)
- Sprint Boundary Controls: Toggle buttons for "Show Sprint Lines" and "Edit Sprint Boundaries"
- View Options: Checkboxes for "Show Weekends", "Show Holidays", "Compact View"
- Team Member Management: Dropdown to filter visible columns, "Add Team Member" button
- Export Actions: "Export to Excel/CSV/Markdown", "Share Link", "Print View" options

**Quick Action Interface**

- Floating Action Button: Fixed position "+" button (bottom-right) for rapid task creation
- Context Menu System: Right-click on any cell reveals contextual actions (Edit, Copy, Move, Delete, Add Dependency)
- Keyboard Navigation: Arrow keys for cell navigation, Tab for column switching, Enter to edit, Delete to remove

#### Advanced Cell Features

**Sprint Boundary Visualization**

- Visual Treatment: Horizontal lines (3px #2196F3) spanning full calendar width
- Positioning: Lines appear between date rows at sprint start/end boundaries
- Labels: Sprint names displayed in left margin aligned with sprint start date
- Interaction: Click line to edit sprint dates, hover shows sprint details tooltip

**Multi-Task Cell Management**

- Task Stacking: Up to 3 tasks visible per cell, additional tasks collapsed with "+X more" indicator
- Task Prioritization: Drag tasks within cell to reorder by priority
- Quick Task Creation: Double-click empty cell area to create new task
- Task Splitting: Drag task to multiple cells to create multi-day assignments

**Conflict Detection and Indicators**

- PTO vs Assignment Conflicts: Red corner triangle with "!" when tasks are assigned during PTO
- On-call vs PTO Conflicts: Orange border when on-call duty overlaps with requested PTO
- Overallocation Warnings: Yellow background fade when team member has >8 hours of tasks in one day
- Dependency Conflicts: Purple dotted border when task dependencies create scheduling impossibilities

#### Desktop-Optimized Design Specifications

**Primary Target: Desktop/Laptop (1200px+ width)**

- **Full Calendar Grid**: Complete calendar grid visible without horizontal scrolling on standard laptop screens (1366px+)
- **Multi-Column Layout**: All team member columns displayed simultaneously for comprehensive team overview
- **Rich Interactions**: Complete feature set enabled including drag/drop, multi-select, keyboard shortcuts, and hover states
- **Detailed Information**: Full tooltips, status indicators, and contextual information always visible
- **Power User Features**: Advanced keyboard navigation, bulk operations, and command shortcuts optimized for productivity
- **High Information Density**: Maximize visible information while maintaining readability and usability
- **Professional Interface**: Clean, business-focused design suitable for engineering team environments
- **Multi-Monitor Support**: Layout scales effectively on large displays and multi-monitor setups

#### Visual Design System

**Color Palette and Usage**

- **Primary Colors**: Blue theme (#1976D2 for selections, #2196F3 for sprint boundaries)
- **Status Colors**: Green (#4CAF50) complete, Blue (#2196F3) in-progress, Orange (#FF9800) blocked, Gray (#757575) not-started
- **Background Colors**: White (#FFFFFF) normal cells, Light gray (#F8F9FA) date column, Yellow (#FFF9C4) on-call, Blue (#E3F2FD) holidays/milestones
- **Conflict Indicators**: Red (#F44336) for conflicts, Orange (#FF9800) for warnings, Purple (#9C27B0) for dependency issues
- **Interactive States**: Green borders (#4CAF50) valid drop zones, Red borders (#F44336) invalid drop zones

**Typography Specifications**

- **Primary Font**: `Atkinson Hyperlegible Next` for all text content
- **Task Titles**: 14px weight-500, maximum 2 lines with ellipsis overflow
- **Column Headers**: 16px weight-600, team member names with 32px circular avatars
- **Date Labels**: 12px weight-400, format "Day MM/DD" (e.g., "Mon 1/15")
- **Status Indicators**: 10px weight-400 for badges and time estimates
- **Milestone Text**: 14px weight-600 with distinct styling for importance

**Visual Hierarchy Rules**

- **Information Priority**: Task titles > Status indicators > Type icons > Time estimates > Link counts
- **Interactive Priority**: Selection borders > Conflict indicators > Status colors > Background states
- **Spatial Priority**: Primary content layer > Secondary content layer > Background state layer
- **Attention Management**: Animations only for state changes, subtle hover effects, clear focus indicators for accessibility

#### Command Panel Layout & Behavior

**Side Panel Architecture (Right Side)**
The command panel is implemented as a collapsible side panel that provides structured access to all project management commands. This design prioritizes discoverability, efficiency, and learning.

**Collapsed State (Right edge

README.md

@@ -1,10 +1,13 @@
 ---
-title: Taskflow Calendar Commander
-emoji: 🏆
-colorFrom: red
+title: TaskFlow Calendar Commander 🗓️
+colorFrom: pink
 colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/calendar-header.js

@@ -0,0 +1,86 @@
+class CustomCalendarHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background: white;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .header-content {
+                    padding: 1rem 1.5rem;
+                }
+                
+                .action-buttons {
+                    display: flex;
+                    gap: 0.5rem;
+                    align-items: center;
+                }
+                
+                .btn {
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    transition: all 0.2s;
+                    cursor: pointer;
+                }
+                
+                .btn-primary {
+                    background: #0ea5e9;
+                    color: white;
+                    border: none;
+                }
+                
+                .btn-primary:hover {
+                    background: #0284c7;
+                }
+                
+                .btn-outline {
+                    background: white;
+                    color: #374151;
+                    border: 1px solid #d1d5db;
+                }
+                
+                .btn-outline:hover {
+                    background: #f9fafb;
+                    border-color: #9ca3af;
+                }
+            </style>
+            <div class="header-content">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center space-x-4">
+                        <h2 class="text-xl font-semibold text-gray-800" id="calendar-title">This Week</h2>
+                        <div class="text-sm text-gray-500">Showing 5 days, 4 team members</div>
+                    </div>
+                    
+                    <div class="action-buttons">
+                        <button class="btn btn-outline flex items-center space-x-2">
+                            <i data-feather="users"></i>
+                            <span>Team</span>
+                        </button>
+                        
+                        <button class="btn btn-outline flex items-center space-x-2">
+                            <i data-feather="download"></i>
+                            <span>Export</span>
+                        </button>
+                        
+                        <button class="btn btn-primary flex items-center space-x-2">
+                            <i data-feather="plus"></i>
+                            <span>Add Member</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    }
+}
+
+customElements.define('custom-calendar-header', CustomCalendarHeader);

components/command-panel.js

@@ -0,0 +1,62 @@
+class CustomCommandPanel extends HTMLElement {
+    constructor() {
+        super();
+        this.isOpen = false;
+    }
+    
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+    
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                }
+                
+                .panel-toggle {
+                    position: fixed;
+                    right: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    background: #0ea5e9;
+                    color: white;
+                    padding: 1rem 0.5rem;
+                    border-radius: 0.5rem 0 0 0.5rem;
+                    writing-mode: vertical-rl;
+                    cursor: pointer;
+                    z-index: 40;
+                    transition: all 0.3s ease;
+                    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+                }
+                
+                .panel-toggle:hover {
+                    background: #0284c7;
+                }
+                
+                .command-panel {
+                    position: fixed;
+                    right: 0;
+                    top: 0;
+                    height: 100vh;
+                    width: 400px;
+                    background: white;
+                    border-left: 1px solid #e5e7eb;
+                    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+                    transform: translateX(100%);
+                    transition: transform 0.3s ease-in-out;
+                    z-index: 50;
+                }
+                
+                .panel-open {
+                    transform: translateX(0);
+                }
+                
+                .search-input {
+                    width: 100%;
+                    padding: 0.75rem 1rem;
+                    border: 1px solid #

components/navbar.js

@@ -0,0 +1,89 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 1000;
+                }
+                
+                .navbar {
+                    background: white;
+                    border-bottom: 1px solid #e5e7eb;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+                
+                .logo {
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
+            </style>
+            <nav class="navbar">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between items-center h-16">
+                        <!-- Logo and Brand -->
+                        <div class="flex items-center space-x-4">
+                            <div class="logo">TaskFlow</div>
+                            <span class="text-gray-500">Calendar Commander</span>
+                        </div>
+                        
+                        <!-- Navigation Items -->
+                        <div class="flex items-center space-x-6">
+                            <!-- Date Range Selector -->
+                            <div class="relative">
+                                <select id="date-range-select" class="appearance-none bg-white border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                                    <option value="this-week">This Week</option>
+                                    <option value="next-2-weeks">Next 2 Weeks</option>
+                                    <option value="this-quarter">This Quarter</option>
+                                    <option value="custom">Custom Range</option>
+                                </select>
+                                <i data-feather="chevron-down" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
+                            </div>
+                            
+                            <!-- View Options -->
+                            <div class="flex items-center space-x-2">
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
+                                    <span class="ml-2 text-sm text-gray-700">Weekends</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
+                                    <span class="ml-2 text-sm text-gray-700">Holidays</span>
+                                </label>
+                            </div>
+                            
+                            <!-- User Menu -->
+                            <div class="relative">
+                                <button id="user-menu-button" class="flex items-center space-x-2 text-sm focus:outline-none">
+                                        <img src="http://static.photos/people/200x200/5" alt="User" class="w-8 h-8 rounded-full">
+                                        <span class="text-gray-700">Admin</span>
+                                        <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </nav>
+                `;
+                
+                // Add event listeners
+                this.shadowRoot.getElementById('date-range-select')?.addEventListener('change', (e) => {
+                    currentDateRange = e.target.value;
+                    initializeCalendar();
+                });
+                
+                // Initialize feather icons
+                if (typeof feather !== 'undefined') {
+                    feather.replace();
+                }
+            }
+        }
+        
+        customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,83 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskFlow Calendar - Project Management Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 font-sans">
+    <custom-navbar></custom-navbar>
+    <main class="flex h-screen pt-16">
+        <!-- Calendar Container -->
+        <div class="flex-1 overflow-auto">
+            <custom-calendar-header></custom-calendar-header>
+            <div id="calendar-grid" class="bg-white border border-gray-200 rounded-lg shadow-sm m-4">
+                <!-- Calendar grid will be populated by JavaScript -->
+            </div>
+        </div>
+        
+        <!-- Command Panel -->
+        <custom-command-panel></custom-command-panel>
+    </main>
+
+    <!-- Floating Action Button -->
+    <div class="fixed bottom-6 right-6 z-50">
+        <button id="quick-add-btn" class="bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-full shadow-lg transition-all duration-200 transform hover:scale-110">
+            <i data-feather="plus"></i>
+        </button>
+    </div>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/calendar-header.js"></script>
+    <script src="components/command-panel.js"></script>
+<script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Initialize calendar
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeCalendar();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,284 @@
+// Global variables
+let currentDateRange = 'this-week';
+let selectedCells = new Set();
+let isCommandPanelOpen = false;
+let teamMembers = [
+    { id: 'alice', name: 'Alice Smith', avatar: 'http://static.photos/people/200x200/1', capacity: 8 },
+    { id: 'bob', name: 'Bob Wilson', avatar: 'http://static.photos/people/200x200/2', capacity: 6 },
+    { id: 'charlie', name: 'Charlie Brown', avatar: 'http://static.photos/people/200x200/3', capacity: 8 },
+    { id: 'diana', name: 'Diana Prince', avatar: 'http://static.photos/people/200x200/4', capacity: 7 }
+];
+
+let tasks = [
+    { id: 1, title: 'API Integration', assignee: 'alice', date: getDateString(new Date()), status: 'in-progress', priority: 'high', timeEstimate: 4, links: 2 },
+    { id: 2, title: 'Database Migration', assignee: 'bob', date: getDateString(new Date()), status: 'not-started', priority: 'medium', timeEstimate: 6, links: 0 },
+    { id: 3, title: 'Frontend Refactor', assignee: 'charlie', date: getDateString(new Date()), status: 'complete', priority: 'low', timeEstimate: 8, links: 1 },
+    { id: 4, title: 'Security Audit', assignee: 'diana', date: getDateString(new Date()), status: 'blocked', priority: 'high', timeEstimate: 3, links: 3 }
+];
+
+// Utility functions
+function getDateString(date) {
+    return date.toISOString().split('T')[0];
+}
+
+function formatDateDisplay(date) {
+    const options = { weekday: 'short', month: 'numeric', day: 'numeric' };
+    return date.toLocaleDateString('en-US', options);
+}
+
+function getDateRange(rangeType) {
+    const today = new Date();
+    const start = new Date(today);
+    const end = new Date(today);
+    
+    switch(rangeType) {
+        case 'this-week':
+            start.setDate(today.getDate() - today.getDay() + 1);
+            end.setDate(start.getDate() + 4);
+            break;
+        case 'next-2-weeks':
+            start.setDate(today.getDate() - today.getDay() + 1);
+            end.setDate(start.getDate() + 9);
+            break;
+        case 'this-quarter':
+            const quarter = Math.floor(today.getMonth() / 3);
+            start.setMonth(quarter * 3, 1);
+            end.setMonth((quarter + 1) * 3, 0);
+            break;
+        default:
+            start.setDate(today.getDate() - today.getDay() + 1);
+            end.setDate(start.getDate() + 4);
+    }
+    
+    return { start, end };
+}
+
+function generateDates(startDate, endDate) {
+    const dates = [];
+    const current = new Date(startDate);
+    
+    while (current <= endDate) {
+        dates.push(new Date(current));
+        current.setDate(current.getDate() + 1);
+    }
+    
+    return dates;
+}
+
+// Calendar initialization
+function initializeCalendar() {
+    const calendarGrid = document.getElementById('calendar-grid');
+    const { start, end } = getDateRange(currentDateRange);
+    const dates = generateDates(start, end);
+    
+    // Create calendar structure
+    let calendarHTML = `
+        <div class="calendar-grid grid" style="
+            grid-template-columns: 120px repeat(${teamMembers.length}, 200px) 180px;
+            min-width: ${120 + (teamMembers.length * 200) + 180}px;
+        ">
+            <!-- Date Column Header -->
+            <div class="sticky left-0 z-20 bg-gray-50 border-r border-gray-200 p-3 font-semibold text-gray-700">
+                Date
+            </div>
+    `;
+    
+    // Team Member Column Headers
+    teamMembers.forEach(member => {
+        calendarHTML += `
+            <div class="team-member-header bg-white border-r border-gray-200 p-3 flex items-center justify-between sticky top-0 z-10">
+                <div class="flex items-center space-x-3">
+                    <img src="${member.avatar}" alt="${member.name}" class="w-8 h-8 rounded-full">
+                    <span class="font-semibold text-gray-800">${member.id}</span>
+                </div>
+                <button class="text-gray-400 hover:text-gray-600 transition-colors">
+                    <i data-feather="x" class="w-4 h-4"></i>
+                </button>
+            </div>
+        `;
+    });
+    
+    // Milestone Column Header
+    calendarHTML += `
+        <div class="sticky right-0 z-20 bg-blue-50 border-l border-blue-200 p-3 font-semibold text-blue-800">
+                Milestones
+            </div>
+        </div>
+    `;
+    
+    // Date Rows
+    dates.forEach(date => {
+        const dateStr = getDateString(date);
+        const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+        
+        calendarHTML += `
+            <!-- Date Cell -->
+            <div class="sticky left-0 z-10 bg-gray-50 border-r border-gray-200 p-2 text-sm text-gray-600 ${isWeekend ? 'bg-gray-100' : ''}">
+                ${formatDateDisplay(date)}
+            </div>
+        `;
+        
+        // Team Member Cells
+        teamMembers.forEach(member => {
+            const cellTasks = tasks.filter(task => 
+                task.assignee === member.id && task.date === dateStr
+            );
+            
+            calendarHTML += `
+                <div class="cell bg-white border-r border-gray-200 p-1 min-h-16 relative ${isWeekend ? 'bg-gray-50' : ''}" 
+                    data-date="${dateStr}" 
+                    data-assignee="${member.id}"
+                    onclick="handleCellClick(event, '${dateStr}', '${member.id}')"
+                    ondragover="handleDragOver(event)"
+                    ondrop="handleDrop(event, '${dateStr}', '${member.id}')"
+                >
+                    ${renderCellContent(cellTasks)}
+                </div>
+            `;
+        });
+        
+        // Milestone Cell
+        calendarHTML += `
+            <div class="sticky right-0 z-10 bg-blue-50 border-l border-blue-200 p-2 ${isWeekend ? 'bg-blue-100' : ''}">
+                    <!-- Milestone content -->
+                </div>
+            `;
+    });
+    
+    calendarGrid.innerHTML = calendarHTML;
+    feather.replace();
+}
+
+function renderCellContent(cellTasks) {
+    if (cellTasks.length === 0) return '';
+    
+    let content = '';
+    const visibleTasks = cellTasks.slice(0, 3);
+    const hiddenCount = cellTasks.length - 3;
+    
+    visibleTasks.forEach(task => {
+        content += `
+            <div class="task-item bg-white border border-gray-200 rounded p-1 mb-1 text-xs cursor-pointer draggable="true"
+                ondragstart="handleDragStart(event, ${task.id})"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center space-x-1">
+                        <div class="status-indicator w-2 h-2 rounded-full status-${task.status}"></div>
+                        <span class="task-title flex-1 truncate">${task.title}</span>
+                    </div>
+                    <div class="flex items-center justify-between mt-1">
+                        <span class="time-estimate text-gray-500">${task.timeEstimate}h</span>
+                        ${task.links > 0 ? `<span class="link-count text-blue-500">🔗 ${task.links}</span> : ''}
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+    
+    if (hiddenCount > 0) {
+        content += `
+            <div class="more-indicator text-center text-gray-400 text-xs py-1">
+            +${hiddenCount} more
+        </div>
+    `;
+    }
+    
+    return content;
+}
+
+// Event Handlers
+function handleCellClick(event, date, assignee) {
+    event.stopPropagation();
+    
+    const cell = event.currentTarget;
+    const cellKey = `${date}-${assignee}`;
+    
+    if (event.ctrlKey || event.metaKey) {
+        // Multi-select
+        if (selectedCells.has(cellKey)) {
+            selectedCells.delete(cellKey);
+            cell.classList.remove('cell-selected');
+        } else {
+            selectedCells.add(cellKey);
+            cell.classList.add('cell-selected');
+        }
+    } else if (event.shiftKey && selectedCells.size > 0) {
+        // Range select
+        // Implementation for range selection
+    } else {
+        // Single select
+        clearCellSelection();
+        selectedCells.add(cellKey);
+        cell.classList.add('cell-selected');
+    }
+}
+
+function clearCellSelection() {
+    document.querySelectorAll('.cell').forEach(cell => {
+        cell.classList.remove('cell-selected');
+    });
+    selectedCells.clear();
+}
+
+function handleDragStart(event, taskId) {
+    event.dataTransfer.setData('text/plain', taskId.toString());
+    event.currentTarget.classList.add('dragging');
+}
+
+function handleDragOver(event) {
+    event.preventDefault();
+    event.currentTarget.classList.add('drag-over-valid');
+}
+
+function handleDrop(event, date, assignee) {
+    event.preventDefault();
+    event.currentTarget.classList.remove('drag-over-valid', 'dragging');
+    
+    const taskId = parseInt(event.dataTransfer.getData('text/plain'));
+    const task = tasks.find(t => t.id === taskId);
+    
+    if (task) {
+        // Update task assignment and date
+        task.assignee = assignee;
+        task.date = date;
+        initializeCalendar(); // Refresh calendar
+    }
+}
+
+// Quick Add Button
+document.getElementById('quick-add-btn')?.addEventListener('click', function() {
+    // Open command panel with task creation template
+    const commandPanel = document.querySelector('custom-command-panel');
+    if (commandPanel && commandPanel.openPanel) {
+        commandPanel.openPanel('task-create');
+    }
+});
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(event) {
+    // Ctrl+K or Cmd+K to open command panel
+    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        event.preventDefault();
+        const commandPanel = document.querySelector('custom-command-panel');
+        if (commandPanel && commandPanel.togglePanel) {
+            commandPanel.togglePanel();
+        }
+    }
+    
+    // Escape to clear selection
+    if (event.key === 'Escape') {
+        clearCellSelection();
+    }
+});
+
+// Export functions for web components
+window.CalendarUtils = {
+    getDateString,
+    formatDateDisplay,
+    getDateRange,
+    generateDates,
+    teamMembers,
+    tasks,
+    selectedCells,
+    clearCellSelection
+};

style.css

@@ -1,28 +1,178 @@
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* PTO Background Pattern */
+.pto-pattern {
+    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
+                      linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
+                      linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
+                      linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+/* On-call Background */
+.on-call-bg {
+    background-color: #fef9c3;
+}
+
+/* Holiday Background */
+.holiday-bg {
+    background-color: #dbeafe;
+}
+
+/* Conference Background */
+.conference-bg {
+    background-color: #f3e8ff;
+}
+
+/* Status Indicator Colors */
+.status-complete {
+    background-color: #10b981;
+}
+
+.status-in-progress {
+    background-color: #3b82f6;
+}
+
+.status-blocked {
+    background-color: #f59e0b;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.status-not-started {
+    background-color: #6b7280;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Cell Selection */
+.cell-selected {
+    border: 2px solid #0ea5e9 !important;
+    box-shadow: 0 0 0 1px #0ea5e9;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Drag and Drop Styles */
+.drag-over-valid {
+    border: 2px solid #10b981 !important;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.drag-over-invalid {
+    border: 2px solid #ef4444 !important;
 }
+
+.dragging {
+    opacity: 0.5;
+}
+
+/* Dependency Lines */
+.dependency-line {
+    stroke: #6b7280;
+    stroke-width: 2;
+    marker-end: url(#arrowhead);
+}
+
+/* Sprint Boundary Lines */
+.sprint-boundary {
+    border-top: 3px solid #3b82f6;
+}
+
+/* Conflict Indicators */
+.conflict-indicator {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 12px;
+    height: 12px;
+    background-color: #ef4444;
+    border-radius: 50%;
+}
+
+/* Command Panel Animation */
+.command-panel-enter {
+    transform: translateX(100%);
+}
+
+.command-panel-enter-active {
+    transform: translateX(0);
+    transition: transform 300ms ease-in-out;
+}
+
+.command-panel-exit {
+    transform: translateX(0);
+}
+
+.command-panel-exit-active {
+    transform: translateX(100%);
+    transition: transform 300ms ease-in-out;
+}
+
+/* Task Stack Animation */
+.task-stack-enter {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+.task-stack-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms, transform 200ms;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1024px) {
+    .calendar-grid {
+        font-size: 12px;
+    }
+    
+    .team-member-column {
+        min-width: 150px;
+    }
+}
+
+@media (max-width: 768px) {
+    .calendar-grid {
+        font-size: 11px;
+    }
+    
+    .team-member-column {
+        min-width: 120px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .command-panel,
+    .floating-action-btn {
+        display: none !important;
+    }
+    
+    .calendar-grid {
+        break-inside: avoid;
+    }
+}