Refactor calendar component into modular architecture with view switching

- Split monolithic Calendar component into focused sub-components:
  - CalendarHeader: Navigation buttons and title display
  - MonthView: Monthly calendar grid layout and event rendering
  - WeekView: Weekly calendar view with full-height day containers
- Add ViewMode enum for Month/Week view switching in sidebar dropdown
- Fix event styling by correcting CSS class from "event" to "event-box"
- Implement proper week view layout with full-height day containers
- Maintain all existing functionality: event handling, context menus, localStorage persistence

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

styles.css

@@ -462,6 +462,19 @@ body {
     background: white;
 }
 
+/* Week Grid */
+.week-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto 1fr;
+    flex: 1;
+    background: white;
+}
+
+.week-view .calendar-day {
+    height: 100%; /* Make week view days stretch to full height of their grid cell */
+}
+
 .weekday-header {
     background: #f8f9fa;
     padding: 1rem;
@@ -773,6 +786,15 @@ body {
         border-top: none;
     }
 
+    .view-selector {
+        margin-bottom: 0.5rem;
+    }
+
+    .view-selector-dropdown {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
     .app-main {
         margin-left: 0;
         max-width: 100%;
@@ -889,6 +911,43 @@ body {
     transform: translateY(0);
 }
 
+/* View Selector */
+.view-selector {
+    margin-bottom: 1rem;
+}
+
+.view-selector-dropdown {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+}
+
+.view-selector-dropdown:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.view-selector-dropdown:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+}
+
+.view-selector-dropdown option {
+    background: #2a2a2a;
+    color: white;
+    padding: 0.5rem;
+}
+
 /* Create Calendar Modal */
 .modal-backdrop {
     position: fixed;