Highlight specific Dates in Bootstrap Calendar based on specified Dates using jQuery

Last Reply 11 months ago By dharmendr

Posted one year ago


i have dates booking

17 July 2019

21 July 2019 

on page load i want to show current month calender and check the date from database and where date of databsae match from calender date so that date should be highlighted user can also go next and backward months also

i am using bootsstrap full Calendar


please advice

Posted 11 months ago

Hi nauna,

Use dayRender event to highlight the database dates.

Check this example. Now please take its reference and correct your code.


<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()) {
<div id="calendar" style="height: 400px; width: 400px;">