Hi nauna,
Use dayRender event to highlight the database dates.
Check this example. Now please take its reference and correct your code.
HTML
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="FullCalendar.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" />
<script type="text/javascript">
$(document).ready(function () {
// Get the dates from database using ajax call.
var dates = [];
dates.push(new Date('2019/07/16'));
dates.push(new Date('2019/07/17'));
dates.push(new Date('2019/07/20'));
dates.push(new Date('2019/06/25'));
dates.push(new Date('2019/08/10'));
var calendar = $('#calendar').fullCalendar({
dayRender: function (daysOfWeek, cell) {
for (var i = 0; i < dates.length; i++) {
var reqDate = dates[i];
if (reqDate.toDateString() == daysOfWeek.toDateString()) {
$(cell).addClass('fc-state-highlight');
}
}
}
});
});
</script>
<div id="calendar" style="height: 400px; width: 400px;">
</div>
Screenshot
