Added customer composite key

app/javascript/controllers/main_calendar_controller.js

@@ -2,7 +2,13 @@ import {Controller} from "@hotwired/stimulus"
 // Connects to data-controller="main-calendar"
 
 export default class extends Controller {
+  static targets = ["dateDisplay", "navigation"]
+
   connect() {
+    // Set height to full viewport
+    document.getElementById('main-calendar').style.height = '100vh';
+    document.getElementById('main-calendar').style.width = '100vw';
+    
     const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
@@ -10,12 +16,29 @@ export default class extends Controller {
         taskView: false,
         scheduleView: false,
         eventView: ['time'],
+        startDayOfWeek: 1, // Start week on Monday
         hourStart: 4,
         hourEnd: 21,
       },
+      // This is important - set the height to 100%
+      height: '100%',
+      // Make sure it takes full width
+      width: '100%',
       template: {
         timegridDisplayPrimaryTime({time}) {
           return `${time.getHours()} sati`;
+        },
+        popupDetailLocation(eventObj) {
+          return ''; // Empty location as requested
+        },
+        popupDetailAttendees(eventObj) {
+          return eventObj.attendees[0]; // Show team name
+        },
+        popupDetailState(eventObj) {
+          return '';
+        },
+        popupDetailBody(eventObj) {
+          return '';
         }
       },
       calendars: [
@@ -25,11 +48,17 @@ export default class extends Controller {
           backgroundColor: '#00a9ff',
         },
       ],
+      // Enable the built-in popup
+      useDetailPopup: true,
     });
 
     window.calendar = calendar;
     this.getCalendardata();
+    
     calendar.render();
+    
+    // Update the date display after rendering
+    this.updateDateDisplay();
   }
 
   getCalendardata() {
@@ -40,14 +69,75 @@ export default class extends Controller {
         {
           id: reservation.id,
           calendarId: 'cal1',
-          title: reservation.customer.name,
+          title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
           category: 'time',
           dueDateClass: reservation.dueDateClass,
-          location: reservation.team.name,
+          location: '', // Empty location as requested
+          attendees: [reservation.team.name], // Team name as attendee
           start: reservation.start_time,
           end: reservation.end_time
         }
       ])
     });
   }
-}
+  
+  // Navigation methods - using the global window.calendar
+  prev() {
+    window.calendar.prev();
+    this.updateDateDisplay();
+  }
+  
+  next() {
+    window.calendar.next();
+    this.updateDateDisplay();
+  }
+  
+  today() {
+    window.calendar.today();
+    this.updateDateDisplay();
+  }
+  
+  // Helper for updating the date display
+  updateDateDisplay() {
+    if (this.hasDateDisplayTarget) {
+      const calendar = window.calendar;
+      const currentDate = calendar.getDate();
+      
+      // Format the date range based on the current view
+      const view = calendar.getViewName();
+      
+      if (view === 'day') {
+        this.dateDisplayTarget.textContent = this.formatDate(currentDate);
+      } else if (view === 'week') {
+        // For week view, show range (e.g., "Aug 1 - 7, 2023")
+        const weekStart = new Date(currentDate);
+        weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (weekStart.getDay() === 0 ? -6 : 1));
+        
+        const weekEnd = new Date(weekStart);
+        weekEnd.setDate(weekStart.getDate() + 6);
+        
+        this.dateDisplayTarget.textContent = `${this.formatDateShort(weekStart)} - ${this.formatDateShort(weekEnd)}`;
+      } else if (view === 'month') {
+        // For month view, show month and year (e.g., "August 2023")
+        this.dateDisplayTarget.textContent = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
+      }
+    }
+  }
+  
+  // Helper for formatting dates
+  formatDate(date) {
+    return date.toLocaleDateString('default', { 
+      weekday: 'short', 
+      month: 'short', 
+      day: 'numeric', 
+      year: 'numeric' 
+    });
+  }
+  
+  formatDateShort(date) {
+    return date.toLocaleDateString('default', { 
+      month: 'short', 
+      day: 'numeric'
+    });
+  }
+}