abCalendar.js

// abCalendar.js
// ide by: http://www.phpjabbers.com/how-to-make-a-php-calendar-php26.html

(function ($) {

    $.fn.abCalendar = function (options) {
        var settings = $.extend({
            datesTaken: false,
            showWeekends: true
        }, options);

        var mn = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var div = this;

        var cd = new Date();
        var cy = cd.getFullYear();
        var cm = cd.getMonth() + 1;

        getHtmlHeader = function (y, m) {

            var prev = calculatePrevious(y, m);
            var next = calculateNext(y, m);

            return '<table width="200">' +
                    '<tr align="center">' +
                        '<td bgcolor="#999999" style="color:#FFFFFF">' +
                            '<table width="100%" border="0" cellspacing="0" cellpadding="0">' +
                                '<tr>' +
                                    '<td width="50%" align="left">' +
                                        '<a href="#" onclick="return previous(' + prev["y"] +', ' + prev["m"] + ');" style="color:#FFFFFF">Previous</a>' +
                                    '</td>' +
                                    '<td width="50%" align="right">' +
                                        '<a href="#" onclick="return next(' + next["y"] +', ' + next["m"] + ');" style="color:#FFFFFF">Next</a>' +
                                    '</td>' +
                                '</tr>' +
                            '</table>' +
                        '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td align="center">' +
                                '<table width="100%" border="0" cellpadding="2" cellspacing="2">' +
                                    '<tr align="center">' +
                                        '<td colspan="7" bgcolor="#999999" style="color:#FFFFFF"><strong>' + mn[m-1] + ' ' + y +'</strong></td>' +
                                    '</tr>' +
                                    '<tr>' +
                                        '<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>M</strong></td>' +
                                        '<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>' +
                                        '<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>W</strong></td>' +
                                        '<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>' +
                                        '<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>F</strong></td>' +
                                        '<td align="center" bgcolor="#000000" style="color:#FFFFFF"><strong>S</strong></td>' +
                                        '<td align="center" bgcolor="#000000" style="color:#FFFFFF"><strong>S</strong></td>' +
                                    '</tr>'
                ;
        };

        generateCalendar = function (y, m) {
            // html holder
            var html = getHtmlHeader(y, m);
            // total number of dates in given month defined
            // by month and year
            var tnod = new Date(y, m, 0).getDate();
            // first day offset
            var fdo = new Date(y, m-1, 1).getDay();
            // use european setup where week starts with
            // monday
            fdo -= 1;
            if (fdo < 0) {
                fdo = 6;
            }

            for (var i=0; i<(tnod+fdo); i++) {

                var mark = false;

                if (i%7 == 0) {
                    // if it is a first day open a new row
                    html += '<tr>';
                }

                if (i<fdo) {
                    // fill blanks for non existing dates of this month
                    html += '<td></td>';
                } else {
                    if (settings.showWeekends && (i%7 == 6 || i%7 == 5)) {
                        mark = true;
                    }
                    if (settings.datesTaken) {
                        var tm = m;
                        if (tm < 10) {
                            tm = '0'+tm;
                        }
                        var td = (i - fdo + 1);
                        if (td < 10) {
                            td = '0'+td;
                        }

                        var cd = y + '-' + tm + '-' + td;
                        if (settings.datesTaken.indexOf(cd) != -1) {
                            mark = true;
                        }
                    }

                    if (mark) {
                        html += '<td align="center" bgcolor="#bbbbbb" valign="middle" height="20px">' + (i - fdo + 1) + '</td>';
                    } else {
                        html += '<td align="center" valign="middle" height="20px">' + (i - fdo + 1) + '</td>';
                    }
                }

                if (i%7 == 6) {
                    // if it is a last day close a new row
                    html += '</tr>';
                }
            }

            html += '</table></td></tr></table>';

            return html;
        };

        next = function (y, m) {
            var cal = generateCalendar(y, m);
            div.empty();
            div.append(cal);
        };

        previous = function (y, m) {
            var cal = generateCalendar(y, m);
            div.empty();
            div.append(cal);
        };

        calculatePrevious = function (y, m) {
            var ny = y;
            var nm = m-1;

            if (nm == 0) {
                nm = 12;
                ny = ny - 1;
            }

            var rsp = [];
            rsp['y'] = ny;
            rsp['m'] = nm;

            return rsp;
        };

        calculateNext = function (y, m) {
            var ny = y;
            var nm = m+1;

            if (nm == 13) {
                nm = 1;
                ny = ny + 1;
            }

            var rsp = [];
            rsp['y'] = ny;
            rsp['m'] = nm;

            return rsp;
        };

        return this.append(generateCalendar(cy, cm));
    };

}(jQuery));

Usage example

<html lang="en">
<head>
    <script src="js/jquery.min.js"></script>
    <script src="calendar.js"></script>
</head>
<body>
    <script>
        jQuery(document).ready(function($) {
            $('#container').abCalendar({
                datesTaken: "['2015-08-12', '2015-08-03', '2015-08-18', '2015-08-19', '2015-08-20', '2015-08-16', '2015-07-03', '2015-07-16', '2015-07-31', '2015-09-20', '2015-09-16']"
            });
        });
    </script>
  <div id="container">
  </div>
</body>
</html>