old-zsterminator/app/javascript/controllers/main_calendar_controller.js

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,
      week: {
        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: [
        {
          id: 'cal1',
          name: 'Work',
          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() {
    var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
    window.reservations = reservations;
    reservations.forEach(reservation => {
      window.calendar.createEvents([
        {
          id: reservation.id,
          calendarId: 'cal1',
          title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
          category: 'time',
          dueDateClass: reservation.dueDateClass,
          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'
    });
  }
}