fix(calendar): improve dynamic header and event loading

- Increase event fetch limit to 200 to cover full month view
- Update events panel header dynamically based on selected date:
  - Shows "Today's Schedule" when clicking on today's date
  - Shows formatted date (e.g., "Wednesday, January 28") for other days
- Change default sidebar view from "Today" to "Week"
- Replace hardcoded title/date with "Loading..." placeholders
  that get populated dynamically by JavaScript

Author: qasim-nylas

internal/air/static/js/calendar-data.js

@@ -21,7 +21,8 @@ async loadEvents() {
 
         const data = await AirAPI.getEvents({
             start: Math.floor(start.getTime() / 1000),
-            end: Math.floor(end.getTime() / 1000)
+            end: Math.floor(end.getTime() / 1000),
+            limit: 200  // Fetch more events to cover the full month
         });
 
         this.events = data.events || [];

internal/air/static/js/calendar-ui.js

@@ -95,8 +95,24 @@ onDayClick(dateStr, dayEl) {
     document.querySelectorAll('.calendar-day.selected').forEach(el => el.classList.remove('selected'));
     dayEl.classList.add('selected');
 
-    // Update events panel header
+    // Check if clicked date is today
+    const today = new Date();
+    const isToday = clickedDate.getFullYear() === today.getFullYear() &&
+                    clickedDate.getMonth() === today.getMonth() &&
+                    clickedDate.getDate() === today.getDate();
+
+    // Update events panel header title and date
+    const headerEl = document.querySelector('.events-header h3');
     const dateEl = document.querySelector('.events-date');
+
+    if (headerEl) {
+        headerEl.textContent = isToday ? "Today's Schedule" : clickedDate.toLocaleDateString('en-US', {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+
     if (dateEl) {
         dateEl.textContent = clickedDate.toLocaleDateString('en-US', {
             weekday: 'short',

internal/air/templates/pages/calendar.gohtml

@@ -11,11 +11,11 @@
         </button>
 
         <div class="folder-group">
-            <div class="folder-item active">
+            <div class="folder-item">
                 <span class="folder-icon">📆</span>
                 <span>Today</span>
             </div>
-            <div class="folder-item">
+            <div class="folder-item active">
                 <span class="folder-icon">📅</span>
                 <span>Week</span>
             </div>
@@ -79,7 +79,7 @@
         <div class="calendar-header">
             <div class="calendar-nav">
                 <button class="calendar-nav-btn">←</button>
-                <h2 class="calendar-title">December 2024</h2>
+                <h2 class="calendar-title">Loading...</h2>
                 <button class="calendar-nav-btn">→</button>
             </div>
             <button class="today-btn">Today</button>
@@ -139,7 +139,7 @@
     <div class="calendar-events-panel" data-testid="events-panel">
         <div class="events-header">
             <h3>Today's Schedule</h3>
-            <span class="events-date">Wed, Dec 25</span>
+            <span class="events-date">Loading...</span>
         </div>
         <div class="events-list" id="eventsList">
             <!-- Skeleton loaders - replaced by JavaScript -->