How to Highlight Particular Dates in JQuery UI Datepicker

In this post I will cover how to highlight specific dates in Jquery UI Datepicker. It pretty simple actually, we will add a custom CSS class to particular dates and then style those particular dates.

Here are steps which we will be following to highlight particular dates in datepicker:

  1. We use array to hold the dates which will be highlighted.
  2. We will utilize  datepicker beforeShowDay function to add custom CSS classes to the dates in array
  3. We will add CSS rules to style the dates.

Introduction

Before we begin, lets try to understand the core concept of beforeShowDay option of datepicker.

beforeShowDay (Official Documentation)

A function that takes a day as a parameter 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.

Another important thing to note is that this function is called for each day by the DatePicker.  This is quite a handy function and one can utilize it to disable / enable specific dates

For this particular post, we will utilize the beforeShowDay function to add custom CSS classes.

First, we need an array of dates which we would like to highlight over the datepicker. The following code creates an array of date:

// An array of dates
var eventDates = {};
eventDates[ new Date( '04/12/2014' )] = new Date( '04/12/2014' );
eventDates[ new Date( '06/12/2014' )] = new Date( '06/12/2014' );
eventDates[ new Date( '20/12/2014' )] = new Date( '20/12/2014' );
eventDates[ new Date( '25/12/2014' )] = new Date( '25/12/2014' );

Now, the datepicker provide beforeShowDay function, which will be called before rendering the full datepicker. So we will used this function to highlight the particular dates.

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

Yes, we need some CSS also to differentiate the particular dates:

.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}

Highlighting particular dates

Figure 1: Shows highlighted dates

The following code is a complete example for highlighting particular dates in jQuery UI datepicker.

<!doctype html>
<html lang="en">
<head>
<title> How to Highlight Particular Dates in JQuery UI Datepicker </title>
<meta charset="utf-8">
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.min.js" > </script>
<script src="js/jquery-ui-1.8.16.custom.min.js" > </script>
<style>
* {
    margin: 0 auto;
    padding: 0;
}

body {
    background-color: #F2F2F2;
}

.container {
    margin: 0 auto;
    width: 920px;
    padding: 50px 20px;
    background-color: #fff;
}

h3 {
    text-align: center;
}

#calendar {
    margin-top: 40px;
}
    
.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}
</style>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        // An array of dates
        var eventDates = {};
        eventDates[ new Date( '12/04/2014' )] = new Date( '12/04/2014' );
        eventDates[ new Date( '12/06/2014' )] = new Date( '12/06/2014' );
        eventDates[ new Date( '12/20/2014' )] = new Date( '12/20/2014' );
        eventDates[ new Date( '12/25/2014' )] = new Date( '12/25/2014' );
        
        // datepicker
        jQuery('#calendar').datepicker({
            beforeShowDay: function( date ) {
                var highlight = eventDates[date];
                if( highlight ) {
                     return [true, "event", highlight];
                } else {
                     return [true, '', ''];
                }
             }
        });
    });
</script>
</head>
<body>
    <div class="container">
        <h3> Highlight Particular Dates in JQuery UI Datepicker </h3>
        
        <div id="calendar" > </div>
    </div>
</body>
</html>

Here is the live demo.

See the Pen NPxzYq by Mohit Bhansali (@mohitbhansali) on CodePen.

Final Words

Today, we have seen how to highlight particular dates in jQuery UI Datepicker. Likewise, you can add multiple options like events and holidays. All you need to do is, call a function inside beforeShowDay function, return the status of date (event or holiday), add another condition and change the CSS class for two. That’s it ! You are good to go.

Play around and let us know, if you find any difficulty in implementing this feature.

References

(1): http://api.jqueryui.com/datepicker/#option-beforeShowDay

About Mohit Bhansali

A hyperactive mind with a passion for getting acquainted with the latest technology.

Comments

  1. Thank you for your tutorial.

    I am getting this error :

    TypeError: daySettings[2].replace is not a function

    any idea?

    jquery : v2.1.1
    jquery-ui : 1.11.2

    • I’m getting the same error. “beforeshowday” “Unable to get property ‘0’ of undefined or null reference”. I think it occurs because of this line

      return [true, “event”, highlight];

      but I can’t be sure, I might be wrong. The workaround is to use jQuery 1.9.1 with jQueryUI 1.9.2. However I would like to know if there is a fix for this error in later versions of jQuery

      • Ah, no sooner than I post that I immediately stumble across the solution. The true condition:

        return [true, “event”, highlight];

        needs to be changed to this:

        return [true, “event”, “highlight”];

        Don’t ask me why, but it works!

  2. likhith.S says:

    Thanks Helped Me Lot….

  3. likhith.S says:

    Thanks Steven your tips helped me…

  4. Senthil says:

    Thanks a lot

  5. Using this code, i am not able to change background color.Border color only changed…
    How to change span color….

  6. I have two questions

    01. Why we add dates in this format
    var eventDates = {};
    eventDates[ new Date( ’12/04/2014′ )] = new Date( ’12/04/2014′ );
    eventDates[ new Date( ’12/06/2014′ )] = new Date( ’12/06/2014′ );
    eventDates[ new Date( ’12/20/2014′ )] = new Date( ’12/20/2014′ );
    eventDates[ new Date( ’12/25/2014′ )] = new Date( ’12/25/2014′ );

    Can’t we use
    var disableddates = [“12-3-2014″, “12-11-2014″, “12-25-2014″, “12-20-2014″];
    this type simple array.

    02. What is the meaning of this? Can you please explain this more?

    var highlight = eventDates[date];
    if( highlight ) {
    return [true, “event”, highlight];
    } else {
    return [true, ”, ”];
    }

    How this highlight become true? I want to load dates searching via database. I’m using java ee. So Please explain me that.
    Thank you.

  7. Howard Brown says:

    > Why can’t we use [“12-3-2014″, “12-11-2014″, “12-25-2014″, “12-20-2014″]; ?
    Because the datepicker is going to access the individual values in the array by the date for the cell. For Oct, 1, 2017, the index is 10/01/2017 as a date, not a string, and the value if there is one should be a string, but can be anything, so long as what gets returned in the third position of the [true, ‘event’, ‘xxxx’] array is a string. JavaScript does on the fly conversion, but it probably would be best to just convert the date value to a string and before putting it in the array for xxx. However, you can put any string you like there such as ‘Happy Forth’ for 4-July-2017.

    To the other person asking about how did a true value get into Highlight, most any value that isn’t undefined or actually stored as false tests as true. Please see the http://www.w3schools.com/js/js_booleans.asp for a more complete answer.

    Would anyone know how to override the tool-tip display code so that multiple times and names could stored in each date and properly displayed when the mouse hovers over a date?

  8. it’s possible Ajax Request to Highlight Days from MySQL for fill array eventDates ?

  9. Hello, Bro
    is it possible for date-range-picker, I am trying to do same thing with date-range-picker. I need to display an array od date between a particular date-range on date-range-picker..

    Please assist if possible

  10. when I used on minDate then its not working… plz help me

  11. Noran maher says:

    thanks alot this tutorial helps me after wo days of working on this issue , thanks alot again

Trackbacks

  1. […] in one of my current Apex projects I have to show a mini calendar and mark certain days there. Unfortunately there is only the option to mark exactly one date in APEX. After a little Google research I came across the following article: http://www.spiceforms.com/blog/highlight-particular-dates-jquery-ui-datepicker/ […]

Speak Your Mind

*