components/calendar.js

class CustomCalendar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        #calendar {
          width: 100%;
          height: 800px;
          margin: 0 auto;
        }
        .tui-full-calendar-weekday-schedule {
          cursor: pointer;
        }
        /* Override default styles to match our theme */
        .tui-full-calendar-month-dayname-item {
          color: #4a5568;
          font-weight: 600;
        }
        .tui-full-calendar-month-day-item {
          color: #2d3748;
        }
        .tui-full-calendar-month-day-item.tui-full-calendar-other-month {
          color: #a0aec0;
        }
        .tui-full-calendar-month-day-item.tui-full-calendar-day-saturday {
          color: #4299e1;
        }
        .tui-full-calendar-month-day-item.tui-full-calendar-day-sunday {
          color: #f56565;
        }
        .tui-full-calendar-month-day-item.tui-full-calendar-today .tui-full-calendar-month-day-item-date {
          background-color: #48bb78;
          color: white;
        }
        .tui-full-calendar-schedule {
          background-color: #4299e1;
          color: white;
          border-radius: 4px;
          font-size: 12px;
          padding: 2px 4px;
        }
      </style>
      <div id="calendar"></div>
    `;

    // Check if dependencies are already loaded
    if (window.tui && window.tui.Calendar) {
      this.initCalendar();
    } else {
      // Wait for dependencies to be loaded from index.html
      const checkDependencies = setInterval(() => {
        if (window.tui && window.tui.Calendar) {
          clearInterval(checkDependencies);
          this.initCalendar();
        }
      }, 100);
    }
}
    initCalendar() {
    const Calendar = window.tui.Calendar;
const container = this.shadowRoot.getElementById('calendar');

    this.calendar = new Calendar(container, {
      defaultView: 'month',
      taskView: false,
      scheduleView: ['time'],
      useCreationPopup: false,
      useDetailPopup: true,
      template: {
        monthDayname: function(dayname) {
          return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
        }
      }
    });
    // Add courses as schedules
    const schedules = window.coursesData.map(course => {
      const start = new Date(course.start_timestamp.$date);
      const end = new Date(course.end_timestamp.$date);

      return {
        id: course['Registration Code'] || String(Math.random()),
        calendarId: '1',
        title: course.Course,
        category: 'time',
        dueDateClass: '',
        start: start,
        end: end,
        location: course['Time Zone'],
        instructor: course.Instructor,
        raw: {
          time: course['Time Slot']
        }
      };
    });
this.calendar.createSchedules(schedules);
    // Set today as default date and adjust view if needed
    const today = new Date();
    this.calendar.setDate(today);
    
    // If no events today, show the month with the next upcoming event
    const upcomingEvents = schedules.filter(s => new Date(s.start) >= today);
    if (upcomingEvents.length > 0) {
      const nextEventDate = new Date(upcomingEvents[0].start);
      if (nextEventDate.getMonth() !== today.getMonth()) {
        this.calendar.setDate(nextEventDate);
      }
    }
}
}

customElements.define('custom-calendar', CustomCalendar);