You just need to run calendar.unselect(); after you've added the event so that the element which visualises the selection (which because of the selectMirror option is solid rather than transparent) doesn't overlay on top of the rendered event.
Selections are not cleared automatically until you click somewhere else (unless you have unselectAuto: true in the options).
Relevant documentation:
https://fullcalendar.io/docs/Calendar-unselect
https://fullcalendar.io/docs/unselectAuto
Demo:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
editable: true,
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay'
},
selectable: true, //can click to set event
selectMirror: true, // so it's solid
unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears
editable: true,
eventStartEditable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
select: function(selectionInfo) {
calendar.addEvent({
title: 'dynamic event',
start: selectionInfo.start,
end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
});
calendar.unselect();
}
});
calendar.render();
});
<!DOCTYPE html>
<html>
<head>
<title>Fullcalendar Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
