Removing outer borders of calendar from FullCalendar v5 - css

Question

I've been trying to remove the outer borders of my calendar, however the best I've managed is to get all the borders removed (or just horizontal/vertical borders removed). I only need the outer borders gone (the picture shows what I need gone; the bottom of the calendar isn't in the screenshot https://i.stack.imgur.com/hXAYP.png). So far, I've spent a long in chrome dev tools trying to figure out exactly where I can do this, but I cannot seem to find a solution.
For reference, I'm using a css file to override the fullcalendar css. I don't think my code is necessary, as I can't even find the right element that would only remove the outer borders. I am using border-style: none !important; I have tried border: 0px !important; as well.
The element I am looking for is probably in the cdn for the css aspect of fullcalendarv5: https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css
EDIT: Code
cal.html sample:
<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 sample:
.fc {
color: green;
}
./*THE ELEMENT I CURRENTLY CANNOT FIND WOULD GO HERE*/ {
border-style: none !important;
}

Answer 1

You can simply use border:none on this .fc-scrollgrid class to remove border from top and left
To remove border from the side we need to use last-of-type pseudo-class to only remove border-right from td using .fc-scrollgrid td:last-of-type
Working Fiddle Demo: https://jsfiddle.net/alwayshelping/hte2pz0f/
Run snippet below to see it working. There are no borders as exactly as you wanted in the picture.
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>

Answer 2

use this scss styles (hide all out borders)
.calendar-wrapper {
.fc-scrollgrid {
border-color: transparent !important;
}
.fc-scrollgrid td:last-of-type {
border-right-color: transparent !important;
}
.fc-scrollgrid-section.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent !important;
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
}
th[role='presentation'] {
border-right-color: transparent !important;
}
}