FullCalendar 6：如何隐藏滚动条边框及残留灰色线条

我在VS Code开发的Web应用中使用FullCalendar.js 6.1.15版本，在Chrome浏览器测试，目标是打造dayGridMonth视图的自定义深色版本。

我的日历配置代码：

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  dateClick: function() {
    alert('a day has been clicked!');
  },
  firstDay: '1',
  fixedWeekCount: false,
  slotEventOverlap: false,
  themeSystem: 'bootstrap5',
  height: 'auto'
});
calendar.render();

我尝试了用CSS隐藏滚动条、移除所有边框，但日历侧边和底部仍有两条灰色线条无法消除，已经将height设为auto，以下是我用的CSS代码：

::-webkit-scrollbar {
    display: none !important; /* 完全隐藏Webkit浏览器中的滚动条 */
}

#calendar {
    background-color: none;
    font-size: 0.85rem;
}

.fc-col-header-cell-cushion, .fc-day-header {
    color: rgb(180, 180, 180);
    text-decoration: none;
    font-size: 13px;
}

.fc-col-header-cell {
    border: none !important ;
    background-color: transparent !important;
}

.fc-col-header-cell:hover {
    background-color: #409AFF;
    cursor: pointer;
}

.fc-col-header-cell:hover .fc-col-header-cell-cushion {
    background-color: #409AFF;
    color: white;
}

.fc-daygrid-day {
    border: none !important;
}

.fc-daygrid-day:hover {
    cursor: pointer;
}

.fc-daygrid-day:hover .fc-daygrid-day-number {
    color: #40d0ff;
    font-size: 900;
}

.fc-daygrid-day-number {
    color: rgb(180, 180, 180);
    text-decoration: none;
    font-family: 'Varela Round', sans-serif;
    font-size: 12px;
}

.fc-toolbar {
    font-size: 12px;
    align-content:center;
    padding-bottom: 5px;
    border-bottom: solid 1px #40d0ff;
}

.fc-toolbar .fc-toolbar-title {
    font-family: 'Varela Round', sans-serif;
    color: white;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
    font-size: 16px;
}

.fc-prev-button, .fc-next-button, .fc-today-button {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.fc-prev-button:hover .fc-icon:before,
.fc-next-button:hover .fc-icon:before, 
.fc-today-button:hover {
    color: #40d0ff !important;
}

.fc-prev-button .fc-icon:before {
    content: "<";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: rgb(180, 180, 180);
    font-size: 15px;
    font-weight: 900;
    padding-left:4px;
    padding-top:1px;
}

.fc-next-button .fc-icon:before {
    content: ">";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: rgb(180, 180, 180);
    font-size: 15px;
    font-weight: 900;
    padding-left:4px;
    padding-top:1px;
}

.fc-scrollgrid {
    border: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overflow: hidden !important;
}

.fc-daygrid {
    border-collapse: collapse !important; /* 消除网格间隙 */
    border: none !important;
    background-color: transparent !important;
}
.fc-scrollgrid table  {
    background-color: none !important;
    border: none !important;
    overflow: hidden !important;
}

请问有没有人遇到过这个问题？如何消除这些线条？非常感谢！

解决方法 #

这两条灰色线条来自FullCalendar的fc-scrollgrid-sync-table元素的边框，以及同步容器的默认样式，添加以下CSS规则即可彻底移除：

/* 移除滚动网格同步表格的边框 */
.fc-scrollgrid-sync-table {
    border: none !important;
}

/* 处理同步容器的残留边框 */
.fc-scrollgrid-sync-inner {
    border: none !important;
}

/* 确保日历根容器无额外边框和溢出 */
.fc {
    border: none !important;
    overflow: hidden !important;
}

如果#calendar容器有默认内边距或边框，可补充：

#calendar {
    border: none !important;
    padding: 0 !important;
}

原因是使用bootstrap5主题时，FullCalendar会生成同步表格来维持网格对齐，这些元素默认带有边框，之前的CSS未覆盖到这个层级，添加上述规则后就能彻底隐藏残留的灰色线条。

内容的提问来源于stack exchange，提问作者Stéphane