JavaScript Calendar

Set the forwardText property of the jqxCalendar. Author: http://jqwidgets.com

by txhi

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<div id='jqxCalendar'></div>

CSS

.hidden {
    display: none;
}

.special1 {
    background-color: #bd5;
}

.special2 {
    background-color: #5db;
}

JavaScript

var date1 = new Date();
var date2 = new Date();
var date3 = new Date();
date1.setDate(2);
date2.setDate(3);
date3.setDate(4);

var date4 = new Date();
var date5 = new Date();
date4.setDate(10);
date5.setDate(11);

var classDates = {
    'special1': [date1, date2, date3],
    'special2': [date4, date5]
};

$("#jqxCalendar").jqxCalendar({
    theme: 'energyblue',
    width: '200px',
    height: '200px'
});


var loop = 1;
for (var date in classDates) {
    console.log(classDates[date]);

    var currentDates = classDates[date];
    if (currentDates)
    {
        for (var j = 0; j < currentDates.length; j++)
        {
            var currentDate = currentDates[j];
            console.log(currentDate);
        	$("#jqxCalendar").jqxCalendar('addSpecialDate', currentDate, 'special' + loop, '');
        }
    }

    loop += 1;
}