从 FullCalendar v5 中删除日历的外边框

Question

我一直在尝试删除我日历的外边框，但我最好的办法是删除所有边框（或仅删除 horizontal/vertical 边框）。我只需要去掉外边框（图片显示我需要去掉的东西；日历底部不在屏幕截图中 https://i.stack.imgur.com/hXAYP.png）。到目前为止，我已经在 chrome 开发工具中花费了很长时间，试图弄清楚我在哪里可以做到这一点，但我似乎找不到解决方案。

作为参考，我正在使用 css 文件来覆盖完整日历 css。我认为我的代码不是必需的，因为我什至找不到只会删除外边框的正确元素。我正在使用 border-style: none !important; 我也尝试过 border: 0px !important;。

我要查找的元素可能在 fullcalendarv5 css 方面的 cdn 中：https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css

编辑：代码

cal.html样本：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'timeGridWeek',
      events: '/event_view/',
      headerToolbar: {
        left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
      },
      height:'97vh',

    });
    calendar.render();
  });
</script>

{% load static %}  
<link rel="stylesheet" href="{% static 'calendar_app/cal.css' %}" type="text/css">

<!-- Event making stuff; not relevant-->
<div class="content-calendar" id="content", name="content-calendar">
  <div id='calendar'></div>
</div>

cal.css样本：

.fc {
color: green;
}
./*THE ELEMENT I CURRENTLY CANNOT FIND WOULD GO HERE*/ {
border-style: none !important;
}

Answer 1

您可以简单地在 .fc-scrollgrid class 上使用 border:none 来删除 top 和 left

的边框

要从侧面移除边框，我们需要使用 last-of-type 伪 class 仅使用 .fc-scrollgrid td:last-of-type

从 td 移除边框右侧

Working Fiddle Demo: https://jsfiddle.net/alwayshelping/hte2pz0f/

运行下面的代码片段以查看它是否正常工作。图片中没有你想要的边框。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    /*events: '/event_view/',*/  
    headerToolbar: {
      left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
    },
    height: '97vh',

  });
  calendar.render();
});

.fc-scrollgrid {
  border: none !important;
}

.fc-scrollgrid td:last-of-type {
  border-right: none !important;
}

<!-- Event making stuff; not relevant-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.js"></script>

<div class="content-calendar" id="content" , name="content-calendar">
  <div id='calendar'></div>
</div>

从 FullCalendar v5 中删除日历的外边框

Removing outer borders of calendar from FullCalendar v5

css

fullcalendar

fullcalendar-5