主页 / 问题 / 1607334
Accepted
user658408
Asked:2025-02-20 22:33:58 +0000 UTC2025-02-20 22:33:58 +0000 UTC

适配时如何适当缩减日历？

  • 772

我达到了需要缩小日历的分辨率，它的垂直边已经靠近屏幕边框。似乎我减小了宽度，但屏幕仍然“浮动”，我想是因为 fc-daygrid-body fc-daygrid-body-unbalanced div 之前的所有内容都没有减小尺寸并且超出了屏幕边界。我可能错了，但检查员就是这么想的。我不知道该如何解决这个问题，所以我在这里写下来。在文档中我只找到了一个付费插件。也许我遗漏了什么？如果您能指出解决这一困境的方法，我将不胜感激。

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/[email protected]/index.global.min.js'></script>
    <script src="scripts/calendar.js"></script>
</body>

</html>

p.s. 还有一个带有 bootstrap 的自适应版本，但我没有检查。更新：图书馆链接https://fullcalendar.io/

javascript

1 个回答

  1. Best Answer

    我自己找到了一个解决方案，只需减少日历div的宽度。其余一切都会自行减少。

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

    我不知道这是否正确，但到目前为止对我来说还是有用的。如果发生任何事情，我会发布回复。

    更新：一切似乎都很好

    • 0

相关问题