change the course calendar to include dates

index.html

@@ -212,6 +212,14 @@
                 </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">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4">Upcoming Course Dates</h3>
+                <div class="space-y-4" id="upcoming-dates-list">
+                    <!-- Dates will be populated by JavaScript -->
+                </div>
+            </div>
         </section>
 <!-- Upcoming Courses Section -->
         <section id="upcoming-courses" class="mb-20">

script.js

@@ -266,6 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
     currentYear = now.getFullYear();
     
     renderCalendar();
+    renderUpcomingDates();
 // Month navigation
     document.getElementById('prev-month').addEventListener('click', () => {
         currentMonth--;
@@ -357,6 +358,46 @@ function renderCourses(courses, containerId) {
         container.appendChild(card);
     });
 }
+// Render upcoming dates list
+function renderUpcomingDates() {
+    const upcomingDatesList = document.getElementById('upcoming-dates-list');
+    upcomingDatesList.innerHTML = '';
+
+    // Sort courses by date
+    const sortedCourses = [...coursesData].sort((a, b) => {
+        return new Date(a['Start Date']) - new Date(b['Start Date']);
+    });
+
+    // Get next 10 upcoming courses
+    const now = new Date();
+    const upcomingCourses = sortedCourses.filter(course => {
+        return new Date(course['Start Date']) >= now;
+    }).slice(0, 10);
+
+    if (upcomingCourses.length === 0) {
+        upcomingDatesList.innerHTML = '<p class="text-gray-600">No upcoming courses scheduled.</p>';
+        return;
+    }
+
+    upcomingCourses.forEach(course => {
+        const date = new Date(course['Start Date']);
+        const dateItem = document.createElement('div');
+        dateItem.className = 'flex items-start border-b border-gray-100 pb-4 last:border-0 last:pb-0';
+        dateItem.innerHTML = `
+            <div class="bg-green-100 rounded-lg p-2 mr-4 flex-shrink-0">
+                <div class="text-green-800 font-bold text-center text-sm">${date.toLocaleDateString('en-US', { month: 'short' })}</div>
+                <div class="text-green-800 font-bold text-center text-xl">${date.getDate()}</div>
+            </div>
+            <div>
+                <h4 class="font-medium text-gray-800">${course.Course}</h4>
+                <p class="text-sm text-gray-600">${course.Time} • ${course.Location}</p>
+                <p class="text-sm text-gray-500 mt-1">Instructor: ${course.Instructor}</p>
+            </div>
+        `;
+        upcomingDatesList.appendChild(dateItem);
+    });
+}
+
 // Initialize the page
 function init() {
     const groupedCourses = groupCoursesByMonth(coursesData);
@@ -375,5 +416,4 @@ function init() {
     buttons[1].textContent = monthNames[(now.getMonth() + 1) % 12];
     buttons[2].textContent = monthNames[(now.getMonth() + 2) % 12];
 }
-
 init();

style.css

@@ -12,6 +12,7 @@ body {
 /* Calendar styling */
 #calendar-days > div {
     min-height: 6rem;
+    position: relative;
 }
 
 #calendar-days > div:hover {
@@ -21,11 +22,42 @@ body {
 .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;
+    overflow-y: auto;
+}
+
+#upcoming-dates-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+#upcoming-dates-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+#upcoming-dates-list::-webkit-scrollbar-thumb {
+    background: #cbd5e0;
+    border-radius: 10px;
+}
+
+#upcoming-dates-list::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0;
+}
 /* Animation for course cards */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }