我一直在尝试删除日历的外边框,但是我设法做到的最好的方法是删除所有边框(或仅删除水平/垂直边框)。我只需要去掉外边框(图片显示了我需要的东西;日历的底部不在屏幕截图中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;
}