全日历应用边框突出显示事件

问题描述

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

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

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

解决方法

这是由于边界瓦解。改用大纲：

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>

或框阴影：

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

var calendar = new FullCalendar.Calendar(calendarEl,});

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