Spaces:
Running
Running
File size: 3,429 Bytes
2b39df6 66a4121 2b39df6 66a4121 2b39df6 278602a 2b39df6 278602a 2b39df6 278602a 2b39df6 278602a 2b39df6 278602a 2b39df6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
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); |