Spaces:

LauraMDB
/

mongodb-mastery-hub

Running

App Files Files Community

LauraMDB commited on Nov 11

Commit

2b39df6

verified ·

1 Parent(s): f08b1c1

for the course calendar use https://ui.toast.com/tui-calendar

Browse files

Files changed (3) hide show

components/calendar.js +77 -0
index.html +2 -26
style.css +0 -26

components/calendar.js ADDED Viewed

	@@ -0,0 +1,77 @@

+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;
+        }
+      </style>
+      <div id="calendar"></div>
+    `;
+    // Load Toast UI Calendar CSS and JS
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://uicdn.toast.com/tui-calendar/latest/tui-calendar.min.css';
+    document.head.appendChild(link);
+    const script = document.createElement('script');
+    script.src = 'https://uicdn.toast.com/tui-calendar/latest/tui-calendar.min.js';
+    script.onload = () => this.initCalendar();
+    document.body.appendChild(script);
+  }
+  initCalendar() {
+    const Calendar = 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);

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/course-card.js"></script>
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
@@ -186,32 +187,7 @@
         <!-- Calendar View Section -->
         <section class="mb-20">
             <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
-            <div class="flex justify-center mb-6">
-                <div class="inline-flex rounded-md shadow-sm">
-                    <button id="prev-month" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 hover:bg-gray-50">
-                        <i data-feather="chevron-left"></i>
-                    </button>
-                    <div id="current-month-display" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-gray-100">
-                        November 2025
-                    </div>
-                    <button id="next-month" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 hover:bg-gray-50">
-                        <i data-feather="chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="bg-white rounded-lg shadow overflow-hidden">
-                <div class="grid grid-cols-7 gap-px bg-gray-200">
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Sun</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Mon</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Tue</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Wed</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Thu</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Fri</div>
-                    <div class="bg-gray-100 p-2 text-center font-medium text-gray-700">Sat</div>
-                </div>
-                <div id="calendar-days" class="grid grid-cols-7 gap-px bg-gray-200"></div>
-            </div>
             <!-- Upcoming Dates Section -->
             <div class="mt-8 bg-white rounded-lg shadow p-6">

     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/course-card.js"></script>
+    <script src="components/calendar.js"></script>
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
         <!-- Calendar View Section -->
         <section class="mb-20">
             <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
+            <custom-calendar></custom-calendar>
             <!-- Upcoming Dates Section -->
             <div class="mt-8 bg-white rounded-lg shadow p-6">

style.css CHANGED Viewed

@@ -9,32 +9,6 @@ body {
 .course-path-card:hover {
     transform: translateY(-2px);
 }
-/* Calendar styling */
-#calendar-days > div {
-    min-height: 6rem;
-    position: relative;
-}
-#calendar-days > div:hover {
-    background-color: #f8fafc;
-}
-.calendar-course {
-    cursor: pointer;
-    transition: all 0.2s;
-    padding: 2px 4px;
-    margin-bottom: 2px;
-    border-radius: 3px;
-    font-size: 0.75rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.calendar-course:hover {
-    background-color: #dbeafe;
-}
 /* Upcoming dates styling */
 #upcoming-dates-list {
     max-height: 500px;

 .course-path-card:hover {
     transform: translateY(-2px);
 }
 /* Upcoming dates styling */
 #upcoming-dates-list {
     max-height: 500px;