How to Highlight Specific Dates in jQuery UI Datepicker

The jQuery UI Datepicker is a widely used plugin that provides an easy way to add a calendar to the input field for selecting a date. The jQuery Datepicker is attached with form input field or inline element to open an interactive calendar. Also, it is a highly configurable plugin that lets you customize datepicker functionality as per your requirement.

There are few great customization options are available in jQuery UI Datepicker. In this article, you’ll know the uses of most useful configuration option beforeShowDay. The beforeShowDay option allows altering day before it is displayed on the calendar. Here we are going to show you how to highlight specific dates in jQuery UI Datepicker using beforeShowDay option.

Date highlight functionality is required when you wants to specify some particular dates in the calendar. For example, you want to mark events dates on jQuery calendar which helps the user to know about the event schedule. In that situation, you can easily change the background color or text color and highlight specific event date range in your existing jQuery UI Datepicker with beforeShowDay option.

Before you begin, take a look at beforeShowDay option of jQuery UI Datepicker.
beforeShowDay function takes a date and must return an array with:

• [0]: true/false indicating whether or not this date is selectable
• [1]: a CSS class name to add to the date’s cell or “” for the default presentation
• [2]: an optional popup tooltip for this date

This function is called for each day in the datepicker before it is displayed.

JavaScript

At first, include some required jQuery and jQuery UI libraries.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Define an array of specific dates which will be highlighted in the calendar. The following code creates an array of dates and assigns the dates array into eventDates variable.

// An array of dates
var eventDates = {};
eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );

Now use beforeShowDay option of jQuery UI datepicker, which will be called for each day before render it in the calendar. In beforeShowDay function, we’ll check whether the date is matched with the specific date and add a class to the data if matches found. This added class will help you to change the background color or text color of the particular dates in the calendar.

// datepicker
$('#datepicker').datepicker({
    beforeShowDay: function( date ) {
        var highlight = eventDates[date];
        if( highlight ) {
             return [true, "event", 'Tooltip text'];
        } else {
             return [true, '', ''];
        }
    }
});

The complete JavaScript code to highlight specific dates.

$( function() {
    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
    eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
    eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
    eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );
    
    // datepicker
    $('#datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [true, "event", 'Tooltip text'];
            } else {
                 return [true, '', ''];
            }
        }
    });
});

HTML

The jQuery UI Datepicker is tied with the input field or inline div.

Date: <div id="datepicker"></div>

OR

Date: <input type="text" id="datepicker">

CSS

The following CSS code will highlight the specific dates on jQuery UI Datepicker calendar.

.event a {
    background-color: #5FBA7D !important;
    color: #ffffff !important;
}