Как правильно уменьшить календарь при адаптиве?

Question

Дошел до разрешения где требуется уменьшить календарь, его вертикальные стороны уже впритык к границам экрана. Вроде уменьшил ширину, но экран всё равно "плывет", я думаю из-за того, что всё, что идёт до дива fc-daygrid-body fc-daygrid-body-unbalanced не уменьшается в размерах и выходит за границы экрана. Может ошибаюсь, но по инспектору показалось так. Не знаю как поправить ситуацию, поэтому пишу сюда, в доке нашел только платный плагин, может, что-то в упор не вижу? Буду признателен если укажите на решение дилеммы

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
     headerToolbar: false,
    dayHeaders: false,
    dayCellContent: function(e) {
      
      if(e.date.getDate() < 10){
        return {
          html: `<span class="date">0${e.date.getDate()}</span>|<span class="month">${e.date.toLocaleDateString('ru-RU', {month: 'short'})}</span>`
          
        }
      }
      else{
        return {
          html: `<span class="date">${e.date.getDate()}</span>|<span class="month">${e.date.toLocaleDateString('ru-RU', {month: 'short'})}</span>`
          
        }
      }
        
        
      
      
      
    },
    
    eventClassNames: 'event-class',
    eventContent: function(arg) {
      
      return {
        html: '<div><img src="https://placehold.co/50x70"/></div>'
        
      }
      
    },
    events: [{
        title: 'event 1',
        date: '2025-02-04'
      },
      {
        title: 'event 2',
        date: '2025-02-17'
      }
    ]
  });
  // console.log(document.querySelector('.date'))
    
    calendar.render();
     
  });

   

/*style.css*/
  
body{
   background-color: #131313; 
}
.title__game__release__calendar{
    display: flex;
    justify-content: center;
    padding: 100px 0 52px 0;
}
.title__game__release__calendar h2{
    color: #EB5284;
    font-size: 115px;
    text-transform: uppercase;
}

.game__release__calendar #calendar{
    width: 812px;
   margin: 0 auto;
   padding: 0 0 100px 0;
   
}


.game__release__calendar #calendar a{
color: #ffffff;
}
 .game__release__calendar #calendar.fc td, .fc th {
    border-style: none;
  } 
  .game__release__calendar #calendar .fc-scrollgrid.fc-scrollgrid-liquid{
    border: none;
   }
   .fc-daygrid-day-frame.fc-scrollgrid-sync-inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    border: solid 1px #EB5284;;
  }
  
  
  .event-class {
    margin: 0 !important;
    font-size: 0;
    border: none;
  }
  
  .cell-class {
    background: black;
    color: rgb(188, 179, 207);
    --fc-border-color: #2d2d2d;
  @media(max-width:819px){
 #calendar table.fc-scrollgrid-sync-table{
    width: 690px !important; 
    margin: 0 auto;
}
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Document</title>
</head>
<body>

<section class="game__release__calendar">
            <div class="container">
                <div class="title__game__release__calendar">
                    <h2>Календарь релизов</h2>
                </div>
                <div id='calendar'></div>
            </div>
        </section>
   <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script src="scripts/calendar.js"></script>
</body>

</html>

p.s. ещё был вариант адаптива с bootstrap`ом, но я не проверял это. upd: ссылка на библиотеку https://fullcalendar.io/

Answer 1

Нашел для себя решение, просто уменьшить ширину div`a календаря. Всё остальное, уменьшится само.

@media (max-width: 819px) {
.game__release__calendar #calendar {
    width: 666px;
}
}

Не знаю насколько это правильно, но у меня пока работает, если что заредачу ответ.

upd: вроде всё гуд

БЛОГ НА HUSL

Как правильно уменьшить календарь при адаптиве?

Ответы (1 шт):