从 FullCalendar v5 中删除日历的外部边界答案

【问题标题】：Removing outer borders of calendar from FullCalendar v5从 FullCalendar v5 中删除日历的外部边界
【发布时间】：2020-07-27 04:19:52
【问题描述】：

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

作为参考，我正在使用一个 css 文件来覆盖 fullcalendar 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;
}

【问题讨论】：

你的代码在哪里？请提供您的工作代码的最小示例
@AlwaysHelping。我提供了一些代码，显示正在创建的全日历和 css（颜色：绿色证明如果我选择这样做，我可以覆盖全日历 css）。我不知道这会有多大帮助，因为我的主要问题是能够在cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css 中找到正确的元素，以便我可以覆盖它。此外，我需要知道我是否有正确的 css 才能删除外部边框。
@AlwaysHelping 我该怎么做才能移除顶部和左侧？你根本不想要任何边界是什么意思。您介意提供一些我可以试用的代码吗？谢谢

标签： css fullcalendar fullcalendar-5

【解决方案1】：

您可以简单地在这个.fc-scrollgrid 类上使用border:none 来删除top 和left 的边框

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

工作小提琴演示：https://jsfiddle.net/alwayshelping/hte2pz0f/

在下面运行 sn-p 以查看它的工作情况。图片中没有您想要的边框。

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>

【讨论】：