Removing outer borders of calendar from FullCalendar v5

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.sstatic.net/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>