Add a short text to preview the event information. Use the attribute
data-preview="preview text" to specify the text you want.
<head>
<link href="css/RegalCalendar.css" rel="stylesheet" />
<link href="css/all.min.css" rel="stylesheet" />
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/RegalCalendar.js"></script>
<script>
$(function() {
$('#rCalendar').RegalCalendar({
theme: '#e83e8c',
show: 'mouseenter',
minDate: new Date(2019, 1 - 1, 1),
maxDate: new Date(2020, 12 - 1, 31)
});
});
</script>
</head>
<body>
<div id="rCalendar" class="regalcalendar">
<span
class="event"
data-title="Event 2"
data-location="France"
data-date="11/01/2020"
data-time="12:00"
data-icon="fa fa-award"
data-types="country"
data-preview="Award">
<!-- Event description -->
</span>
</div>
</body>