make sure you add the pre-requisites from https://github.com/nhn/tui.calendar

components/calendar.js

@@ -11,25 +11,54 @@ class CustomCalendar extends HTMLElement {
         .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>
     `;
 
-    // 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');
+    // 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',

index.html

@@ -8,7 +8,15 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="components/navbar.js"></script>
+    <!-- Toast UI Calendar dependencies -->
+    <link rel="stylesheet" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">
+    <link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
+    <link rel="stylesheet" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css">
+    <script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
+    <script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
+    <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
+    <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
+<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>