Calendar is shown

app/javascript/controllers/main_calendar_controller.js

@@ -3,14 +3,20 @@ import {Controller} from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    const calendar = new tui.Calendar(this.element, {
+    const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
       week: {
         taskView: false,
-        eventView: true,
-        milestone: false,
-        scheduleView: ['time'], // This will hide the all-day section
+        scheduleView: false,
+        eventView: ['time'],
+        hourStart: 4,
+        hourEnd: 21,
+      },
+      template: {
+        timegridDisplayPrimaryTime({time}) {
+          return `${time.getHours()} sati`;
+        }
       },
       calendars: [
         {
@@ -21,6 +27,27 @@ export default class extends Controller {
       ],
     });
 
+    this.calendar = calendar;
+    this.getCalendardata();
     calendar.render();
   }
+
+  getCalendardata() {
+    var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
+    window.reservations = reservations;
+    reservations.forEach(reservation => {
+      this.calendar.createSchedules([
+        {
+          id: reservation.id,
+          calendarId: 'cal1',
+          title: reservation.customer,
+          category: 'time',
+          dueDateClass: reservation.dueDateClass,
+          location: reservation.team.name,
+          start: reservation.start_time,
+          end: reservation.end_time
+        }
+      ])
+    });
+  }
 }