时间戳

首页 > 解决方案 > 从 FullCalendar v5 中删除日历的外部边界

css - 从 FullCalendar v5 中删除日历的外部边界

问题描述

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

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

我正在寻找的元素可能在 cdn 中用于 fullcalendarv5 的 css 方面：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;
}

标签： cssfullcalendarfullcalendar-5

解决方案

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

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

工作小提琴演示：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>

推荐阅读