Fullcalendar 应用边框来突出显示事件

Question

我正在尝试为突出显示的事件添加边框（当用户单击单元格时），如下所示：

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

但是正如您在此JSFiddle中看到的那样，它仅将边框应用于某些边缘。如何为整个单元格应用边框？

Answer 1

这是由于边界折叠。改为使用大纲：

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>

或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>

Fullcalendar 应用边框来突出显示事件

Fullcalendar apply border to highlight event

css

fullcalendar

fullcalendar-scheduler