如何解决全日历应用边框突出显示事件
我正在尝试向突出显示的事件(当用户单击单元格时)添加边框,例如:
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。