jQuery datepicker: highlight and style multiple dates

Question

I'm using the jQuery date picker as an online calendar too. I have a setup which takes the date values in the data-value attribute of the .whats-on-block divs, and assigns the .special class to the relevant date value in the jQuery date picker, thus I can style it accordingly via CSS.
This works great, I also have a .highlights div with multiple date values as the data-highlight attribute, I'm wondering if I can assign the .highlighter class to the relevant date values in the date picker so I can style these separately? I'm not really sure how to achieve this as the beforeShowDay function is already being used to assign the .special . Here's the markup...

HTML

<div class="whats-on-grid">
    <div class="datepicker-block" class="whats-on-block">
        <div id="datepicker"></div>
    </div>
    <div class="whats-on-block" data-value="1982014"></div>
    <div class="whats-on-block" data-value="2282014"></div>
    <div class="whats-on-block" data-value="1482014"></div>
    <div class="whats-on-block" data-value="2982014"></div>
    //etc
</div>


<div class="highlights" data-highlight="2882014 2782014 1582014 2082014 1992014"></div>

CSS

.special { background-color: red !important; }
.highlighter { background-color: blue !important; }

jQuery

var $container = $('.whats-on-grid');
var $blocks = $("div.whats-on-block", ".whats-on-grid");

$(function () {
    var blocks = $('.whats-on-grid .whats-on-block')
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '→',
        //prevText: '←',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
        onSelect: function (dateText, inst) {
            var date = new Date(dateText);
            var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

            $container.isotope({
                filter: '[data-value~="' + dateValue + '"], #datepicker-block'
            });
        },
        beforeShowDay: function (date) {
            var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
            var contains = blocks.filter('[data-value~="' + target + '"]').length > 0;
            return [true, contains ? 'special' : '', '']
        }
    });
});

Any suggestions on how this can be achieved would be greatly appreciated!

Answer 1

If all you are trying to do is to add the highlighter class to the highlights dates prior to rendering, you should be able to easily achieved that in your beforeShowDay function like this:

beforeShowDay: function (date) {
    var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
    var isSpecial = blocks.filter('[data-value~="' + target + '"]').length > 0;
    var isHighlight = $("div[class~='highlights']").filter('[data-highlight~="' + target + '"]').length > 0;
    if (isSpecial) 
        return [true, 'special', ''];
    else if (isHighlight)
        return [true, 'highlighter', ''];
    return [true, '', ''];
    }

The tricky part is what if a special date is also a highlight date. You may need different CSS styling to distinguish them.

Live demo available on fiddle .