Fullcalendar apply border to highlight event

Question

I'm trying to add a border to the highlighted event (when a user clicks in a cell) like such:

.fc-highlight
{
  background-color: #ccc !important;
  border-color: #000 !important;
}

But as you can see in this JSFiddle, it only applies the border to some edges. How do I apply a border to the whole cell?

Answer 1

it's due to border collapsing. Use outline instead:

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: ['interaction', 'dayGrid'],
  defaultView: 'dayGridMonth',
  allDaySlot: false,
  timeFormat: 'H:mm',
  disableResizing: true,
  displayEventTime: false,
  displayEventEnd: false,
  slotDuration: '01:00',
  minTime: '00:00',
  maxTime: '23:00',
  selectable: true,
  firstDay: 1,
});

calendar.render();

.fc-highlight {
  background-color: #ccc !important;
  outline:1px solid #000;
  outline-offset:-1px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">

<div id="calendar">

</div>

Or box-shadow:

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: ['interaction', 'dayGrid'],
  defaultView: 'dayGridMonth',
  allDaySlot: false,
  timeFormat: 'H:mm',
  disableResizing: true,
  displayEventTime: false,
  displayEventEnd: false,
  slotDuration: '01:00',
  minTime: '00:00',
  maxTime: '23:00',
  selectable: true,
  firstDay: 1,
});

calendar.render();

.fc-highlight {
  background-color: #ccc !important;
  box-shadow:0 0 0 1px #000 inset;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">

<div id="calendar">

</div>