[Tui Calendar] Change events lenght + detect when user cover/overlay existed event. [Unfinished]

index.js

var Calendar = tui.Calendar;
var calendar = new Calendar('#calendar', {
  defaultView: 'week',
  taskView: false,
  week: {
    workweek: true // show only 5 days except for weekend
  }
});

calendar.on('beforeCreateSchedule', function(event) {

  let hour = event.start.getHours()
  let serviceID = document.querySelector('input[name="service"]:checked').value
  let service_name = document.getElementById(serviceID).innerText
  let details = document.getElementById("booking-details")
  let minTime = sessionStorage.getItem('minTime')
  let maxTime = sessionStorage.getItem('maxTime')
  let interval = sessionStorage.getItem('interval')

  if (hour <= minTime || hour >= maxTime) {
    document.querySelector('.tui-full-calendar-time-guide-creation').style.display = "none"
  } else {
    event.end = new Date(event.start + interval * 60000)

    timestamp_Start = event.start
    timestamp_End = event.end
    human_time_start = timestamp_Start.getHours() + ":" + timestamp_Start.getMinutes()
    human_time_end = timestamp_End.getHours() + ":" + timestamp_End.getMinutes()
    human_day = timestamp_Start.getDay() + "." + timestamp_Start.getMonth() + "." + timestamp_Start.getFullYear()

    document.querySelector(".tui-full-calendar-time-guide-creation").style.height = interval * 0.86 + "px"
    document.querySelector(".tui-full-calendar-time-guide-creation").innerText = human_time_start + "-" + human_time_end

    let blue = document.querySelector(".tui-full-calendar-time-guide-creation")
    let headBlue = event.guide._styleStart[0]
    let bodyBlue = blue.offsetHeight
    let bigBlue = headBlue+bodyBlue

    let green = document.querySelectorAll(".tui-full-calendar-time-date-schedule-block")

    var greenS = [];
    for (var i = 0; i < green.length; i++) {

      greenS.push({
          headGreen: green[i].offsetTop,
          bodyGreen: green[i].offsetHeight,
          bigGreen: green[i].offsetTop+green[i].offsetHeight,
          id: green[i].parentNode.parentNode.className.substr(37, 2)
      });
    };

    greenS.forEach(function(entry) {
      let oversize = entry.headGreen - headBlue
      let daYid = blue.parentElement.className
      if (headBlue < entry.headGreen && oversize < bodyBlue && daYid.substr(37, 2) == entry.id) {
        setTimeout(function(){
          //zmieniam
     document.querySelector('.tui-full-calendar-time-guide-creation').style.border = "1px solid rgb(138, 27, 42)"
     document.querySelector('.tui-full-calendar-time-guide-creation').style.backgroundColor = "rgba(138, 27, 42, 0.66)"
},10);

setTimeout(function(){
  //przywracam do normalności
     document.querySelector('.tui-full-calendar-time-guide-creation').style.border = "1px solid rgb(81, 92, 230)"
     document.querySelector('.tui-full-calendar-time-guide-creation').style.backgroundColor = "rgba(81, 92, 230, 0.05)"
},1000);
      }
    });