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

Last Reply one month ago By dharmendr

Posted one month ago

hello, 

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

https://bootsnipp.com/snippets/M3jmA

please advice

Posted one month ago

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