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 [day, month, year] = course['Start Date'].split('-');
      const monthNum = new Date(`${month} 1, 2000`).getMonth();
      const start = new Date(2000 + parseInt(year), monthNum, parseInt(day), 9);
      const end = new Date(2000 + parseInt(year), monthNum, parseInt(day), 17);

      return {
        id: String(Math.random()),
        calendarId: '1',
        title: course.Course,
        category: 'time',
        dueDateClass: '',
        start: start,
        end: end,
        location: course.Location,
        instructor: course.Instructor,
        raw: {
          time: course.Time
        }
      };
    });

    this.calendar.createSchedules(schedules);

    // Set today as default date
    this.calendar.setDate(new Date());
  }
}

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