old-zsterminator/app/javascript/controllers/main_calendar_controller.js

import {Controller} from "@hotwired/stimulus"
// Connects to data-controller="main-calendar"

export default class extends Controller {
  connect() {
    const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
      defaultView: 'week',
      usageStatistics: false,
      week: {
        taskView: false,
        scheduleView: false,
        eventView: ['time'],
        hourStart: 4,
        hourEnd: 21,
      },
      template: {
        timegridDisplayPrimaryTime({time}) {
          return `${time.getHours()} sati`;
        }
      },
      calendars: [
        {
          id: 'cal1',
          name: 'Work',
          backgroundColor: '#00a9ff',
        },
      ],
    });

    window.calendar = calendar;
    this.getCalendardata();
    calendar.render();
  }

  getCalendardata() {
    var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
    window.reservations = reservations;
    reservations.forEach(reservation => {
      window.calendar.createEvents([
        {
          id: reservation.id,
          calendarId: 'cal1',
          title: reservation.customer.name,
          category: 'time',
          dueDateClass: reservation.dueDateClass,
          location: reservation.team.name,
          start: reservation.start_time,
          end: reservation.end_time
        }
      ])
    });
  }
}