Calendar is fullscreen

app/javascript/controllers/application.js

@@ -1,5 +1,6 @@
 import { Application } from "@hotwired/stimulus"
 
+
 const application = Application.start()
 
 // Configure Stimulus development experience

app/javascript/controllers/hello_controller.js

@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}

app/javascript/controllers/main_calendar_controller.js

@@ -0,0 +1,26 @@
+import {Controller} from "@hotwired/stimulus"
+// Connects to data-controller="main-calendar"
+
+export default class extends Controller {
+  connect() {
+    const calendar = new tui.Calendar(this.element, {
+      defaultView: 'week',
+      usageStatistics: false,
+      week: {
+        taskView: false,
+        eventView: true,
+        milestone: false,
+        scheduleView: ['time'], // This will hide the all-day section
+      },
+      calendars: [
+        {
+          id: 'cal1',
+          name: 'Work',
+          backgroundColor: '#00a9ff',
+        },
+      ],
+    });
+
+    calendar.render();
+  }
+}