// Course data for 2025-2026 const coursesData = [ // Q1 2025 { "Course": "MDB100: MongoDB Database and Security", "Start Date": "15-Jan-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "John Smith", "Location": "Online" }, { "Course": "DEV400: MongoDB Developer Extension", "Start Date": "22-Jan-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Sarah Johnson", "Location": "Online" }, { "Course": "OFA400: Atlas Admin", "Start Date": "05-Feb-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Michael Brown", "Location": "Online" }, { "Course": "DA610: MongoDB Adv. Queries", "Start Date": "19-Feb-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Emily Davis", "Location": "Online" }, { "Course": "OA620: Ops Manager Sizing", "Start Date": "05-Mar-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Robert Wilson", "Location": "Online" }, // Q2 2025 { "Course": "MDB200: MongoDB Optimization", "Start Date": "02-Apr-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "John Smith", "Location": "Online" }, { "Course": "DEV500: Data Modeling", "Start Date": "16-Apr-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Sarah Johnson", "Location": "Online" }, { "Course": "OFS400: Ops Manager Admin", "Start Date": "07-May-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Michael Brown", "Location": "Online" }, { "Course": "DA620: Languages Drivers", "Start Date": "21-May-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Emily Davis", "Location": "Online" }, { "Course": "OA630: Self-Hosted Security", "Start Date": "04-Jun-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Robert Wilson", "Location": "Online" }, // Q3 2025 { "Course": "MDB300: Production Readiness", "Start Date": "09-Jul-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "John Smith", "Location": "Online" }, { "Course": "DS110: Atlas Search", "Start Date": "23-Jul-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Sarah Johnson", "Location": "Online" }, { "Course": "OFA500: Atlas API", "Start Date": "06-Aug-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Michael Brown", "Location": "Online" }, { "Course": "DA630: Distributed Systems", "Start Date": "20-Aug-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Emily Davis", "Location": "Online" }, { "Course": "OA640: Atlas Security", "Start Date": "03-Sep-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Robert Wilson", "Location": "Online" }, // Q4 2025 { "Course": "DS120: Atlas Data Lake", "Start Date": "08-Oct-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "John Smith", "Location": "Online" }, { "Course": "DA640: App Optimization", "Start Date": "22-Oct-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Sarah Johnson", "Location": "Online" }, { "Course": "OFS500: Ops Manager API", "Start Date": "05-Nov-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Michael Brown", "Location": "Online" }, { "Course": "DA650: Advanced Aggregation", "Start Date": "19-Nov-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Emily Davis", "Location": "Online" }, { "Course": "DS130: CSFLE", "Start Date": "03-Dec-25", "Time": "09:00 AM - 05:00 PM", "Instructor": "Robert Wilson", "Location": "Online" }, // Q1 2026 { "Course": "MDB100: MongoDB Database and Security", "Start Date": "14-Jan-26", "Time": "09:00 AM - 05:00 PM", "Instructor": "John Smith", "Location": "Online" }, { "Course": "DEV400: MongoDB Developer Extension", "Start Date": "28-Jan-26", "Time": "09:00 AM - 05:00 PM", "Instructor": "Sarah Johnson", "Location": "Online" }, { "Course": "DA660: AI Integration", "Start Date": "11-Feb-26", "Time": "09:00 AM - 05:00 PM", "Instructor": "Michael Brown", "Location": "Online" }, { "Course": "DA670: Vector Search", "Start Date": "25-Feb-26", "Time": "09:00 AM - 05:00 PM", "Instructor": "Emily Davis", "Location": "Online" }, { "Course": "OA620: Ops Manager Sizing", "Start Date": "11-Mar-26", "Time": "09:00 AM - 05:00 PM", "Instructor": "Robert Wilson", "Location": "Online" } ]; // Calendar functionality let currentMonth = new Date().getMonth(); let currentYear = new Date().getFullYear(); function renderCalendar() { const firstDay = new Date(currentYear, currentMonth, 1); const lastDay = new Date(currentYear, currentMonth + 1, 0); const daysInMonth = lastDay.getDate(); let startingDay = firstDay.getDay(); // Adjust to make Monday (1) the first day of week instead of Sunday (0) startingDay = startingDay === 0 ? 6 : startingDay - 1; // Update month display const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; document.getElementById('current-month-display').textContent = `${monthNames[currentMonth]} ${currentYear}`; // Clear previous calendar const calendarDays = document.getElementById('calendar-days'); calendarDays.innerHTML = ''; // Add empty cells for days before the first day of month for (let i = 0; i < startingDay; i++) { const cell = document.createElement('div'); cell.className = 'bg-white h-24 p-1'; calendarDays.appendChild(cell); } // Add days of month for (let day = 1; day <= daysInMonth; day++) { const cell = document.createElement('div'); cell.className = 'bg-white h-24 p-1 overflow-auto'; const date = new Date(currentYear, currentMonth, day); const dateStr = date.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' }); // Add day number const dayNumber = document.createElement('div'); dayNumber.className = 'font-semibold text-sm mb-1'; dayNumber.textContent = day; cell.appendChild(dayNumber); // Add courses for this day const coursesToday = coursesData.filter(course => { const courseDate = new Date(course['Start Date']); return courseDate.getDate() === day && courseDate.getMonth() === currentMonth && courseDate.getFullYear() === currentYear; }); coursesToday.forEach(course => { const courseEl = document.createElement('div'); courseEl.className = 'text-xs p-1 mb-1 rounded bg-blue-50 border-l-4 border-blue-500 truncate'; courseEl.title = `${course.Course}\n${course.Time}\n${course.Instructor}`; courseEl.textContent = course.Course; cell.appendChild(courseEl); }); calendarDays.appendChild(cell); } } // Close dropdowns when clicking outside document.addEventListener('click', function(event) { if (!event.target.matches('.dropdown-btn')) { const dropdowns = document.querySelectorAll('.dropdown-content'); dropdowns.forEach(dropdown => { if (dropdown.classList.contains('show')) { dropdown.classList.remove('show'); } }); } }); // Initialize the page document.addEventListener('DOMContentLoaded', () => { // Set initial view to current month const now = new Date(); currentMonth = now.getMonth(); currentYear = now.getFullYear(); renderCalendar(); renderUpcomingDates(); // Month navigation document.getElementById('prev-month').addEventListener('click', () => { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(); feather.replace(); }); document.getElementById('next-month').addEventListener('click', () => { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } renderCalendar(); feather.replace(); }); }); // Helper function to parse date strings function parseDate(dateStr) { const parts = dateStr.split('-'); const day = parseInt(parts[0]); const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const month = monthNames.indexOf(parts[1]); const year = parseInt(parts[2]) + 2000; return new Date(year, month, day); } // Group courses by month function groupCoursesByMonth(courses) { const now = new Date(); const currentMonth = now.getMonth(); const currentYear = now.getFullYear(); const grouped = { current: [], next: [], following: [] }; courses.forEach(course => { const courseDate = parseDate(course['Start Date']); const courseMonth = courseDate.getMonth(); const courseYear = courseDate.getFullYear(); if (courseYear === currentYear || courseYear === currentYear + 1) { if (courseMonth === currentMonth && courseYear === currentYear) { grouped.current.push(course); } else if ( (courseMonth === currentMonth + 1 && courseYear === currentYear) || (currentMonth === 11 && courseMonth === 0 && courseYear === currentYear + 1) ) { grouped.next.push(course); } else if ( (courseMonth === currentMonth + 2 && courseYear === currentYear) || (currentMonth === 10 && courseMonth === 0 && courseYear === currentYear + 1) || (currentMonth === 11 && courseMonth === 1 && courseYear === currentYear + 1) ) { grouped.following.push(course); } } }); return grouped; } // Render courses to the DOM function renderCourses(courses, containerId) { const container = document.getElementById(containerId); container.innerHTML = ''; if (courses.length === 0) { container.innerHTML = '

No courses scheduled for this period.

'; return; } courses.forEach(course => { const card = document.createElement('custom-course-card'); card.setAttribute('title', course.Course); card.setAttribute('date', parseDate(course['Start Date']).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })); card.setAttribute('time', course.Time); card.setAttribute('location', course.Location); card.setAttribute('link', '#'); 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 = '

No upcoming courses scheduled.

'; 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 = `
${date.toLocaleDateString('en-US', { month: 'short' })}
${date.getDate()}

${course.Course}

${course.Time} • ${course.Location}

Instructor: ${course.Instructor}

`; upcomingDatesList.appendChild(dateItem); }); } // Initialize the page function init() { const groupedCourses = groupCoursesByMonth(coursesData); renderCourses(groupedCourses.current, 'current-month-courses'); renderCourses(groupedCourses.next, 'next-month-courses'); renderCourses(groupedCourses.following, 'following-month-courses'); // Update month selector labels with actual month names const now = new Date(); const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; const buttons = document.querySelectorAll('.month-btn'); buttons[0].textContent = monthNames[now.getMonth()]; buttons[1].textContent = monthNames[(now.getMonth() + 1) % 12]; buttons[2].textContent = monthNames[(now.getMonth() + 2) % 12]; } init();