Spaces:
Running
Running
| <!-- Version: v5 --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nitin AIML Sessions Calendar</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3a0ca3; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --gray: #6c757d; | |
| --sahil: #4361ee; | |
| --avneesh: #4cc9f0; | |
| --arpit: #7209b7; | |
| --bhargavi: #f72585; | |
| --capstone: #2ec4b6; | |
| --today: #d1e7dd; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .app-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .header { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| color: white; | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| } | |
| .calendar-container { | |
| background-color: white; | |
| border-radius: 15px; | |
| box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .calendar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #eaeaea; | |
| } | |
| .calendar-nav-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .calendar-nav-btn:hover { | |
| background-color: var(--secondary); | |
| transform: scale(1.05); | |
| } | |
| .calendar-title { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| color: var(--dark); | |
| margin: 0; | |
| } | |
| .calendar-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 8px; | |
| } | |
| .calendar-day-header { | |
| text-align: center; | |
| font-weight: 700; | |
| padding: 1rem 0.5rem; | |
| color: var(--gray); | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| background-color: #f8f9fa; | |
| border-radius: 10px; | |
| } | |
| .calendar-day { | |
| min-height: 140px; | |
| background-color: #f8f9fa; | |
| border-radius: 12px; | |
| padding: 1rem; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1px solid #eaeaea; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .calendar-day:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); | |
| border-color: var(--avneesh); | |
| } | |
| .empty-day { | |
| background-color: #e9ecef; | |
| border: 1px dashed #ced4da; | |
| min-height: 140px; | |
| border-radius: 12px; | |
| } | |
| .day-number { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| color: var(--dark); | |
| text-align: right; | |
| flex-shrink: 0; | |
| } | |
| .session-list { | |
| margin-top: 5px; | |
| padding-left: 0; | |
| list-style: none; | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| } | |
| .session-item { | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| margin-bottom: 0.8rem; | |
| font-size: 0.9rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| border-left: 4px solid #ccc; | |
| background-color: rgba(255, 255, 255, 0.85); | |
| line-height: 1.4; | |
| display: block; | |
| } | |
| .session-time { | |
| display: block; | |
| font-weight: 700; | |
| font-size: 0.85rem; | |
| margin-bottom: 5px; | |
| color: var(--primary); | |
| } | |
| .session-instructor { | |
| font-weight: 700; | |
| font-size: 1rem; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| .session-title { | |
| font-size: 0.9rem; | |
| display: block; | |
| color: var(--gray); | |
| } | |
| .session-count { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: var(--primary); | |
| color: white; | |
| font-size: 0.85rem; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| } | |
| .more-sessions-indicator { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| text-align: center; | |
| margin-top: 5px; | |
| font-style: italic; | |
| } | |
| .session-modal { | |
| border-radius: 15px; | |
| overflow: hidden; | |
| } | |
| .modal-session-item { | |
| background-color: white; | |
| border-radius: 12px; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); | |
| padding: 1.2rem; | |
| margin-bottom: 1rem; | |
| transition: transform 0.3s ease; | |
| border-left: 5px solid var(--primary); | |
| } | |
| .modal-session-item:hover { | |
| transform: translateX(5px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .modal-session-time { | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 8px; | |
| font-size: 1.1rem; | |
| } | |
| .modal-session-instructor { | |
| background-color: #e0e7ff; | |
| color: var(--secondary); | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-size: 1rem; | |
| display: inline-block; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .modal-session-title { | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| font-size: 1.2rem; | |
| } | |
| .instructor-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| margin-top: 1.5rem; | |
| padding: 1.2rem; | |
| background-color: #f8f9fa; | |
| border-radius: 12px; | |
| justify-content: center; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .legend-color { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 5px; | |
| } | |
| .legend-text { | |
| font-size: 1rem; | |
| color: var(--gray); | |
| font-weight: 600; | |
| } | |
| .today { | |
| background-color: var(--today) ; | |
| border-color: #a3cfbb ; | |
| } | |
| .other-month { | |
| background-color: #f0f2f5; | |
| color: #adb5bd; | |
| } | |
| .sahil-session { border-left-color: var(--sahil); } | |
| .avneesh-session { border-left-color: var(--avneesh); } | |
| .arpit-session { border-left-color: var(--arpit); } | |
| .bhargavi-session { border-left-color: var(--bhargavi); } | |
| .capstone-session { border-left-color: var(--capstone); } | |
| .no-sessions { | |
| color: #adb5bd; | |
| font-style: italic; | |
| font-size: 0.95rem; | |
| text-align: center; | |
| padding: 1rem 0; | |
| flex-grow: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @media (max-width: 992px) { | |
| .calendar-day { | |
| min-height: 120px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .calendar-grid { | |
| gap: 6px; | |
| } | |
| .calendar-day { | |
| min-height: 100px; | |
| padding: 0.8rem; | |
| } | |
| .calendar-day-header { | |
| padding: 0.8rem 0.3rem; | |
| font-size: 0.9rem; | |
| } | |
| .day-number { | |
| font-size: 1.1rem; | |
| } | |
| .session-item { | |
| padding: 0.6rem; | |
| font-size: 0.85rem; | |
| margin-bottom: 0.6rem; | |
| } | |
| .session-instructor { | |
| font-size: 0.95rem; | |
| } | |
| .calendar-title { | |
| font-size: 1.4rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <div class="header"> | |
| <h1><i class="fas fa-calendar-alt me-2"></i>Nitin AIML Sessions</h1> | |
| <p class="mb-0">Track all sessions and progress at a glance</p> | |
| </div> | |
| <div class="calendar-container"> | |
| <div class="calendar-header"> | |
| <button class="calendar-nav-btn" id="prev-month"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <h2 class="calendar-title" id="current-month">June 2025</h2> | |
| <button class="calendar-nav-btn" id="next-month"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="calendar-grid" id="calendar-grid-container"> | |
| <div class="calendar-day-header">Sun</div> | |
| <div class="calendar-day-header">Mon</div> | |
| <div class="calendar-day-header">Tue</div> | |
| <div class="calendar-day-header">Wed</div> | |
| <div class="calendar-day-header">Thu</div> | |
| <div class="calendar-day-header">Fri</div> | |
| <div class="calendar-day-header">Sat</div> | |
| <!-- Calendar days will be populated here --> | |
| </div> | |
| </div> | |
| <div class="instructor-legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: var(--sahil);"></div> | |
| <span class="legend-text">Sahil</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: var(--avneesh);"></div> | |
| <span class="legend-text">Avneesh</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: var(--arpit);"></div> | |
| <span class="legend-text">Arpit</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: var(--bhargavi);"></div> | |
| <span class="legend-text">Bhargavi</span> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="sessionModal" tabindex="-1"> | |
| <div class="modal-dialog modal-dialog-centered modal-lg"> | |
| <div class="modal-content session-modal"> | |
| <div class="modal-header bg-primary text-white"> | |
| <h5 class="modal-title" id="modalDateTitle">Sessions on <span id="modal-date"></span></h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="sessions-container"></div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Helper function to parse "DD-Mon-YY" to "YYYY-MM-DD" | |
| function parseExcelDate(dateStr) { | |
| const parts = dateStr.split('-'); | |
| const day = parts[0]; | |
| const monthMap = { | |
| 'Jan': '01', 'Feb': '02', 'Mar': '03', 'Apr': '04', 'May': '05', 'Jun': '06', | |
| 'Jul': '07', 'Aug': '08', 'Sep': '09', 'Oct': '10', 'Nov': '11', 'Dec': '12' | |
| }; | |
| const month = monthMap[parts[1]]; | |
| const year = `20${parts[2]}`; | |
| return `${year}-${month}-${day.padStart(2, '0')}`; | |
| } | |
| // Full session data from your original input | |
| const sessionsData = [ | |
| { date: '2025-06-21', time: '9 to 11 am', instructor: 'Sahil', title: 'MD - W01 - Intro to Model Deployment' }, | |
| { date: '2025-06-21', time: '12 to 2 pm', instructor: 'Avneesh', title: 'AML - W01 - Bagging' }, | |
| { date: '2025-06-22', time: '9 to 11 am', instructor: 'Arpit', title: 'NLP - W04 - RAG - Retrieval Augmented Generation' }, | |
| { date: '2025-06-22', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Python - W04 - Analyzing Text Data' }, | |
| { date: '2025-06-28', time: '9 to 11 am', instructor: 'Sahil', title: 'MD - W02 - Containerization' }, | |
| { date: '2025-06-28', time: '12 to 2 pm', instructor: 'Avneesh', title: 'AML - W02 - Boosting' }, | |
| { date: '2025-07-05', time: '12 to 2 pm', instructor: 'Avneesh', title: 'AML - W03 - Model Tuning' }, | |
| { date: '2025-07-06', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'ML - W01 - Linear Regression' }, | |
| { date: '2025-07-12', time: '9 to 11 am', instructor: 'Sahil', title: 'SQL - W01 - Querying Data with SQL' }, | |
| { date: '2025-07-13', time: '9 to 11 am', instructor: 'Arpit', title: 'CV - W01 - Image Processing' }, | |
| { date: '2025-07-13', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'ML - W02 - Decision Trees' }, | |
| { date: '2025-07-19', time: '9 to 11 am', instructor: 'Sahil', title: 'SQL - W02 - Advanced Querying' }, | |
| { date: '2025-07-19', time: '12 to 2 pm', instructor: 'Avneesh', title: 'NN - W01 - Intro to Neural Networks' }, | |
| { date: '2025-07-20', time: '9 to 11 am', instructor: 'Arpit', title: 'CV - W02 - CNN' }, | |
| { date: '2025-07-20', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'ML - W03 - K-Means Clustering' }, | |
| { date: '2025-08-03', time: '12 to 2 pm', instructor: 'Arpit', title: 'MD - W01 - Intro to Model Deployment' }, | |
| { date: '2025-08-03', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'AML - W01 - Bagging' }, | |
| { date: '2025-08-09', time: '12 to 2 pm', instructor: 'Avneesh', title: 'NLP - W01 - Word Embeddings' }, | |
| { date: '2025-08-10', time: '9 to 11 am', instructor: 'Arpit', title: 'MD - W02 - Containerization' }, | |
| { date: '2025-08-10', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'AML - W02 - Boosting' }, | |
| { date: '2025-08-16', time: '9 to 11 am', instructor: 'Sahil', title: 'Stats - W01 - Inferential Statistics Foundations' }, | |
| { date: '2025-08-16', time: '12 to 2 pm', instructor: 'Avneesh', title: 'NLP - W02 - Attention Mechanism and Transformers' }, | |
| { date: '2025-08-17', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'AML - W03 - Model Tuning' }, | |
| { date: '2025-08-23', time: '9 to 11 am', instructor: 'Sahil', title: 'Stats - W02 - Estimation and Hypothesis Testing' }, | |
| { date: '2025-08-23', time: '12 to 2 pm', instructor: 'Avneesh', title: 'NLP - W03 - LLM and Prompt Engineering' }, | |
| { date: '2025-08-24', time: '9 to 11 am', instructor: 'Arpit', title: 'SQL - W01 - Querying Data with SQL' }, | |
| { date: '2025-08-30', time: '9 to 11 am', instructor: 'Sahil', title: 'Stats - W03 - Common Statistical Tests' }, | |
| { date: '2025-08-30', time: '12 to 2 pm', instructor: 'Avneesh', title: 'NLP - W04 - RAG - Retrieval Augmented Generation' }, | |
| { date: '2025-08-31', time: '9 to 11 am', instructor: 'Arpit', title: 'SQL - W02 - Advanced Querying' }, | |
| { date: '2025-08-31', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NN - W01 - Intro to Neural Networks' }, | |
| { date: '2025-09-07', time: '9 to 11 am', instructor: 'Arpit', title: 'SQL - W03 - Enhancing Query Proficiency' }, | |
| { date: '2025-09-07', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NN - W02 - Optimizing Neural Networks' }, | |
| { date: '2025-09-20', time: '9 to 11 am', instructor: 'Sahil', title: 'MLOps - W02 - Introduction to DevOps and MLOps' }, | |
| { date: '2025-09-20', time: '12 to 2 pm', instructor: 'Avneesh', title: 'CV - W01 - Image Processing' }, | |
| { date: '2025-09-21', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NLP - W01 - Word Embeddings' }, | |
| { date: '2025-09-27', time: '9 to 11 am', instructor: 'Sahil', title: 'MLOps - W03 - Building ML Pipelines' }, | |
| { date: '2025-09-27', time: '12 to 2 pm', instructor: 'Avneesh', title: 'CV - W02 - CNN' }, | |
| { date: '2025-09-28', time: '9 to 11 am', instructor: 'Arpit', title: 'Stats - W01 - Inferential Statistics Foundations' }, | |
| { date: '2025-09-28', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NLP - W02 - Attention Mechanism and Transformers' }, | |
| { date: '2025-10-05', time: '9 to 11 am', instructor: 'Arpit', title: 'Stats - W02 - Estimation and Hypothesis Testing' }, | |
| { date: '2025-10-05', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NLP - W03 - LLM and Prompt Engineering' }, | |
| { date: '2025-10-12', time: '9 to 11 am', instructor: 'Arpit', title: 'Stats - W03 - Common Statistical Tests' }, | |
| { date: '2025-10-12', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NLP - W04 - RAG - Retrieval Augmented Generation' }, | |
| { date: '2025-10-18', time: '9 to 11 am', instructor: 'Sahil', title: 'GenAI - W01 - AI Assistant Development' }, | |
| { date: '2025-10-18', time: '12 to 2 pm', instructor: 'Avneesh', title: 'MD - W01 - Intro to Model Deployment' }, | |
| { date: '2025-10-19', time: '9 to 11 am', instructor: 'Arpit', title: 'Stats - W03 - Common Statistical Tests' }, | |
| { date: '2025-10-19', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'NLP - W04 - RAG - Retrieval Augmented Generation' }, | |
| { date: '2025-10-25', time: '9 to 11 am', instructor: 'Sahil', title: 'GenAI - W02- Fine-tuning LLMs' }, | |
| { date: '2025-10-25', time: '12 to 2 pm', instructor: 'Avneesh', title: 'MD - W02 - Containerization' }, | |
| { date: '2025-10-26', time: '9 to 11 am', instructor: 'Arpit', title: 'MLOps - W01 - Model Interpretability' }, | |
| { date: '2025-11-01', time: '9 to 11 am', instructor: 'Sahil', title: 'Capstone Orientation Session' }, | |
| { date: '2025-11-01', time: '12 to 2 pm', instructor: 'Avneesh', title: 'SQL - W01 - Querying Data with SQL' }, | |
| { date: '2025-11-02', time: '9 to 11 am', instructor: 'Arpit', title: 'MLOps - W02 - Introduction to DevOps and MLOps' }, | |
| { date: '2025-11-02', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'CV - W01 - Image Processing' }, | |
| { date: '2025-11-08', time: '9 to 11 am', instructor: 'Sahil', title: '1st Capstone Session' }, | |
| { date: '2025-11-08', time: '12 to 2 pm', instructor: 'Avneesh', title: 'SQL - W02 - Advanced Querying' }, | |
| { date: '2025-11-09', time: '9 to 11 am', instructor: 'Arpit', title: 'MLOps - W03 - Building ML Pipelines' }, | |
| { date: '2025-11-09', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'CV - W02 - CNN' }, | |
| { date: '2025-11-15', time: '9 to 11 am', instructor: 'Sahil', title: '2nd Capstone Session' }, | |
| { date: '2025-11-15', time: '12 to 2 pm', instructor: 'Avneesh', title: 'SQL - W03 - Enhancing Query Proficiency' }, | |
| { date: '2025-11-16', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Stats - W01 - Inferential Statistics Foundations' }, | |
| { date: '2025-11-22', time: '9 to 11 am', instructor: 'Sahil', title: '3rd Capstone Session' }, | |
| { date: '2025-11-23', time: '9 to 11 am', instructor: 'Arpit', title: 'GenAI - W01 - AI Assistant Development' }, | |
| { date: '2025-11-23', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'MD - W01 - Intro to Model Deployment' }, | |
| { date: '2025-11-29', time: '9 to 11 am', instructor: 'Sahil', title: '4th Capstone Session' }, | |
| { date: '2025-11-30', time: '9 to 11 am', instructor: 'Arpit', title: 'GenAI - W02- Fine-tuning LLMs' }, | |
| { date: '2025-11-30', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'MD - W02 - Containerization' }, | |
| { date: '2025-12-06', time: '12 to 2 pm', instructor: 'Avneesh', title: 'Stats - W01 - Inferential Statistics Foundations' }, | |
| { date: '2025-12-13', time: '12 to 2 pm', instructor: 'Avneesh', title: 'Stats - W02 - Estimation and Hypothesis Testing' }, | |
| { date: '2025-12-14', time: '9 to 11 am', instructor: 'Arpit', title: 'Capstone Orientation Session' }, | |
| { date: '2025-12-14', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'SQL - W01 - Querying Data with SQL' }, | |
| { date: '2025-12-20', time: '12 to 2 pm', instructor: 'Avneesh', title: 'Stats - W03 - Common Statistical Tests' }, | |
| { date: '2025-12-21', time: '9 to 11 am', instructor: 'Arpit', title: '1st Capstone Session' }, | |
| { date: '2025-12-21', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'SQL - W02 - Advanced Querying' }, | |
| { date: '2025-12-28', time: '9 to 11 am', instructor: 'Arpit', title: '2nd Capstone Session' }, | |
| { date: '2025-12-28', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'SQL - W03 - Enhancing Query Proficiency' }, | |
| { date: '2026-01-03', time: '12 to 2 pm', instructor: 'Avneesh', title: 'MLOps - W01 - Model Interpretability' }, | |
| { date: '2026-01-04', time: '9 to 11 am', instructor: 'Arpit', title: '3rd Capstone Session' }, | |
| { date: '2026-01-10', time: '12 to 2 pm', instructor: 'Avneesh', title: 'MLOps - W02 - Introduction to DevOps and MLOps' }, | |
| { date: '2026-01-11', time: '9 to 11 am', instructor: 'Arpit', title: '4th Capstone Session' }, | |
| { date: '2026-01-17', time: '12 to 2 pm', instructor: 'Avneesh', title: 'MLOps - W03 - Building ML Pipelines' }, | |
| { date: '2026-01-18', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Stats - W01 - Inferential Statistics Foundations' }, | |
| { date: '2026-01-25', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Stats - W02 - Estimation and Hypothesis Testing' }, | |
| { date: '2026-01-31', time: '12 to 2 pm', instructor: 'Avneesh', title: 'GenAI - W01 - AI Assistant Development' }, | |
| { date: '2026-02-01', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Stats - W03 - Common Statistical Tests' }, | |
| { date: '2026-02-07', time: '12 to 2 pm', instructor: 'Avneesh', title: 'GenAI - W02- Fine-tuning LLMs' }, | |
| { date: '2026-02-15', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'MLOps - W01 - Model Interpretability' }, | |
| { date: '2026-02-21', time: '12 to 2 pm', instructor: 'Avneesh', title: 'Capstone Orientation Session' }, | |
| { date: '2026-02-22', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'MLOps - W02 - Introduction to DevOps and MLOps' }, | |
| { date: '2026-02-28', time: '12 to 2 pm', instructor: 'Avneesh', title: '1st Capstone Session' }, | |
| { date: '2026-03-01', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'MLOps - W03 - Building ML Pipelines' }, | |
| { date: '2026-03-07', time: '12 to 2 pm', instructor: 'Avneesh', title: '2nd Capstone Session' }, | |
| { date: '2026-03-14', time: '12 to 2 pm', instructor: 'Avneesh', title: '3rd Capstone Session' }, | |
| { date: '2026-03-15', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'GenAI - W01 - AI Assistant Development' }, | |
| { date: '2026-03-21', time: '12 to 2 pm', instructor: 'Avneesh', title: '4th Capstone Session' }, | |
| { date: '2026-03-22', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'GenAI - W02- Fine-tuning LLMs' }, | |
| { date: '2026-04-05', time: '12 to 2 pm', instructor: 'Bhargavi', title: 'Capstone Orientation Session' }, | |
| { date: '2026-04-12', time: '12 to 2 pm', instructor: 'Bhargavi', title: '1st Capstone Session' }, | |
| { date: '2026-04-19', time: '12 to 2 pm', instructor: 'Bhargavi', title: '2nd Capstone Session' }, | |
| { date: '2026-04-26', time: '12 to 2 pm', instructor: 'Bhargavi', title: '3rd Capstone Session' }, | |
| { date: '2026-05-03', time: '12 to 2 pm', instructor: 'Bhargavi', title: '4th Capstone Session' } | |
| ]; | |
| // Instructor colors | |
| const instructorColors = { | |
| 'Sahil': 'var(--sahil)', | |
| 'Avneesh': 'var(--avneesh)', | |
| 'Arpit': 'var(--arpit)', | |
| 'Bhargavi': 'var(--bhargavi)', | |
| 'Capstone': 'var(--capstone)' | |
| }; | |
| // Current date and calendar state | |
| let currentDate = new Date(2025, 5, 1); // June 2025 | |
| const today = new Date(); | |
| // Initialize calendar | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderCalendar(); | |
| setupEventListeners(); | |
| }); | |
| // Render the calendar | |
| function renderCalendar() { | |
| const calendarGridContainer = document.getElementById('calendar-grid-container'); | |
| // Clear existing day elements, but keep headers | |
| while (calendarGridContainer.children.length > 7) { | |
| calendarGridContainer.removeChild(calendarGridContainer.lastChild); | |
| } | |
| // Set current month title | |
| document.getElementById('current-month').textContent = | |
| currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); | |
| // Get first day of month and last day of month | |
| const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); | |
| const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); | |
| // Get the day of the week for the first day (0 = Sunday, 1 = Monday, etc) | |
| const firstDayOfWeek = firstDay.getDay(); | |
| // Add empty cells for the leading days of the week before the 1st of the month | |
| for (let i = 0; i < firstDayOfWeek; i++) { | |
| const emptyDiv = document.createElement('div'); | |
| emptyDiv.className = 'empty-day'; | |
| calendarGridContainer.appendChild(emptyDiv); | |
| } | |
| // Create current month's days | |
| for (let day = 1; day <= lastDay.getDate(); day++) { | |
| const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); | |
| const dateStr = formatDate(date); | |
| calendarGridContainer.appendChild(createDayElement(day, dateStr)); | |
| } | |
| // Add empty cells for the trailing days of the week after the last day of the month | |
| const totalDaysInGrid = calendarGridContainer.children.length - 7; // Subtracting header days | |
| const remainingCellsInLastRow = (7 - (totalDaysInGrid % 7)) % 7; | |
| for (let i = 0; i < remainingCellsInLastRow; i++) { | |
| const emptyDiv = document.createElement('div'); | |
| emptyDiv.className = 'empty-day'; | |
| calendarGridContainer.appendChild(emptyDiv); | |
| } | |
| } | |
| // Create a day element for the calendar | |
| function createDayElement(day, dateStr, isOtherMonth = false) { | |
| const dayElement = document.createElement('div'); | |
| dayElement.className = `calendar-day ${isOtherMonth ? 'other-month' : ''}`; | |
| dayElement.setAttribute('data-date', dateStr); | |
| // Check if this day has sessions | |
| const sessions = sessionsData.filter(session => session.date === dateStr); | |
| const sessionCount = sessions.length; | |
| // Add day number | |
| const dayNumber = document.createElement('div'); | |
| dayNumber.className = 'day-number'; | |
| dayNumber.textContent = day; | |
| dayElement.appendChild(dayNumber); | |
| if (sessionCount > 0) { | |
| // Display up to 2 sessions directly on the calendar day | |
| const sessionsToDisplay = sessions.slice(0, 2); | |
| sessionsToDisplay.forEach(session => { | |
| const sessionItem = document.createElement('div'); | |
| sessionItem.className = `session-item ${session.instructor.toLowerCase()}-session`; | |
| const fullTime = session.time; | |
| // Abbreviate the title for calendar view | |
| const titleParts = session.title.split(' - '); | |
| let displayTitle = titleParts[0]; | |
| if (titleParts.length > 1) { | |
| displayTitle += ` - ${titleParts[1]}`; | |
| } | |
| sessionItem.innerHTML = ` | |
| <span class="session-time">${fullTime}</span> | |
| <span class="session-instructor">${session.instructor}</span> | |
| <span class="session-title">${displayTitle}</span> | |
| `; | |
| dayElement.appendChild(sessionItem); | |
| }); | |
| // Show session count if more sessions exist than displayed | |
| if (sessionCount > 2) { | |
| const moreSessions = document.createElement('div'); | |
| moreSessions.className = 'more-sessions-indicator'; | |
| moreSessions.textContent = `+${sessionCount - 2} more`; | |
| dayElement.appendChild(moreSessions); | |
| } | |
| } else { | |
| // Show "No sessions" message | |
| const noSessions = document.createElement('div'); | |
| noSessions.className = 'no-sessions'; | |
| noSessions.textContent = 'No sessions'; | |
| dayElement.appendChild(noSessions); | |
| } | |
| // Highlight today | |
| if (dateStr === formatDate(today)) { | |
| dayElement.classList.add('today'); | |
| } | |
| // Add click event to show modal with all sessions for the day | |
| dayElement.addEventListener('click', () => { | |
| const clickedDate = dayElement.getAttribute('data-date'); | |
| const sessionsForDay = sessionsData.filter(session => session.date === clickedDate); | |
| showSessionsModal(clickedDate, sessionsForDay); | |
| }); | |
| return dayElement; | |
| } | |
| // Show sessions modal for a specific date | |
| function showSessionsModal(dateStr, sessions) { | |
| document.getElementById('modal-date').textContent = | |
| new Date(dateStr).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); | |
| const sessionsContainer = document.getElementById('sessions-container'); | |
| sessionsContainer.innerHTML = ''; | |
| if (sessions.length > 0) { | |
| sessions.forEach(session => { | |
| const sessionElement = document.createElement('div'); | |
| sessionElement.className = 'modal-session-item'; | |
| sessionElement.style.borderLeftColor = instructorColors[session.instructor] || '#4361ee'; | |
| sessionElement.innerHTML = ` | |
| <div class="modal-session-time">${session.time}</div> | |
| <div class="modal-session-instructor">${session.instructor}</div> | |
| <div class="modal-session-title">${session.title}</div> | |
| `; | |
| sessionsContainer.appendChild(sessionElement); | |
| }); | |
| } else { | |
| sessionsContainer.innerHTML = '<p class="text-muted text-center">No sessions scheduled for this day.</p>'; | |
| } | |
| // Show the modal | |
| const modal = new bootstrap.Modal(document.getElementById('sessionModal')); | |
| modal.show(); | |
| } | |
| // Setup event listeners | |
| function setupEventListeners() { | |
| document.getElementById('prev-month').addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() - 1); | |
| renderCalendar(); | |
| }); | |
| document.getElementById('next-month').addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() + 1); | |
| renderCalendar(); | |
| }); | |
| } | |
| // Helper function to format date as YYYY-MM-DD | |
| function formatDate(date) { | |
| const year = date.getFullYear(); | |
| const month = String(date.getMonth() + 1).padStart(2, '0'); | |
| const day = String(date.getDate()).padStart(2, '0'); | |
| return `${year}-${month}-${day}`; | |
| } | |
| </script> | |
| </body> | |
| </html> |